/* The teaching assistant panel + the course's illustrations.
   Borrows course.css's palette on purpose — /course and /posttrain are one
   surface, and since 2026-08-30 that surface is Air (app.css v3), not the dark
   Foundry the game pages still use. Loaded after course.css, so every
   var(--cv-*) below resolves to the light token; the literals beside them are
   FALLBACKS and must stay in step with course.css — a var that fails to
   resolve would drop a dark value onto a white panel. */

/* The illustration block moved to css/course.css on 2026-08-30, because
   course.html does NOT load this file and Track 1 got figures. The mobile
   rule that keeps a 1000-unit figure legible lived only here, so a /course
   figure shrank to a third instead of scrolling — 30px labels at ~8px,
   present and unreadable. It now lives in the stylesheet BOTH pages load.
   The `.pt-ta-*` selectors went with it rather than being duplicated: one
   definition is the property that matters, and these two families have
   drifted before. */

/* ---------- the launcher ---------- */

/* STACKED ABOVE THE SHARED FEEDBACK BUTTON, NOT ON TOP OF IT.
   js/feedback.js injects `.fb-btn` at right:16px / bottom:16px / z-index:8000 on
   every course page. This launcher was at bottom:18px / z-index:60, so the two
   sat in the same corner and the feedback button — 8000 against 60 — drew over
   it. `bottom` here is the fallback; mount() measures the real `.fb-btn` and
   corrects it, because a hardcoded 62px is a second copy of another file's
   padding and those drift silently. */
.pt-ta-launch {
    position: fixed;
    right: 16px;
    bottom: 62px;
    z-index: 7999;
    padding: 12px 18px;
    border-radius: 999px;
    border: 0;
    background: var(--cv-accent, #7c3aed);
    color: #fff;
    font: 500 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(124, 58, 237, .28);
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.pt-ta-launch:hover { box-shadow: 0 10px 28px rgba(124, 58, 237, .34); }
/* Only the lift is gated to a real pointer; the deeper shadow still answers a
   tap. Above the reduced-motion block, which zeroes the transition. */
@media (hover: hover) and (pointer: fine) {
    .pt-ta-launch:hover { transform: translateY(-2px); }
}
.pt-ta-launch.hidden { opacity: 0; pointer-events: none; }

/* ---------- the panel ---------- */

.pt-ta-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 400px;
    max-width: calc(100vw - 32px);
    height: min(620px, calc(100vh - 100px));
    /* Above `.fb-btn`'s 8000, or the feedback pill punches through an open
       panel — it sits exactly over the composer. The feedback MODAL is 13000
       and still wins, which is right: it is the thing you opened last. */
    z-index: 8100;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cv-line, #e8e8ed);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
    opacity: 0;
    transform: translateY(12px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    overflow: hidden;
}

.pt-ta-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.pt-ta-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cv-line, #e8e8ed);
    background: #fafafc;
}

.pt-ta-who {
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    color: var(--cv-accent, #7c3aed);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Which module the student is standing in. It is context, not a title —
   it must never compete with the answer for attention. */
.pt-ta-where {
    flex: 1;
    min-width: 0;
    font: 400 12px/1.3 system-ui, sans-serif;
    color: var(--cv-ink-3, #6e6e73);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-ta-x {
    background: none;
    border: 0;
    color: var(--cv-ink-3, #6e6e73);
    font-size: 15px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
}
.pt-ta-x:hover { color: var(--cv-ink, #1d1d1f); }

.pt-ta-log {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-ta-line { display: flex; }
.pt-ta-line.you { justify-content: flex-end; }
.pt-ta-line.ta { flex-direction: column; align-items: flex-start; }

.pt-ta-bubble {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 13px;
    font: 400 14.5px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--cv-ink, #1d1d1f);
    word-wrap: break-word;
}

.pt-ta-line.you .pt-ta-bubble {
    background: var(--cv-accent-soft, #f3eefe);
    border: 1px solid #e5daf9;
    white-space: pre-wrap;
}

.pt-ta-line.ta .pt-ta-bubble {
    background: var(--cv-sunk, #f5f5f7);
    border: 1px solid var(--cv-line, #e8e8ed);
    max-width: 100%;
}

/* the markdown-ish rows, same subset the lessons render */
.pt-ta-md-h { font-weight: 600; color: var(--cv-ink, #1d1d1f); margin: 8px 0 2px; }
.pt-ta-md-li { margin: 2px 0 2px 2px; }
.pt-ta-md-p { margin: 4px 0; }
.pt-ta-md-gap { height: 6px; }
.pt-ta-bubble code {
    background: rgba(0, 0, 0, .05);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 13px;
}
/* A fenced block. The tutor answers a build question with a command more often
   than with a sentence, and as of 2026-08-31 the renderer makes those a <pre>
   instead of three backticks of prose. It WRAPS: this panel is a 320px column,
   so a pre that scrolls sideways would hide the end of every command in it. */
.pt-ta-md-pre {
    background: rgba(0, 0, 0, .05); border-radius: 8px;
    padding: 8px 10px; margin: 6px 0;
}
.pt-ta-md-pre code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
    line-height: 1.6; white-space: pre-wrap; word-break: break-word;
    background: none; padding: 0; border-radius: 0;
}

/* ---------- citations ----------
   Pulled out of the prose and rendered as buttons: "[module: three-ways]" left
   inline reads as noise to exactly the audience least able to guess it is a
   link. */
.pt-ta-cites { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0 2px; }

.pt-ta-cite {
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid #e5daf9;
    background: var(--cv-accent-soft, #f3eefe);
    color: var(--cv-accent-2, #6d28d9);
    font: 500 12.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    cursor: pointer;
}
.pt-ta-cite:hover { background: #e9dffc; }

/* ---------- starters ---------- */

.pt-ta-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 12px;
}

.pt-ta-starter {
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--cv-line, #e8e8ed);
    background: #fff;
    color: var(--cv-ink-2, #6e6e73);
    font: 400 12.5px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    cursor: pointer;
    text-align: left;
}
.pt-ta-starter:hover { border-color: var(--cv-accent, #7c3aed); color: var(--cv-ink, #1d1d1f); }

/* ---------- the composer ---------- */

.pt-ta-ask {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--cv-line, #e8e8ed);
    background: #fafafc;
}

.pt-ta-input {
    flex: 1;
    resize: none;
    max-height: 120px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid #d2d2d7;
    background: #fff;
    color: var(--cv-ink, #1d1d1f);
    font: 400 14.5px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* 16px on iOS or the field zooms the whole page on focus */
}
.pt-ta-input:focus { outline: none; border-color: var(--cv-accent, #7c3aed); box-shadow: 0 0 0 4px var(--cv-accent-soft, #f3eefe); }

.pt-ta-send {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 0;
    background: var(--cv-accent, #7c3aed);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.pt-ta-send:hover { background: var(--cv-accent-2, #6d28d9); }

/* ---------- waiting ---------- */

.pt-ta-wait { display: flex; gap: 5px; align-items: center; padding: 13px; }
.pt-ta-wait i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cv-ink-3, #6e6e73);
    animation: pt-ta-blink 1.3s infinite ease-in-out;
}
.pt-ta-wait i:nth-child(2) { animation-delay: .18s; }
.pt-ta-wait i:nth-child(3) { animation-delay: .36s; }

@keyframes pt-ta-blink {
    0%, 80%, 100% { opacity: .25; }
    40%           { opacity: 1; }
}

/* Decoration degrades to INFORMATION, never to nothing: without the pulse the
   three dots still say "it is working on it". */
@media (prefers-reduced-motion: reduce) {
    .pt-ta-wait i { animation: none; opacity: .6; }
    .pt-ta-panel  { transition: none; }
    .pt-ta-launch { transition: none; }
}

/* ---------- phone ----------
   A 400px panel floating on a 390px screen is a panel with no page behind it,
   so on a phone it becomes a sheet that owns the bottom of the screen. */
@media (max-width: 560px) {
    .pt-ta-panel {
        right: 0; left: 0; bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 82vh;
        border-radius: 16px 16px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    /* `.fb-btn` shrinks under 520px (right:12 bottom:12, smaller padding), so
       the fallback offset shrinks with it. mount() still measures. */
    .pt-ta-launch { right: 12px; bottom: 54px; padding: 11px 16px; font-size: 14px; }
    /* 16px stops iOS zooming the page when the field takes focus. */
    .pt-ta-input { font-size: 16px; }
}

/* ---------- ask about the passage you selected ----------
   Nathan 2026-08-31: "Once students select certain part, allow it to ask
   questions to AI Tutor." Three pieces: the pill that follows a selection in
   the module body, the chip that shows what is attached above the composer,
   and the quote above the student's own question in the transcript. */

.pt-ta-sel {
    position: absolute;
    /* Above the prose, below the panel (8100), the feedback button (8000) and
       the launcher (7999) — the pill sits in the reading column and those sit
       in the gutter, but a phone in landscape can overlap them. */
    z-index: 7990;
    display: none;
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--cv-accent, #7c3aed);
    color: #fff;
    font: 500 12.5px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    white-space: nowrap;
}
.pt-ta-sel.on { display: block; }
.pt-ta-sel:hover { background: var(--cv-accent-2, #6d28d9); }

/* VISIBILITY IS A CLASS, NOT [hidden]: this row is display:flex, and the
   hidden attribute loses to any rule that sets display — it would read as
   hidden in JS and still take up a row on screen. */
.pt-ta-quote {
    display: none;
    align-items: flex-start;
    gap: 8px;
    margin: 0 14px 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--cv-accent, #7c3aed);
    border-radius: 0 8px 8px 0;
    background: var(--cv-accent-soft, #f3eefe);
}
.pt-ta-quote.on { display: flex; }

.pt-ta-quote-k {
    flex: 0 0 auto;
    color: var(--cv-accent-2, #6d28d9);
    font: 600 11px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pt-ta-quote-t {
    flex: 1 1 auto;
    min-width: 0;                /* or a long passage pushes the ✕ off the row */
    color: var(--cv-ink-2, #6e6e73);
    font: 400 12.5px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.pt-ta-quote-x {
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--cv-ink-3, #6e6e73);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}
.pt-ta-quote-x:hover { color: var(--cv-ink, #1d1d1f); }

/* In the transcript, above the student's own question. */
.pt-ta-qbox {
    max-width: 86%;
    margin: 0 0 4px;
    padding: 6px 10px;
    border-left: 3px solid var(--cv-line, #e8e8ed);
    color: var(--cv-ink-3, #6e6e73);
    font: 400 12px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
/* A `you` line was `display:flex` + `justify-content:flex-end` — one child,
   right-aligned. With a quote there are TWO children, and on a row they would
   sit beside each other. Column right-aligned renders the single-child case
   identically and stacks the pair the way it has to read. */
.pt-ta-line.you { flex-direction: column; align-items: flex-end; }
.pt-ta-line.you .pt-ta-qbox { text-align: left; }