:root {
    --bg-main: #1a1b2e;
    --bg-secondary: #242540;
    --bg-elevated: #2a2b48;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;
    --accent-primary: #818cf8;
    --accent-hover: #a5b4fc;
    --danger: #f87171;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-full: 999px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex: 0 0 auto;
}

.chat-header h1 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.chat-header .sub { font-size: 0.78rem; color: var(--text-tertiary); margin: 0; }
.chat-header .spacer { flex: 1; }

.lang-toggle { display: flex; background: var(--bg-elevated); border-radius: var(--radius-full); padding: 3px; }
.lang-toggle button {
    border: 0; background: transparent; color: var(--text-secondary);
    -webkit-text-fill-color: currentColor;
    padding: 5px 12px; border-radius: var(--radius-full);
    font: inherit; font-size: 0.78rem; cursor: pointer;
}
.lang-toggle button.lang-active {
    background: linear-gradient(135deg, var(--accent-primary), #6366f1);
    color: #fff; -webkit-text-fill-color: #fff;
}

.icon-btn {
    border: 0; background: var(--bg-elevated); color: var(--text-secondary);
    -webkit-text-fill-color: currentColor;
    width: 34px; height: 34px; border-radius: var(--radius-full);
    cursor: pointer; font-size: 0.9rem;
}
.icon-btn:hover { color: var(--accent-hover); }

.messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    /* Makes this scroll area the containing block for any position:fixed descendant. MathJax
       builds formula markup after the chat HTML is sanitised, and one route did let a replayed
       formula carry position:fixed over the whole page (measured 2026-09-14). If any such route
       ever reappears, the overlay stays trapped inside the message list instead of covering the
       header's clear button and the composer, so a child cannot be locked out of the app. */
    contain: paint;
}

.msg { max-width: 78%; padding: 11px 15px; border-radius: var(--radius-md); line-height: 1.55; font-size: 0.95rem; }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin-bottom: 0; }
.msg.ai { background: var(--bg-secondary); align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.user { background: linear-gradient(135deg, var(--accent-primary), #6366f1); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.msg.error { background: rgba(248, 113, 113, 0.14); color: var(--danger); align-self: flex-start; }

.typing { display: flex; gap: 5px; align-self: flex-start; padding: 14px 16px; background: var(--bg-secondary); border-radius: var(--radius-md); }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); animation: blink 1.3s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 10px; }
.suggestions button {
    background: var(--bg-elevated); color: var(--text-secondary);
    -webkit-text-fill-color: currentColor;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-full); padding: 7px 14px;
    font: inherit; font-size: 0.82rem; cursor: pointer;
}
.suggestions button:hover { color: var(--accent-hover); border-color: var(--accent-primary); }

.composer {
    flex: 0 0 auto;
    display: flex; gap: 10px; align-items: flex-end;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.composer textarea {
    flex: 1; resize: none; max-height: 120px;
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm); padding: 11px 14px;
    font: inherit; font-size: 0.95rem; line-height: 1.4;
}
.composer textarea:focus { outline: none; border-color: var(--accent-primary); }

.composer button {
    background: linear-gradient(135deg, var(--accent-primary), #6366f1);
    color: #fff; -webkit-text-fill-color: #fff;
    border: 0; border-radius: var(--radius-sm);
    padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer;
}
.composer button:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 600px) {
    .msg { max-width: 88%; }
    .messages { padding: 14px; }
}