/* ARIA Liquid — the last layer of the student page. An Apple-inspired web take on Liquid Glass:
   glass only where things float (the chat composer, the phone tab bar, menus and sheets), calm
   solid surfaces under everything a student reads. It changes looks, never behaviour.

   Glass needs html.has-glass (set in student.html for phones that can afford it) and
   backdrop-filter support. Without either, or with Reduce Transparency on, the same parts are
   solid, so nothing depends on blur. Loaded after every other sheet, so most rules here only
   need the same weight as the rule they refine. */

:root {
  --lq-radius: 28px;
  --lq-fx: saturate(180%) blur(24px);
  --lq-solid: #ffffff;
  --lq-veil: rgba(255, 255, 255, .86);
  --lq-edge: rgba(0, 0, 0, .09);
  --lq-edge-strong: rgba(0, 0, 0, .18);
  --lq-hi: inset 0 1px 0 rgba(255, 255, 255, .7);
  --lq-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .09);
  --lq-ring: 0 0 0 4px rgba(0, 0, 0, .06);
  --lq-bubble: #f0f0f2;
  --lq-bubble-text: #0a0a0a;
  --lq-code: #f6f6f7;
  --lq-ease: cubic-bezier(.32, .72, 0, 1);
}
html[data-theme="dark"] {
  --lq-solid: #1c1c1e;
  --lq-veil: rgba(30, 30, 32, .80);
  --lq-edge: rgba(255, 255, 255, .10);
  --lq-edge-strong: rgba(255, 255, 255, .22);
  --lq-hi: inset 0 1px 0 rgba(255, 255, 255, .07);
  --lq-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 40px rgba(0, 0, 0, .55);
  --lq-ring: 0 0 0 4px rgba(255, 255, 255, .07);
  --lq-bubble: #2a2a2d;
  --lq-bubble-text: #f5f5f7;
  --lq-code: #111113;
}

/* ── Chat: the composer floats, the conversation scrolls under it ─────────────
   The dock sits over the bottom of the chat; the thread gets bottom room equal to the
   dock's height (--lq-dock, measured in student.html), so the last message is never hidden. */
:root[data-theme] #chat-view .chat-dock {
  position: absolute !important; left: 0; right: 0; bottom: 0;
  padding: 18px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(to top, var(--ag-bg) 0, var(--ag-bg) calc(100% - 22px), transparent) !important;
  pointer-events: none !important;
}
:root[data-theme] #chat-view .chat-dock-inner { pointer-events: auto; }
:root[data-theme] #chat-view .chat-column { padding-bottom: calc(var(--lq-dock, 150px) + 16px) !important; }

:root[data-theme] .chat-dock-inner > div:has(textarea), :root[data-theme] .chat-composer {
  background: var(--lq-solid) !important;
  border: 1px solid var(--lq-edge) !important;
  border-radius: var(--lq-radius) !important;
  box-shadow: var(--lq-shadow) !important;
  padding: 6px 8px 8px !important;
  transition: border-color .2s, box-shadow .2s;
}
:root[data-theme] .chat-dock-inner > div:has(textarea):focus-within, :root[data-theme] .chat-composer:focus-within { border-color: var(--lq-edge-strong) !important; box-shadow: var(--lq-shadow), var(--lq-ring) !important; }
:root[data-theme] .chat-composer textarea { min-height: 44px; max-height: 40vh; padding: 10px 10px 6px !important; font-size: 16px !important; line-height: 1.45 !important; }
:root[data-theme] .chat-controls-row { align-items: center; }
:root[data-theme] .chat-tool-btn { width: 40px !important; height: 40px !important; color: var(--ag-text-2) !important; }
:root[data-theme] .chat-tool-btn:hover { color: var(--ag-text) !important; }
:root[data-theme] .chat-tool-btn:focus-visible, :root[data-theme] .chat-send:focus-visible { outline: 2px solid var(--ag-text) !important; outline-offset: 2px; }

/* Send: quiet until there is something to send, then solid ink. No glow. */
:root[data-theme] .chat-send { width: 40px !important; height: 40px !important; transition: background-color .2s, color .2s, transform .15s var(--lq-ease); }
:root[data-theme] .chat-send[data-state="empty"] { background: var(--ag-fill-strong) !important; color: var(--ag-text-3) !important; }
:root[data-theme] .chat-dock-inner > div:has(textarea:not(:placeholder-shown)) .chat-send,
:root[data-theme] .chat-send:not([data-state="empty"]) { background: var(--ag-text) !important; color: var(--ag-bg) !important; }
:root[data-theme] .chat-send:active { transform: scale(.92); }

:root[data-theme] .chat-disclaimer { margin: 6px 0 0 !important; font-size: 11.5px !important; line-height: 1.3; text-align: center; }

/* ── Chat header: one calm row that always fits ──────────────────────────── */
:root[data-theme] .chat-header { min-height: 60px !important; padding: 8px 12px !important; gap: 8px; }
:root[data-theme] .chat-header > .dash-row:first-child { min-width: 0; flex: 1 1 auto; }
:root[data-theme] .chat-header > .dash-row:last-child { flex: 0 0 auto; }
:root[data-theme] .chat-header .chat-title { min-width: 0; }
:root[data-theme] .chat-header .chat-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .chat-header .dash-icon-btn { border-color: transparent !important; width: 40px !important; height: 40px !important; }
:root[data-theme] .chat-header .dash-icon-btn:hover { background: var(--ag-fill-strong) !important; }

/* ── Messages: readable, uncluttered ─────────────────────────────────────── */
:root[data-theme] .chat-user {
  background: var(--lq-bubble) !important; color: var(--lq-bubble-text) !important;
  border-radius: 22px 22px 8px 22px !important; padding: 10px 16px !important;
  max-width: min(85%, 620px); font-size: 16px !important; line-height: 1.5 !important;
}
:root[data-theme] .chat-user a { color: inherit; }
:root[data-theme] .chat-markdown { font-size: 16px; line-height: 1.68; }
:root[data-theme] .chat-markdown > * + * { margin-top: .75em; }
:root[data-theme] .chat-markdown h1, :root[data-theme] .chat-markdown h2, :root[data-theme] .chat-markdown h3 { line-height: 1.3; letter-spacing: -.01em; margin-top: 1.3em; }
:root[data-theme] .chat-markdown li + li { margin-top: .35em; }
:root[data-theme] .chat-markdown pre {
  background: var(--lq-code) !important; border: 1px solid var(--ag-hairline) !important;
  border-radius: 14px !important; padding: 14px 16px !important; font-size: 13.5px; line-height: 1.55;
}
:root[data-theme] .chat-markdown :not(pre) > code { padding: .12em .38em; border-radius: 6px; background: var(--ag-fill-strong); }
:root[data-theme] .chat-markdown blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--ag-hairline-strong); color: var(--ag-text-2); }
/* Wide tables scroll sideways inside the answer instead of squeezing every word. */
:root[data-theme] .chat-markdown table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:root[data-theme] .chat-markdown th { white-space: nowrap; }
:root[data-theme] .chat-markdown td { min-width: 7.5em; }
:root[data-theme] .chat-actions button { color: var(--ag-text-3) !important; }
:root[data-theme] .chat-actions button:hover { color: var(--ag-text) !important; }

/* ── Home: quieter starters, one accent at a time ─────────────────────────── */
:root[data-theme] .home-start { background: var(--ag-bg) !important; border-color: var(--ag-hairline-strong) !important; }
:root[data-theme] .home-start:hover { background: var(--ag-fill) !important; border-color: var(--ag-text-3) !important; transform: none; }

/* ── Phone tab bar: a solid floating bar everywhere ───────────────────────── */
:root[data-theme] #mobile-bottom-nav { background: var(--lq-solid) !important; border-color: var(--lq-edge) !important; box-shadow: var(--lq-shadow) !important; }

/* ── Glass, where the device can afford it ────────────────────────────────── */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme].has-glass .chat-dock-inner > div:has(textarea),
  :root[data-theme].has-glass .chat-composer,
  :root[data-theme].has-glass #mobile-bottom-nav,
  :root[data-theme].has-glass .chat-attach-menu,
  :root[data-theme].has-glass #modelDropdownMenu {
    background: var(--lq-veil) !important;
    -webkit-backdrop-filter: var(--lq-fx) !important;
    backdrop-filter: var(--lq-fx) !important;
    box-shadow: var(--lq-hi), var(--lq-shadow) !important;
  }
  :root[data-theme].has-glass .chat-dock-inner > div:has(textarea):focus-within, :root[data-theme].has-glass .chat-composer:focus-within { box-shadow: var(--lq-hi), var(--lq-shadow), var(--lq-ring) !important; }
  /* Under glass the fade can be lighter: the blur already separates the composer. */
  :root[data-theme].has-glass #chat-view .chat-dock { background: linear-gradient(to top, var(--ag-bg) 0, var(--ag-bg) 30px, color-mix(in srgb, var(--ag-bg) 55%, transparent) 60%, transparent) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme] .chat-dock-inner > div:has(textarea), :root[data-theme] .chat-composer, :root[data-theme] #mobile-bottom-nav, :root[data-theme] .chat-attach-menu, :root[data-theme] #modelDropdownMenu {
    background: var(--lq-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .chat-composer, :root[data-theme] .chat-send { transition: none !important; }
  :root[data-theme] .chat-send:active { transform: none; }
}

/* ── Narrow phones ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root[data-theme] .chat-header { padding: 6px 8px !important; gap: 4px; }
  :root[data-theme] .chat-header .dash-icon-btn { width: 36px !important; height: 36px !important; }
  :root[data-theme] .chat-header > .dash-row { gap: 2px !important; }
  :root[data-theme] .chat-header .chat-title strong { font-size: 24px !important; line-height: 1.1; }
  :root[data-theme] .chat-header .chat-title span { font-size: 11px !important; }
  :root[data-theme] .chat-header .mono-seg button { min-width: 32px; padding: 0 8px !important; }
  :root[data-theme] #chat-view .chat-dock { padding: 14px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important; }
  :root[data-theme] .chat-composer { border-radius: 26px !important; }
  :root[data-theme] .chat-controls-left { gap: 0 !important; min-width: 0; }
  :root[data-theme] .chat-markdown { font-size: 16px; line-height: 1.62; }
}

/* The tab bar sits over busy cards: a denser veil keeps its labels clean. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme].has-glass #mobile-bottom-nav { background: color-mix(in srgb, var(--lq-solid) 92%, transparent) !important; }
}