/* ============================================================
   assistant-panel.css — THE assistant panel.

   One component, one definition. Every surface where an AI assistant talks to
   the coach in a docked column uses these classes: Launch Studio's copy
   review, Content Review, Ads onboarding, and the course Builder.

   ── Why this file exists ──────────────────────────────────────────────
   It did not, and the cost was visible in the stylesheets. The panel had been
   copy-pasted THREE times — launch-studio.css (`#page-launch-review-copy`),
   content-review.css (`#route-content .cr`) and ads-onboarding.css
   (`#page-ads-onboarding`). Measured before extracting: 76 selectors were
   byte-identical between the first two, and 18 of 21 between the first and
   third. The three that differed were not the component at all; they were
   PLACEMENT — `position: sticky`, a fixed column height, `flex: 1` — which is
   properly the page's business and stays with the page.

   Alex, 2026-08-01, on the course Builder: "you shouldn't be trying to match
   it. You should be using the exact styling CSS." A fourth copy would have
   matched it. This is using it.

   ── What belongs here, and what does not ──────────────────────────────
   HERE: the assistant's own chrome — the head with its avatar and role line,
   the context chip, the thread and its bubbles, the quick chips, the composer
   with its send and mic buttons, the accept button.

   NOT HERE: where the panel sits, how tall it is, and what it sits beside.
   A page that wants a sticky full-height column says so itself, in one or two
   declarations under its own id, which outrank these by specificity.

   ALSO NOT HERE (yet): the review CANVAS, the finish bar and the preview
   overlay. They are duplicated between launch-studio.css and
   content-review.css to the same degree and deserve the same treatment, but
   they are a review-surface component rather than an assistant one, and
   folding two unrelated things into one file because they were copied
   together would just be a different mess.

   ── Colours ──────────────────────────────────────────────────────────
   The gradients are the platform's own tokens (--salmon / --rose / --plum /
   --accent, app-shell.css). CODING-STANDARDS allows no raw hex, and the one
   value with no token of its own is declared once, below, rather than
   sprinkled through the rules.

   Loaded by app.html before every page stylesheet that uses it.
   ============================================================ */

:root {
  /* The lighter violet of the "you" avatar. No token exists for it in
     app-shell.css (it appears raw there too, in .av-2 and the profile chip);
     named here so this file has exactly one place a colour is written. */
  --ap-user-violet: #b07aff;
}

/* ── The panel ──────────────────────────────────────────────────────── */
/* Placement (sticky / height / width) is the PAGE's job — see the note above. */
.rc-maya { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }

/* ── Head: avatar, name, what it is doing, and what it is looking at ── */
.rc-maya-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--accent-softer, var(--accent-soft)), var(--surface)); }
.rc-maya-av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--salmon), var(--rose) 55%, var(--plum)); color: var(--on-accent, #fff); display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.rc-maya-head .rc-mh { flex: 1; min-width: 0; }
.rc-maya-head .rc-mh .n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.rc-maya-head .rc-mh .r { font-size: 12px; color: var(--text-3); margin-top: 1px; }

/* The context chip — WHAT the assistant is currently pointed at. The single
   most important thing on the panel: an assistant that rewrites the wrong
   section, or drafts the wrong lesson, is worse than no assistant. */
.rc-nowsec { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }

/* ── The thread ─────────────────────────────────────────────────────── */
/* No `flex: 1; overflow-y: auto` here, and the omission is deliberate. Those
   two make the thread the scrolling part of a FIXED-HEIGHT column, which is
   placement — and `overflow-y: auto` opens a block formatting context, so
   adding it to a panel that sizes to its content makes that panel 22px taller.
   Measured, not guessed: it is what tests/browser/assistant-panel-css caught
   on ads-onboarding, whose panel is not docked. A docked surface asks for the
   scroll itself, in one line, next to the height it is scrolling inside. */
.rc-thread { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.rc-mmsg { display: flex; gap: 10px; max-width: 100%; }
.rc-mmsg .rc-ava { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--on-accent, #fff); font-size: 11px; font-weight: 700; font-family: "Bricolage Grotesque", sans-serif; }
.rc-mmsg.coach .rc-ava { background: linear-gradient(135deg, var(--salmon), var(--rose) 55%, var(--plum)); }
.rc-mmsg.user { flex-direction: row-reverse; }
.rc-mmsg.user .rc-ava { background: linear-gradient(135deg, var(--ap-user-violet), var(--accent)); }
.rc-mbub { padding: 11px 14px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; background: var(--surface-2); color: var(--text); }
.rc-mmsg.coach .rc-mbub { border-bottom-left-radius: 4px; }
.rc-mmsg.user .rc-mbub { background: var(--accent); color: var(--on-accent, #fff); border-bottom-right-radius: 4px; }
.rc-mbub b { font-weight: 600; }

/* ── Quick chips — the things worth asking for, offered rather than typed ─ */
.rc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; }
.rc-mchip { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rc-mchip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

/* ── Composer ───────────────────────────────────────────────────────── */
.rc-foot { border-top: 1px solid var(--border-soft); padding: 12px 16px; background: var(--surface-2); }
.rc-composer { background: var(--surface); border: 1.5px solid var(--border); border-radius: 13px; padding: 9px 11px; display: flex; align-items: flex-end; gap: 8px; transition: border-color .15s, box-shadow .15s; }
.rc-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rc-composer textarea { flex: 1; border: none; outline: none; background: transparent; resize: none; font-family: inherit; font-size: 13.5px; line-height: 1.45; color: var(--text); min-height: 22px; max-height: 80px; }
.rc-composer textarea::placeholder { color: var(--text-4); }
.rc-send { background: var(--accent); color: var(--on-accent, #fff); border: none; border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.rc-send:hover { background: var(--accent-deep); }
.rc-send svg { width: 15px; height: 15px; }
.rc-voice { background: linear-gradient(135deg, var(--salmon), var(--rose)); color: var(--on-accent, #fff); border: none; border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.rc-voice:hover { filter: brightness(1.06); }
.rc-voice.recording { animation: rc-micpulse 1.2s ease-in-out infinite; }
@keyframes rc-micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,90,138,0.45); } 50% { box-shadow: 0 0 0 6px rgba(232,90,138,0); } }
.rc-voice svg { width: 15px; height: 15px; }
.rc-hint { font-size: 11px; color: var(--text-4); margin: 0 2px 7px; display: flex; align-items: center; gap: 6px; }
.rc-hint svg { width: 12px; height: 12px; color: var(--salmon); }

/* ── Accept ─────────────────────────────────────────────────────────── */
/* No margin-top here: two of the three surfaces that use this button want a
   gap above it and one does not, which makes the gap layout, not component. */
.rc-approve { width: 100%; background: var(--good); color: var(--on-accent, #fff); border: none; border-radius: 11px; padding: 11px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
/* THE reason this button once approved sections the coach could not see. The
   rule above is a class selector, so the UA's `[hidden] { display: none }` ties
   on specificity and loses on source order — the code set `hidden = true` and
   the button stayed on screen, and clickable. It belongs in the component
   rather than on one page: every surface that hides this button has the same
   problem, and only one of them had found it. */
.rc-approve[hidden] { display: none; }
.rc-approve:hover { filter: brightness(1.05); }
.rc-approve svg { width: 15px; height: 15px; }
.rc-approve.is-approved { background: var(--surface); color: var(--good); border: 1px solid var(--good-border, #c4e6d3); }