/* ══════════════════════════════════════════════════════════════════════
   AVI TUTOR PANEL

   Native to the product, not a chat-app clone: no AI gradients, no giant
   empty landing state, flat violet accents matching the rest of the app.
   Avi's replies reuse the same visual language as the existing
   "explain differently" speech box (.explain-alt-box in app.css) — a
   violet-tinted card with a left accent border — rather than inventing a
   second look for the same mascot.

   Layout: below 1360px this is a right-sliding drawer, mechanically
   identical to #sideMenu (fixed, slides right:-Xpx -> 0, dimming overlay,
   openDialog/closeDialog focus trap) — this covers 1280-1359px too, where
   a 320px dock left the reflowed content column too narrow to read. At
   1360px+ it becomes a slim fixed panel docked to the right edge with no
   dimming backdrop; html.tutor-open reflows #mainContent out of its way.
   ══════════════════════════════════════════════════════════════════════ */

#tutorOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2010;
    backdrop-filter: blur(4px);
}

#tutorPanel {
    position: fixed;
    top: 0;
    right: -380px;
    width: 380px;
    max-width: 92vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #fff);
    border-left: 1px solid rgba(91, 80, 232, 0.14);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.1);
    z-index: 2021;   /* above #sideMenu's overlay+panel (2010/2020) */
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
    color: var(--text-primary, #111827);
}

#tutorPanel.tutor-open { right: 0; }
#tutorOverlay.tutor-overlay-visible { display: block; }

@media (min-width: 1360px) {
    /* Reserve the dock outside the width-limited study column. Existing
       right-hand space is used first; only a narrower viewport reflows the
       content. Padding inside its max-width would always remove 320px of
       reading space, even when the dock already fits in the gutter.
       Below 1360px the modal drawer keeps the full reading width. */
    #tutorOverlay { display: none !important; }
    #tutorPanel {
        width: 320px;
        max-width: 320px;
        top: 68px;
        height: calc(100% - 68px);
        box-shadow: -6px 0 28px rgba(24, 24, 63, 0.07);
    }
    html.tutor-open #mainContent.container {
        margin-right: 320px;
    }
}

.tutor-head {
    flex: none;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--card-border, rgba(91, 80, 232, 0.1));
}

.tutor-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tutor-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.tutor-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--text-muted);
    cursor: var(--cur-point, pointer);
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 8px;
}

.tutor-close:hover { background: rgba(91, 80, 232, 0.08); }

.tutor-context {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.tutor-context-line {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.4;
}

.tutor-context-change {
    flex: none;
    background: none;
    border: none;
    color: var(--violet);
    font-weight: 700;
    font-size: 0.76rem;
    cursor: var(--cur-point, pointer);
    padding: 4px 6px;
    border-radius: 6px;
}

.tutor-context-change:hover { background: rgba(91, 80, 232, 0.08); }

.tutor-context-notice {
    margin-top: 8px;
    font-size: 0.74rem;
    color: var(--text-muted);
    background: rgba(91, 80, 232, 0.06);
    border-radius: 8px;
    padding: 6px 9px;
}

.tutor-signedout {
    padding: 18px;
    text-align: center;
}

.tutor-signedout p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.tutor-signin-btn {
    background: var(--violet);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: var(--cur-point, pointer);
    min-height: 44px;
}

.tutor-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px;
}

.tutor-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cold open: what a fresh, question-less panel shows instead of an empty
   box. Plain text, not a turn — never mistaken for something Avi said. */
.tutor-cold-open-line {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tutor-turn { max-width: 100%; }

.tutor-turn--user {
    align-self: flex-end;
    max-width: 88%;
}

.tutor-turn--user .tutor-turn-text {
    background: rgba(91, 80, 232, 0.09);
    border-radius: 14px 14px 4px 14px;
    padding: 9px 13px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Avi's reply — the same violet-tinted, left-accented card the
   "explain differently" box already uses (app.css .explain-alt-box),
   reproduced here so this file stays self-contained. */
.tutor-turn--avi {
    background: rgba(91, 80, 232, 0.07);
    border-left: 3px solid var(--violet);
    border-radius: 12px;
    padding: 12px 14px;
    animation: tutorFadeIn 0.3s ease;
}

.tutor-avi-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--violet);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.tutor-turn-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    word-wrap: break-word;
}

.tutor-turn--avi .tutor-turn-text strong { font-weight: 700; }

.tutor-pending-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.tutor-thinking {
    display: flex;
    gap: 5px;
    padding: 2px 0;
}

.tutor-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--violet);
    opacity: 0.35;
    animation: tutorDot 1.1s ease-in-out infinite;
}

.tutor-thinking span:nth-child(2) { animation-delay: 0.18s; }
.tutor-thinking span:nth-child(3) { animation-delay: 0.36s; }

/* A calm callout, not an alert: a marking disagreement flag is advisory,
   never red/urgent, and never restates a mark. */
.tutor-concern {
    margin-bottom: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(217, 119, 6, 0.09);
    border: 1px solid rgba(217, 119, 6, 0.22);
}

.tutor-concern-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--amber, #d97706);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.tutor-concern blockquote {
    margin: 4px 0 0;
    padding-left: 8px;
    border-left: 2px solid rgba(217, 119, 6, 0.4);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-secondary);
}

.tutor-uncertainty {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Honest cost: the exact per-turn credits the response reported, quiet and
   small — a receipt, not a warning. */
.tutor-cost-line {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.tutor-recommend {
    margin-top: 8px;
    padding-left: 18px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.tutor-followup { margin-top: 10px; }

.tutor-followup-rationale {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Shown instead of the follow-up button when the current scope is not a
   course quiz (notes/image/casual) — practice needs a real subject+unit
   to generate against. */
.tutor-followup-unavailable {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.tutor-followup-btn,
.tutor-checkq-hint {
    display: inline-flex;
    align-items: center;
    background: rgba(91, 80, 232, 0.12);
    border: none;
    border-radius: 999px;
    color: var(--violet);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 8px 14px;
    cursor: var(--cur-point, pointer);
    min-height: 36px;
}

.tutor-followup-btn:hover:not(:disabled) { background: rgba(91, 80, 232, 0.2); }
.tutor-followup-btn:disabled { opacity: 0.65; cursor: default; }

.tutor-quick-actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--card-border, rgba(91, 80, 232, 0.1));
}

.tutor-qa-btn {
    background: rgba(91, 80, 232, 0.08);
    border: none;
    border-radius: 999px;
    color: var(--violet);
    font-weight: 700;
    font-size: 0.76rem;
    padding: 8px 12px;
    cursor: var(--cur-point, pointer);
    min-height: 36px;
}

.tutor-qa-btn:hover:not(:disabled) { background: rgba(91, 80, 232, 0.16); }
.tutor-qa-btn:disabled { opacity: 0.4; cursor: default; }

.tutor-status {
    flex: none;
    margin: 0 16px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(91, 80, 232, 0.06);
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
}

.tutor-status.tutor-status--error {
    background: rgba(225, 29, 72, 0.07);
    color: #9f1239;
}

.tutor-status-action {
    display: inline-block;
    margin-top: 7px;
    background: var(--violet);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 14px;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: var(--cur-point, pointer);
    min-height: 36px;
}

/* Deterministic, non-AI "what to do next" — never rendered by a model
   call, so it carries none of Avi's speech-bubble styling. */
.tutor-upnext-hint {
    margin: 0 16px 8px;
    padding: 8px 11px;
    border-radius: 8px;
    background: rgba(91, 80, 232, 0.05);
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.4;
}

.tutor-composer {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
    position: relative;
}

.tutor-input {
    flex: 1 1 auto;
    resize: none;
    max-height: 110px;
    border: 1px solid var(--card-border, rgba(91, 80, 232, 0.16));
    border-radius: 14px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--card-bg, #fff);
}

.tutor-input:focus {
    outline: 2px solid var(--violet);
    outline-offset: 1px;
}

.tutor-char-count {
    position: absolute;
    right: 78px;
    bottom: 22px;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.tutor-send-btn {
    flex: none;
    background: var(--violet);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0 18px;
    height: 44px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: var(--cur-point, pointer);
}

.tutor-send-btn:disabled { opacity: 0.5; cursor: default; }

.tutor-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Inline entry points wired from app.js/study-journey.js next to the
   existing "Avi, I'm stuck" / "Get AI feedback" buttons. */
.tutor-inline-ask-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    margin-left: 8px;
    padding: 8px 16px;
    background: rgba(91, 80, 232, .1);
    border: none;
    border-radius: 999px;
    color: var(--violet);
    font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
    font-size: .8rem;
    font-weight: 700;
    cursor: var(--cur-point, pointer);
    min-height: 36px;
}

.tutor-inline-ask-btn:hover { background: rgba(91, 80, 232, .18); }

/* On its own line in a recap section, not beside a sibling button. */
.recap-ask-avi-btn { margin-left: 0; }

/* Small "Ask Avi" affordance on the Up Next card. */
.un-ask-avi {
    align-self: flex-start;
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--violet);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: var(--cur-point, pointer);
    padding: 6px 2px;
    min-height: 36px;
}

.un-ask-avi:hover { text-decoration: underline; }

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

@keyframes tutorDot {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    #tutorPanel { transition: none; }
    .tutor-turn--avi { animation: none; }
    .tutor-thinking span { animation: none; opacity: 0.7; }
    html.tutor-open #mainContent.container { transition: none; }
}

@media (max-width: 480px) {
    #tutorPanel { width: 100%; max-width: 100%; right: -100%; border-left: none; }
}

/* ─────────── DARK MODE ───────────
   This app's dark mode is [data-dark] on <html>, set from
   localStorage('theme') independent of the operating system's own light/
   dark setting (CLAUDE.md) — so theme switching here uses that attribute
   only, not a media query keyed to the OS setting or a theme attribute
   name borrowed from elsewhere. */
[data-dark] #tutorPanel {
    background: #1D1D21;
    border-left-color: rgba(255, 255, 255, 0.1);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}

[data-dark] .tutor-head,
[data-dark] .tutor-quick-actions {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-dark] .tutor-input {
    background: #232327;
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
}

[data-dark] .tutor-turn--user .tutor-turn-text {
    background: rgba(157, 148, 255, 0.14);
}

[data-dark] .tutor-turn--avi {
    background: rgba(157, 148, 255, 0.1);
}

[data-dark] .tutor-concern {
    background: rgba(217, 119, 6, 0.13);
    border-color: rgba(217, 119, 6, 0.3);
}

[data-dark] .tutor-status {
    background: rgba(157, 148, 255, 0.1);
}

[data-dark] .tutor-status.tutor-status--error {
    background: rgba(225, 29, 72, 0.11);
    color: #ff9aaa;
}

/* ── Floating launcher ────────────────────────────────────────────────────
   The always-visible way in (the side-menu item stays). Layered below the
   side menu, its overlay and the panel (2010+) so it dims with the page,
   above section pages (1003), and clear of the quiz buddy's resting spot
   (bottom 190px). Hidden while the panel is open and during an exam
   sitting, where the inline hint buttons are withheld for the same reason. */
.tutor-launcher {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 10px;
    min-height: 48px;
    background: var(--card-bg, #fff);
    border: 1.5px solid rgba(91, 80, 232, 0.22);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(91, 80, 232, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: var(--violet, #5b50e8);
    font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: var(--cur-point, pointer);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tutor-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(91, 80, 232, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tutor-launcher:focus-visible { outline: 3px solid rgba(91, 80, 232, 0.45); outline-offset: 2px; }
.tutor-launcher-face { width: 28px; height: 28px; border-radius: 50%; display: block; }
[data-dark] .tutor-launcher {
    border-color: rgba(157, 148, 255, 0.35);
    color: var(--violet-text, #b5adff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
html.tutor-open .tutor-launcher,
body.exam-active .tutor-launcher,
html[data-section="accountPage"] .tutor-launcher,   /* account and settings are not study screens */
html[data-section="settingsPage"] .tutor-launcher,
body:has(.study-sync-notice:not([hidden])) .tutor-launcher { display: none; } /* the sync-conflict card owns that corner */
/* The generating screen's fact tiles wrap into this corner at phone width,
   and a fixed launcher sat on top of the Verification tile — clipping it to
   "Verifi" and covering half its caption. Nobody asks the tutor a question
   while waiting for a quiz to exist, so the launcher stands down until it
   does. Keyed off the inline display the generator itself sets. */
body:has(#loading[style*="display: block"]) .tutor-launcher { display: none; }
@media (max-width: 860px) {
    .tutor-launcher { right: 14px; bottom: 14px; }
    /* Keep a page's last row reachable above the launcher. */
    html.tutor-launcher-on #mainContent.container { padding-bottom: 84px; }
}
@media (max-width: 600px) {
    /* Below 600px .btn-generate docks itself across the bottom (fixed,
       bottom 20px, ~58px tall, z 99): float clear of it. */
    .tutor-launcher { bottom: 92px; }
    html.tutor-launcher-on #mainContent.container { padding-bottom: 156px; }
}
@media (prefers-reduced-motion: reduce) {
    .tutor-launcher { transition: none; }
    .tutor-launcher:hover { transform: none; }
}

/* Links on the charcoal panel use the light link purple (#5b50e8 is 3:1 here). */
[data-dark] :is(.tutor-context-change, .tutor-qa-btn) { color: #b6a6ff; }