/* =====================================================================
   chatclean.css - the chat and its composer, drawn the way Claude.ai
   draws them.

   clean.css took the furniture out; this sheet sets what is left. The
   reference is a plain page: the answer is set in a book serif with no
   bubble, your message is a small neutral grey bubble on the right, and
   the composer is one quiet rounded box - the text on top, a row of
   controls underneath, a "+" on the left and the send button only lit
   once there is something to send.

   What this sheet does:
     - one column: the reply, your bubble and the composer share one width
       and one left edge (the reply used to stop at 72ch while the bubble
       and the composer ran to 768px)
     - the reply's prose is Source Serif 4 (already self-hosted in
       vendor/fonts); widgets inside the reply keep their own sans
     - the user bubble is a neutral grey that still reads on the dark page
     - no fog over the bottom of the thread
     - follow-up chips and the copy / explain / share icons in muted ink,
       and no empty 40px row under every older reply
     - the composer: hairline border, a soft shadow, no green ring, no lift,
       no ledge, no glow; the model name as small muted text
     - the class name and the chat title in the top bar at plain weights

   Composes redesign.css tokens, mints none and sets no corner - shape is
   rounded.css's (section 9 there holds this sheet's corners). The only
   custom properties are --cc-* scoped to the chat view and the class
   page's composer.
   Selectors carry body:not(#_) - one ID's worth of weight - because the
   rules they answer are in clean.css (1,3,1), pop.css (0,5,1) and
   styles.css with !important.
   ===================================================================== */

/* ── The chat view's own palette ──────────────────────────────────────── */
/* Neutral greys, not the brand's green-tinted surfaces. The dark bubble is
   a step above the page (#070A08) so it is actually visible there. */
body:not(#_) :is(.view-chat, .project-composer) {
  --cc-col: 768px;
  --cc-bubble: #ECEDEA;
  --cc-quiet: color-mix(in srgb, var(--text) 8%, transparent);
  --cc-hover: color-mix(in srgb, var(--text) 6%, transparent);
  --cc-line: color-mix(in srgb, var(--text) 14%, transparent);
  --cc-line-focus: color-mix(in srgb, var(--text) 26%, transparent);
  --cc-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
body[data-theme="dark"]:not(#_) :is(.view-chat, .project-composer) {
  --cc-bubble: #1E2120;
  --cc-quiet: color-mix(in srgb, var(--text) 10%, transparent);
  --cc-hover: color-mix(in srgb, var(--text) 8%, transparent);
  --cc-line: color-mix(in srgb, var(--text) 13%, transparent);
  --cc-line-focus: color-mix(in srgb, var(--text) 24%, transparent);
}

/* ── The thread ───────────────────────────────────────────────────────── */
/* Keep the soft dissolve under the top bar; drop the 40px fog at the
   bottom, which cut through whatever sat just above the composer. */
body:not(#_) .view-chat .chat {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px) !important;
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px) !important;
}

/* One column. The reply's 72ch cap made its right edge 94px short of the
   bubble and the composer above and below it. */
body:not(#_) .view-chat .msg {
  max-width: var(--cc-col) !important;
}
body:not(#_) .view-chat .msg.assistant .msg-body {
  max-width: none !important;
}

/* A reply sits just under the question it answers; the next question
   keeps the full gap above it. */
body:not(#_) .view-chat .msg.user + .msg.assistant {
  margin-top: 0 !important;
}

/* ── The reply: a book serif on the page ──────────────────────────────── */
/* Only the prose children take the serif - a figure, a practice set or any
   other widget inside the reply keeps the interface's sans. */
body:not(#_) .view-chat .msg.assistant .msg-content > :is(p, ul, ol, h1, h2, h3, h4, blockquote, table) {
  font-family: var(--cc-serif);
  font-size: 16.5px;
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: 0;
}
body:not(#_) .view-chat .msg.assistant .msg-content > p {
  margin: 0 0 0.9em;
}
body:not(#_) .view-chat .msg.assistant .msg-content > :is(ul, ol) {
  margin: 0 0 0.9em;
}
body:not(#_) .view-chat .msg.assistant .msg-content > :is(h1, h2, h3, h4):first-child {
  margin-top: 0;
}
body:not(#_) .view-chat .msg.assistant .msg-content > :is(p, ul, ol):last-child {
  margin-bottom: 0;
}
body:not(#_) .view-chat .msg.assistant .msg-content > :is(ul, ol) > li {
  margin-bottom: 0.3em;
  letter-spacing: 0;
}
body:not(#_) .view-chat .msg.assistant .msg-content > :is(ul, ol) > li::marker {
  color: var(--text-tertiary);
}
body:not(#_) .view-chat .msg.assistant .msg-content > :is(h1, h2, h3, h4) {
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 1.1em 0 0.45em;
}
body:not(#_) .view-chat .msg.assistant .msg-content > h1 { font-size: 1.5em; }
body:not(#_) .view-chat .msg.assistant .msg-content > h2 { font-size: 1.3em; }
body:not(#_) .view-chat .msg.assistant .msg-content > h3 { font-size: 1.12em; }
body:not(#_) .view-chat .msg.assistant .msg-content > h4 { font-size: 1em; }
body:not(#_) .view-chat .msg.assistant .msg-content > :is(p, ul, ol, blockquote, table, h1, h2, h3, h4) :is(strong, b, th) {
  font-weight: 600;
}
body:not(#_) .view-chat .msg.assistant .msg-content > table {
  font-size: 15px;
  line-height: 1.5;
}
/* KaTeX's Computer Modern next to a serif needs no boost: the app's 1.06em
   was sized to sit beside Geist. */
body:not(#_) .view-chat .msg.assistant .msg-content > :is(p, ul, ol, blockquote) .katex {
  font-size: 1.04em;
}

/* ── Your message: a small neutral bubble on the right ────────────────── */
body:not(#_) .view-chat .msg.user .msg-body {
  background: var(--cc-bubble) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
}
body:not(#_) .view-chat .msg.user .msg-content {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
}

/* ── Under a reply: quiet follow-ups and tools ────────────────────────── */
body:not(#_) .view-chat .msg-actions .msg-suggest-btn {
  color: var(--text-secondary) !important;
  border: 1px solid var(--cc-line) !important;
  background: transparent !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  padding: 0 11px !important;
  height: 28px !important;
}
body:not(#_) .view-chat .msg-actions .msg-suggest-btn:hover {
  color: var(--text) !important;
  background: var(--cc-hover) !important;
  border-color: var(--cc-line-focus) !important;
}
body:not(#_) .view-chat .msg-actions .msg-tool-btn {
  color: var(--text-tertiary) !important;
  height: 28px !important;
  width: 28px !important;
}
body:not(#_) .view-chat .msg-actions .msg-tool-btn:hover {
  color: var(--text) !important;
  background: var(--cc-hover) !important;
}
/* The copy icon carried a legacy margin-top: 9px and opacity .72 from the
   old labelled Copy button, so it sat 4.5px below the other two. */
body:not(#_) .view-chat .msg-actions .msg-copy-btn {
  margin-top: 0 !important;
  opacity: 1 !important;
}

/* An older reply hides its follow-ups and fades its tools until hovered,
   but the empty 30px row and its 10px margin stayed - about 40px of blank
   page under every reply. The row now takes no space; the tools hang in the
   gap below the reply, which is still inside the message, so hovering the
   reply (or the tools) shows them as before. styles.css gives every message
   paint containment, which would clip them there, so an older reply keeps
   layout and style containment only. */
body:not(#_) .view-chat .msg.assistant:has(~ .msg) {
  contain: layout style !important;
}
/* A step-through walkthrough draws focus rings outside its own edges (Back
   sits on the reply's left edge, the widget spans the full column), so the
   newest reply holding one drops paint containment too - otherwise the ring
   is cut down to its top and bottom lines until another message arrives. */
body:not(#_) .view-chat .msg.assistant:has(.wt-steps) {
  contain: layout style !important;
}
body:not(#_) .view-chat .msg.assistant:has(~ .msg) .msg-actions {
  min-height: 0 !important;
  height: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

/* ── The composer: one quiet box ──────────────────────────────────────── */
/* Text on top across the full width, controls in a row underneath. */
body:not(#_) .view-chat .composer-inner {
  max-width: var(--cc-col) !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 4px !important;
  min-height: 0 !important;
  padding: 12px 10px 8px 12px !important;
  background: var(--surface-strong) !important;
  border: 1px solid var(--cc-line) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 6px 24px -8px rgb(0 0 0 / 0.08) !important;
  transform: none !important;
  transition: border-color var(--d-fast, 140ms) var(--ease-out, ease) !important;
}
body[data-theme="dark"]:not(#_) .view-chat .composer-inner {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3) !important;
}
/* Focus is a slightly firmer edge. No ring, no lift, no green. */
body:not(#_) .view-chat .composer-inner:focus-within {
  border-color: var(--cc-line-focus) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 6px 24px -8px rgb(0 0 0 / 0.08) !important;
  transform: none !important;
}
body[data-theme="dark"]:not(#_) .view-chat .composer-inner:focus-within {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3) !important;
}
body:not(#_) .view-chat .composer #input {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-height: 28px;
  padding: 4px 6px 8px !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
}
body:not(#_) .view-chat .composer #input::placeholder {
  font-size: 15.5px;
  color: var(--text-tertiary);
}
body:not(#_) .view-chat .composer-actions {
  flex: 1 1 100% !important;
  display: flex !important;
  align-items: center !important;
  align-self: auto !important;
  gap: 2px !important;
  padding: 0 !important;
}
/* "+" on the left, everything else on the right. */
body:not(#_) .view-chat .composer #attach-btn {
  margin-right: auto !important;
}
/* One size in every state: the mic grew back to 38px while dictating and the
   whole composer rose 6px. Only the quiet ink waits for the idle state. */
body:not(#_) .view-chat .composer-actions > .icon-btn {
  width: 32px !important;
  height: 32px !important;
}
body:not(#_) .view-chat .composer-actions > .icon-btn:not(.listening):not(.active) {
  color: var(--text-tertiary) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(#_) .view-chat .composer-actions > .icon-btn:not(.listening):not(.active):hover {
  color: var(--text) !important;
  background: var(--cc-hover) !important;
}

/* The model as small muted words, not a bordered mono pill. Keyed on the id:
   app.js rewrites this button's className on every model change. The .m-*
   rule in styles.css paints the name through -webkit-text-fill-color, so
   that is reset as well as color. */
body:not(#_) .view-chat #composer-model {
  height: 30px !important;
  padding: 0 8px !important;
  gap: 4px !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  -webkit-text-fill-color: currentColor !important;
}
body:not(#_) .view-chat #composer-model:hover,
body:not(#_) .view-chat #composer-model[aria-expanded="true"] {
  color: var(--text) !important;
  background: var(--cc-hover) !important;
}
body:not(#_) .view-chat #composer-model .model-short {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
body:not(#_) .view-chat #composer-model .model-dot {
  display: none !important;
}

/* Send: a small circle, muted until there is something to send, then the
   accent. No ledge, no glow, no scale. A pending attachment is something to
   send - send() takes an attachment with no text - so the muted look waits
   for an empty box AND an empty attachment strip. */
body:not(#_) .view-chat .composer #send-btn {
  width: 32px !important;
  height: 32px !important;
  margin-left: 2px;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  font-weight: 400 !important;
  transition: background-color var(--d-fast, 140ms) var(--ease-out, ease),
              color var(--d-fast, 140ms) var(--ease-out, ease) !important;
}
body:not(#_) .view-chat .composer #send-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, var(--text)) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
body:not(#_) .view-chat .composer:not(:has(.composer-attachments > *)) .composer-inner:has(#input:placeholder-shown) #send-btn:not(.stoppable):not(.loading) {
  background: var(--cc-quiet) !important;
  color: var(--text-tertiary) !important;
}
body:not(#_) .view-chat .composer #send-btn svg {
  width: 15px;
  height: 15px;
}

/* ── Top bar: the class and the chat title at plain weights ───────────── */
/* The class name was bold text filled with the brand gradient. */
body:not(#_) .view-chat #active-project-display,
body:not(#_) .view-chat #active-project-display * {
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 500 !important;
}
body:not(#_) .view-chat #chat-title-text {
  font-weight: 500 !important;
}

/* ── The class page's composer: the same quiet controls ───────────────── */
/* Its box keeps its own shape; what changes is what sits in it - no box
   drawn inside the box around the text, no green ring on focus, the model
   as words, and the same send button as the chat. */
body:not(#_) .project-composer:focus-within {
  border-color: var(--cc-line-focus) !important;
  box-shadow: none !important;
}
body:not(#_) .project-composer #project-input,
body:not(#_) .project-composer #project-input:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body:not(#_) .project-composer-actions > .icon-btn:not(.listening):not(.active) {
  color: var(--text-tertiary) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(#_) .project-composer-actions > .icon-btn:not(.listening):not(.active):hover {
  color: var(--text) !important;
  background: var(--cc-hover) !important;
}
body:not(#_) .project-composer #project-model {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  -webkit-text-fill-color: currentColor !important;
}
body:not(#_) .project-composer #project-model:hover {
  color: var(--text) !important;
  background: var(--cc-hover) !important;
}
body:not(#_) .project-composer #project-model .model-short {
  font-family: inherit !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
body:not(#_) .project-composer #project-model .model-dot {
  display: none !important;
}
body:not(#_) .project-composer #project-send-btn {
  width: 32px !important;
  height: 32px !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  font-weight: 400 !important;
}
body:not(#_) .project-composer #project-send-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, var(--text)) !important;
  box-shadow: none !important;
  transform: none !important;
}
body:not(#_) .project-composer:has(#project-input:placeholder-shown):not(:has(.composer-attachments > *)) #project-send-btn {
  background: var(--cc-quiet) !important;
  color: var(--text-tertiary) !important;
}

/* ── The assessment lock, answered in the thread ──────────────────────── */
/* A Test Prep section still open turns the tutor off (server-enforced).
   That is a state, not a failure, so it is drawn like the family-rule note
   rather than the red error card, with the way back to the section in it. */
body:not(#_) .view-chat .assess-chat-note {
  width: 100%;
  max-width: var(--cc-col);
  margin: 12px auto 0;
  box-sizing: border-box;
}
body:not(#_) .view-chat .assess-chat-note .message-content {
  background: var(--accent-soft);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  padding: 12px 14px;
  color: var(--text);
}