/* ============================================================
   GLOBAL AI TEACHER — premium assistant surface.
   Scope: #global-ai-modal (dashboard "Personal AI Teacher").
   The chapter floating drawer keeps its own legacy styles.

   Direction: the shell is a calm near-black sheet, and colour is
   spent in exactly three places — the aurora behind the header,
   the send button, and whatever is currently thinking. The old
   version tinted every surface teal, which left nothing to draw
   the eye to the one line that mattered.

   One accent ramp (blue → violet → rose) carries every gradient
   so the panel reads as one object rather than a pile of chips.
   ============================================================ */

#global-ai-modal {
    --gai-ink: #e9edf3;
    --gai-ink-dim: #9aa6b8;
    --gai-ink-faint: #6b7789;
    --gai-line: rgba(255, 255, 255, 0.08);
    --gai-line-soft: rgba(255, 255, 255, 0.05);
    --gai-surface: rgba(255, 255, 255, 0.035);
    --gai-surface-hi: rgba(255, 255, 255, 0.07);

    --gai-a1: #6ea8fe;
    --gai-a2: #a98bff;
    --gai-a3: #ff8fab;
    --gai-accent: linear-gradient(115deg, var(--gai-a1), var(--gai-a2) 55%, var(--gai-a3));

    --gai-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gai-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ---------- Backdrop & shell ---------- */

.gai-modal {
    z-index: 10000;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 8, 13, 0.72);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    opacity: 0;
    transition: opacity 0.3s var(--gai-ease);
}

.gai-modal.is-open { opacity: 1; }

.gai-shell {
    width: min(96%, 880px);
    height: min(90%, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    border-radius: 28px;
    border: 1px solid var(--gai-line);
    background: #0b0d12;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    transform: translateY(30px) scale(0.965);
    opacity: 0;
    transition: transform 0.42s var(--gai-spring), opacity 0.3s var(--gai-ease);
}

.gai-modal.is-open .gai-shell {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* The only large area of colour in the panel. It drifts slowly so the
   surface feels alive without anything actually moving on screen. */
.gai-aurora {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 70%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 60% at 22% 40%, rgba(110, 168, 254, 0.30), transparent 70%),
        radial-gradient(40% 55% at 60% 30%, rgba(169, 139, 255, 0.28), transparent 70%),
        radial-gradient(38% 50% at 85% 55%, rgba(255, 143, 171, 0.20), transparent 70%);
    filter: blur(28px);
    opacity: 0.55;
    animation: gai-aurora 22s ease-in-out infinite alternate;
}

/* ---------- Header ---------- */

.gai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gai-line-soft);
}

.gai-id {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

/* A conic ring rather than a glow: it reads as a live status light at
   any size, and it is the same ramp as the send button. */
.gai-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #0f131b;
    animation: gai-float 5s ease-in-out infinite;
}

.gai-avatar::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--gai-a1), var(--gai-a2), var(--gai-a3), var(--gai-a1));
    z-index: -1;
    animation: gai-spin 6s linear infinite;
}

.gai-avatar::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #1b2333, #0c1017);
    z-index: -1;
}

.gai-avatar svg { position: relative; }

.gai-id-text { min-width: 0; }

.gai-id-text h3 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The route badge names a model, and model names are long. It truncates
   rather than wrapping, which would push the header two lines tall. */
.gai-presence {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--gai-ink-faint);
    margin-top: 3px;
    min-width: 0;
}

.gai-presence > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gai-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
    animation: gai-pulse-dot 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

.gai-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.gai-hbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gai-ink-dim);
    background: var(--gai-surface);
    border: 1px solid var(--gai-line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s var(--gai-ease), background 0.2s var(--gai-ease),
                border-color 0.2s var(--gai-ease), transform 0.2s var(--gai-spring);
}

.gai-hbtn:hover {
    color: #fff;
    background: var(--gai-surface-hi);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.gai-hbtn:active { transform: translateY(0) scale(0.97); }

.gai-hbtn.is-danger:hover {
    color: #ffb4a9;
    border-color: rgba(255, 120, 120, 0.35);
    background: rgba(255, 120, 120, 0.1);
}

.gai-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-left: 2px;
    font-size: 0.95rem;
    color: var(--gai-ink-dim);
    background: var(--gai-surface);
    border: 1px solid var(--gai-line);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s var(--gai-ease), background 0.2s var(--gai-ease), transform 0.3s var(--gai-ease);
}

.gai-close:hover {
    color: #fff;
    background: rgba(255, 120, 120, 0.16);
    transform: rotate(90deg);
}

/* ---------- Stage & scroller ---------- */

.gai-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

.gai-body {
    flex: 1;
    padding: 26px 26px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 22px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.gai-body::-webkit-scrollbar { width: 8px; }
.gai-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.gai-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: content-box; }
.gai-body::-webkit-scrollbar-track { background: transparent; }

/* ---------- Messages ----------
   The assistant is NOT a bubble. A bubble caps line length and turns a
   worked solution into a narrow column; the reply is the page here, and
   only the student's own turn is a bubble. */

.gai-body .chat-message {
    line-height: 1.68;
    word-wrap: break-word;
    animation: gai-msg-in 0.45s var(--gai-ease) both;
}

.gai-body .bot-message {
    position: relative;
    align-self: stretch;
    max-width: none;
    text-align: left;
    color: var(--gai-ink);
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 40px;
    font-size: 0.95rem;
}

/* The EVE mark beside every reply, drawn in CSS so no extra element is
   needed in each message. */
.gai-body .bot-message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, #0b0d12 0 26%, transparent 27%),
        var(--gai-accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 3px 12px rgba(110, 168, 254, 0.22);
}

.gai-body .user-message {
    align-self: flex-end;
    max-width: 78%;
    padding: 12px 18px;
    color: #f2f5fa;
    font-weight: 500;
    font-size: 0.94rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--gai-line);
    border-radius: 20px 20px 6px 20px;
}

.gai-body .chat-message h1,
.gai-body .chat-message h2,
.gai-body .chat-message h3 {
    margin: 18px 0 8px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.gai-body .chat-message h1 { font-size: 1.16rem; }
.gai-body .chat-message h2 { font-size: 1.06rem; }
.gai-body .chat-message h3 { font-size: 0.97rem; }
.gai-body .chat-message p { margin: 0; }
.gai-body .chat-message strong { color: #fff; font-weight: 600; }
.gai-body .chat-message em { color: #cfd8e6; }

.gai-body .chat-message hr {
    border: none;
    height: 1px;
    margin: 16px 0;
    background: linear-gradient(90deg, var(--gai-line), transparent);
}

/* Typewriter caret — a thin bar, the way a text cursor actually looks. */
.type-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: text-bottom;
    border-radius: 2px;
    background: var(--gai-a2);
    animation: gai-caret 1s steps(1) infinite;
}

/* ---------- Per-message actions ---------- */

.gai-msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    opacity: 0;
    transform: translateY(4px);
    animation: gai-fade-up 0.35s var(--gai-ease) 0.12s forwards;
}

.gai-act {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    color: var(--gai-ink-faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.18s var(--gai-ease), background 0.18s var(--gai-ease),
                border-color 0.18s var(--gai-ease), transform 0.18s var(--gai-spring);
}

.gai-act:hover {
    color: #fff;
    background: var(--gai-surface-hi);
    border-color: var(--gai-line);
    transform: translateY(-2px);
}

.gai-act-regen:hover { color: #ffd88a; }

.gai-toast {
    position: absolute;
    bottom: -24px;
    left: 40px;
    font-size: 0.7rem;
    color: #a7f3d0;
    background: rgba(10, 14, 20, 0.92);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 999px;
    padding: 3px 11px;
    white-space: nowrap;
    animation: gai-fade-up 0.25s var(--gai-ease) both;
    z-index: 5;
}

/* ---------- Greeting hero + suggestion chips ----------
   Shown once, in place of a wall of text, so the first thing on screen
   is something to press rather than something to read. */

.gai-hero {
    animation: gai-msg-in 0.5s var(--gai-ease) both;
}

.gai-hero-title {
    margin: 0 0 6px;
    font-size: clamp(1.55rem, 4vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    background: var(--gai-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gai-hero-sub {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gai-ink-dim);
}

.gai-hero-sub strong { color: #fff; font-weight: 600; }

/* Two columns, not auto-fit: there are four chips, and auto-fit lands on
   three-plus-one at most panel widths, which reads as a mistake. */
.gai-suggest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.gai-chip {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--gai-ink);
    background: var(--gai-surface);
    border: 1px solid var(--gai-line);
    border-radius: 16px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    animation: gai-fade-up 0.45s var(--gai-ease) forwards;
    transition: background 0.2s var(--gai-ease), border-color 0.2s var(--gai-ease), transform 0.22s var(--gai-spring);
}

.gai-chip:nth-child(1) { animation-delay: 0.10s; }
.gai-chip:nth-child(2) { animation-delay: 0.16s; }
.gai-chip:nth-child(3) { animation-delay: 0.22s; }
.gai-chip:nth-child(4) { animation-delay: 0.28s; }

.gai-chip:hover {
    background: var(--gai-surface-hi);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.gai-chip:active { transform: translateY(-1px) scale(0.985); }

.gai-chip i {
    font-size: 0.9rem;
    margin-top: 2px;
    background: var(--gai-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    flex-shrink: 0;
}

/* ---------- Thinking state ----------
   A shimmering line of text, not a spinner: it says which stage the
   answer is at, and it occupies the space the answer will land in. */

.gai-body .bot-message.loading { padding-left: 40px; }

.gai-thinking {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    background: linear-gradient(90deg, var(--gai-ink-faint) 20%, #fff 50%, var(--gai-ink-faint) 80%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gai-shimmer 1.6s linear infinite;
}

/* legacy three-dot indicator, restyled to match */
.gai-body .typing { display: flex; gap: 5px; padding: 6px 0; }
.gai-body .typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gai-a2);
    animation: gai-bounce 1.2s ease-in-out infinite;
}
.gai-body .typing span:nth-child(2) { animation-delay: 0.15s; }
.gai-body .typing span:nth-child(3) { animation-delay: 0.3s; }

/* ---------- Jump to latest ---------- */

.gai-jump {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateY(8px);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    color: var(--gai-ink);
    background: rgba(18, 22, 30, 0.92);
    border: 1px solid var(--gai-line);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    opacity: 0;
    animation: gai-jump-in 0.28s var(--gai-spring) forwards;
    z-index: 4;
}

.gai-jump[hidden] { display: none; }
.gai-jump:hover { background: rgba(28, 34, 46, 0.95); }

/* ---------- Status pill / question-ready card / retry ---------- */

.gai-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-left: 40px;
    color: var(--gai-ink-dim);
    font-size: 0.85rem;
    background: var(--gai-surface);
    border: 1px solid var(--gai-line);
    border-radius: 999px;
    padding: 8px 16px;
}

.gai-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gai-a2);
    animation: gai-pulse-dot 1.1s ease-in-out infinite;
}

.gai-qready .ai-question-success {
    background: var(--gai-surface);
    border: 1px solid rgba(169, 139, 255, 0.35);
    border-radius: 18px;
    padding: 18px;
}

.gai-qready .ai-question-success p { font-weight: 600; margin-bottom: 12px !important; }

.gai-qready .ai-q-actions { display: flex; gap: 9px; }

.gai-qready .ai-q-actions button {
    padding: 9px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a0d13;
    background: var(--gai-accent);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s var(--gai-spring), filter 0.2s var(--gai-ease);
}

.gai-qready .ai-q-actions button:hover { transform: translateY(-2px); filter: brightness(1.08); }

.ai-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gai-ink);
    background: var(--gai-surface-hi);
    border: 1px solid var(--gai-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s var(--gai-ease), transform 0.2s var(--gai-spring);
}

.ai-retry-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }

.gai-err-detail { margin-top: 12px; font-size: 0.72rem; color: var(--gai-ink-faint); }
.gai-err-detail summary { cursor: pointer; user-select: none; opacity: 0.75; }
.gai-err-detail summary:hover { opacity: 1; }

.gai-err-detail code {
    display: block;
    margin-top: 8px;
    padding: 9px 11px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 120, 120, 0.22);
    border-radius: 10px;
    color: #ffb4a9;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    word-break: break-all;
    white-space: pre-wrap;
}

/* ---------- Flashcards ---------- */

.gai-flashcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.gai-fcard { perspective: 900px; height: 134px; cursor: pointer; outline: none; }

.gai-fcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--gai-ease);
}

.gai-fcard.is-flipped .gai-fcard-inner { transform: rotateY(180deg); }
.gai-fcard:focus-visible .gai-fcard-inner { box-shadow: 0 0 0 2px var(--gai-a2); border-radius: 16px; }

.gai-fcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 12px;
    border-radius: 16px;
    font-size: 0.82rem;
    overflow: hidden;
}

.gai-fcard-face span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gai-fcard-front {
    background: linear-gradient(150deg, rgba(169, 139, 255, 0.22), rgba(169, 139, 255, 0.06));
    border: 1px solid rgba(169, 139, 255, 0.4);
    color: #e6dcff;
    font-weight: 600;
}

.gai-fcard-front small { font-size: 0.62rem; opacity: 0.6; font-weight: 400; }

.gai-fcard-back {
    background: linear-gradient(150deg, rgba(110, 168, 254, 0.22), rgba(110, 168, 254, 0.06));
    border: 1px solid rgba(110, 168, 254, 0.4);
    color: #d6e7ff;
    transform: rotateY(180deg);
}

/* ---------- Image preview ---------- */

.gai-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px 10px;
}

.gai-preview img {
    height: 60px;
    border-radius: 12px;
    border: 1px solid var(--gai-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    animation: gai-pop-in 0.3s var(--gai-spring) both;
}

.gai-preview-remove {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--gai-line);
    background: var(--gai-surface-hi);
    color: var(--gai-ink-dim);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s var(--gai-ease), color 0.18s var(--gai-ease), transform 0.18s var(--gai-spring);
}

.gai-preview-remove:hover { background: rgba(255, 120, 120, 0.2); color: #fff; transform: scale(1.08); }

/* ---------- Composer ----------
   One rounded field that contains the tools, the text and the send
   button, so the whole thing reads as a single control. */

.gai-composer { padding: 4px 20px 16px; }

.gai-composer-box {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 8px 8px 10px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--gai-line);
    border-radius: 26px;
    transition: border-color 0.25s var(--gai-ease), box-shadow 0.25s var(--gai-ease), background 0.25s var(--gai-ease);
}

.gai-composer-box:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(169, 139, 255, 0.45);
    box-shadow: 0 0 0 4px rgba(169, 139, 255, 0.1);
}

.gai-tool {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--gai-ink-faint);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s var(--gai-ease), background 0.2s var(--gai-ease), transform 0.2s var(--gai-spring);
}

.gai-tool:hover { color: #fff; background: var(--gai-surface-hi); transform: translateY(-1px); }

.gai-tool.is-listening {
    color: #ff8a80;
    background: rgba(255, 120, 120, 0.14);
    animation: gai-mic-ring 1.4s ease-out infinite;
}

.gai-input {
    flex: 1;
    min-width: 0;
    max-height: 168px;
    padding: 9px 6px !important;
    font-family: inherit;
    font-size: 0.96rem !important;
    line-height: 1.5;
    color: var(--gai-ink) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none;
    resize: none;
    overflow-y: auto;
    scrollbar-width: thin;
}

.gai-input::placeholder { color: var(--gai-ink-faint); }

.gai-send {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    color: #0a0d13;
    border: none;
    border-radius: 50%;
    background: var(--gai-accent);
    cursor: pointer;
    transition: transform 0.2s var(--gai-spring), filter 0.2s var(--gai-ease), opacity 0.2s var(--gai-ease);
}

.gai-send:hover:not(:disabled) { transform: scale(1.07); filter: brightness(1.1); }
.gai-send:active:not(:disabled) { transform: scale(0.93); }
.gai-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* While a reply is streaming the same button becomes Stop, so the
   control the student is already looking at is the one that cancels. */
.gai-send.is-stopping {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    opacity: 1;
    cursor: pointer;
    animation: gai-stop-pulse 1.6s ease-in-out infinite;
}

.gai-send.is-stopping:disabled { opacity: 1; cursor: pointer; }

.gai-composer-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 0;
    flex-wrap: wrap;
}

.gai-langbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.78rem;
    color: var(--gai-ink-faint);
}

.gai-langbar .lang-btn {
    padding: 5px 13px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--gai-ink-dim);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s var(--gai-ease), background 0.2s var(--gai-ease), border-color 0.2s var(--gai-ease);
}

.gai-langbar .lang-btn:hover { color: #fff; background: var(--gai-surface); }

.gai-langbar .lang-btn.active-lang {
    color: #fff;
    background: var(--gai-surface-hi);
    border-color: rgba(255, 255, 255, 0.16);
}

.gai-usage-chip {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--gai-ink-faint);
    background: var(--gai-surface);
    border: 1px solid var(--gai-line);
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
}

/* ---------- Saved doubts panel ---------- */

.gai-panel {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: rgba(11, 13, 18, 0.97);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.26s var(--gai-ease), transform 0.3s var(--gai-spring);
}

.gai-panel.is-open { opacity: 1; transform: translateY(0); }

.gai-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--gai-line-soft);
}

.gai-panel-head h3 { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 600; }
.gai-panel-head i { color: var(--gai-a2); margin-right: 8px; }

.gai-panel-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--gai-ink-dim);
    background: var(--gai-surface);
    border: 1px solid var(--gai-line);
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s var(--gai-ease), color 0.2s var(--gai-ease);
}

.gai-panel-close:hover { color: #fff; transform: rotate(90deg); }

.gai-panel-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 4px;
}

.gai-panel-tools .ai-retry-btn { margin-top: 0; padding: 7px 16px; font-size: 0.78rem; }
.gai-panel-count { font-size: 0.76rem; color: var(--gai-ink-faint); }

.gai-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gai-saved-item {
    position: relative;
    background: var(--gai-surface);
    border: 1px solid var(--gai-line);
    border-left: 2px solid var(--gai-a2);
    border-radius: 14px;
    padding: 13px 44px 13px 16px;
    animation: gai-fade-up 0.32s var(--gai-ease) both;
}

.gai-saved-q { color: #fff; font-weight: 600; font-size: 0.82rem; margin-bottom: 5px; }
.gai-saved-a { color: var(--gai-ink-dim); font-size: 0.83rem; line-height: 1.5; }

.gai-saved-del {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    color: var(--gai-ink-faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: color 0.18s var(--gai-ease), background 0.18s var(--gai-ease);
}

.gai-saved-del:hover { color: #ff8a80; background: rgba(255, 120, 120, 0.14); }

.gai-saved-empty {
    text-align: center;
    color: var(--gai-ink-faint);
    font-size: 0.9rem;
    line-height: 1.75;
    padding: 44px 20px;
}

/* ---------- Dashboard entry card ----------
   EVE replaces the Font Awesome robot, so the icon on the card is the
   same character as the avatar inside the panel. */

.ai-teacher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-teacher-icon svg { display: block; }

.ai-teacher-card:hover .ai-teacher-icon svg { animation: gai-float 1.6s ease-in-out infinite; }

/* ---------- Animations ---------- */

@keyframes gai-msg-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gai-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gai-jump-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes gai-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@keyframes gai-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -80% 0; }
}

@keyframes gai-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-6px); opacity: 1; }
}

@keyframes gai-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.55; }
}

@keyframes gai-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes gai-spin { to { transform: rotate(360deg); } }

@keyframes gai-aurora {
    from { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.45; }
    to { transform: translate3d(6%, 3%, 0) scale(1.12); opacity: 0.62; }
}

@keyframes gai-mic-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 120, 120, 0.4); }
    100% { box-shadow: 0 0 0 14px rgba(255, 120, 120, 0); }
}

@keyframes gai-pop-in {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes gai-stop-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.16); }
    50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* Reduced motion: the panel still works, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
    .gai-modal,
    .gai-shell,
    .gai-aurora,
    .gai-avatar,
    .gai-avatar::before,
    .gai-body .chat-message,
    .gai-chip,
    .gai-thinking,
    .gai-send,
    .gai-jump {
        animation: none !important;
        transition-duration: 0.01s !important;
    }

    .gai-chip { opacity: 1; transform: none; }
    .gai-body { scroll-behavior: auto; }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
    .gai-shell {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        border: none;
    }

    /* Five icon buttons and a title in 375px. The buttons give up their
       padding first — the title is the part that has to stay readable. */
    .gai-header { padding: 13px 12px; gap: 8px; }
    .gai-hbtn span { display: none; }
    .gai-hbtn { padding: 7px 9px; font-size: 0.74rem; }
    .gai-actions { gap: 3px; }
    .gai-close { width: 30px; height: 30px; margin-left: 0; }
    .gai-avatar { width: 36px; height: 36px; }
    .gai-id { gap: 10px; }
    .gai-id-text h3 { font-size: 0.92rem; }

    .gai-body { padding: 20px 16px 10px; gap: 18px; }
    .gai-body .bot-message { padding-left: 34px; font-size: 0.92rem; }
    .gai-body .bot-message::before { width: 22px; height: 22px; }
    .gai-body .user-message { max-width: 88%; }
    .gai-status { margin-left: 34px; }

    .gai-suggest { grid-template-columns: 1fr; }
    .gai-composer { padding: 4px 14px 12px; }
    .gai-usage-chip { display: none; }
}