/* style.css */

/* --- VARIABLES --- */
:root {
    --accent: #7c4dff;
    --accent-glow: rgba(124, 77, 255, 0.5);
    --glass-bg: rgba(20, 20, 20, 0.65);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --bubble-mine: rgba(124, 77, 255, 0.85);
    --bubble-other: rgba(60, 60, 65, 0.7);
}

/* BACKGROUND */
@keyframes gradient-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body {
    background: linear-gradient(-45deg, #000000, #1a1a2e, #16213e, #0f0f0f);
    background-size: 400% 400%;
    animation: gradient-bg 15s ease infinite;
    color: #fff;
    font-family: 'Inter', sans-serif;
    height: 100dvh;
    overflow: hidden;
}

/* LAYERS */
#calc-layer, .glass-overlay {
    position: fixed; inset: 0; z-index: 5000;
    backdrop-filter: blur(15px); background: rgba(0,0,0,0.85);
    display: flex; flex-direction: column;
}
.glass-overlay { justify-content: center; align-items: center; display: none; }

/* CALCULATOR */
#calc-layer { justify-content: flex-end; padding: 20px; background: #000; }
#calc-display { background: transparent; border: none; color: white; font-size: 5rem; text-align: right; width: 100%; margin-bottom: 30px; }
.calc-btn { width: 100%; aspect-ratio: 1; border-radius: 50%; font-size: 1.6rem; border: none; transition: 0.2s; }
.calc-btn:active { transform: scale(0.9); }
.btn-grey { background: #a5a5a5; color: black; }
.btn-dark-c { background: #333; color: white; }
.btn-orange { background: #ff9f0a; color: white; }
.btn-zero { border-radius: 50px; justify-content: flex-start; padding-left: 30px; aspect-ratio: auto; }

/* CHAT UI */
#chat-interface { display: none; flex-direction: column; height: 100%; backdrop-filter: blur(5px); }

.chat-header {
    height: 65px; background: var(--glass-bg); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--glass-border); 
    display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}

#msg-container {
    flex: 1; overflow-y: auto; padding: 20px 15px; display: flex; flex-direction: column; gap: 8px;
    scroll-behavior: smooth;
}

/* BUBBLES - BLINKING FIX HERE */
.msg-row { display: flex; width: 100%; } /* Removed animation from here */

/* Only animate NEW messages */
.new-msg { animation: popIn 0.3s ease-out forwards; }

@keyframes popIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.msg-bubble {
    max-width: 80%; padding: 12px 16px; border-radius: 20px; 
    font-size: 0.95rem; position: relative; word-break: break-word;
    backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    border: 1px solid rgba(255,255,255,0.05);
}
.msg-row.mine { justify-content: flex-end; }
.msg-row.mine .msg-bubble { background: var(--bubble-mine); color: white; border-bottom-right-radius: 2px; }
.msg-row.other { justify-content: flex-start; }
.msg-row.other .msg-bubble { background: var(--bubble-other); color: #e0e0e0; border-bottom-left-radius: 2px; }
.msg-bubble a { color: #b3e5fc; text-decoration: underline; font-weight: 500; }

/* FOOTER */
.chat-footer {
    background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: var(--glass-border); padding: 10px 15px; 
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.glass-input {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1);
    color: white; border-radius: 25px; padding: 12px 18px; resize: none; max-height: 120px; transition: 0.3s;
}
.glass-input:focus { background: rgba(255,255,255,0.15); outline: none; border-color: var(--accent); }
.btn-main { background: var(--accent); border: none; padding: 12px; border-radius: 15px; font-weight: 600; color: white; }
.btn-send {
    width: 48px; height: 48px; border-radius: 50%; background: var(--accent); border: none; 
    color: white; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px var(--accent-glow); transition: 0.3s;
}
.btn-send:active { transform: scale(0.9); }

/* TOAST */
#toast-popup {
    position: fixed; top: 90px; left: 50%; transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.95); border: 1px solid var(--accent); 
    color: white; padding: 12px 25px; border-radius: 30px;
    z-index: 6000; display: none; align-items: center; gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px);
}

/* SPINNER */
.btn-spinner {
    width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); 
    border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }