/* Liquid glass — the chat composer only (Oct 2026; always on): Nori chat's
 * `#chat-form`, and Nori Connect's patient chat `#cx-chat-form` (one capsule
 * over its own log, the same single small region).
 *
 * One frosted capsule: the message box floats over the chat thread and the
 * thread scrolls underneath it. Nothing else on any page is glass any more.
 *
 * This used to frost the header, the sidebars, menus, dialogs, tab strips and
 * every admin card over an ambient gradient backdrop, and scrolling the thread
 * on desktop Chrome was sluggish. Two costs, both gone now:
 *  - every backdrop-filter is re-run each frame anything behind it moves, and
 *    the header plus the composer band were two of them over the thread;
 *  - the thread itself had to be transparent for the backdrop to show, and
 *    Chrome on a 1x display will not composite a transparent scroller (LCD
 *    text needs an opaque background), so every scroll frame repainted it on
 *    the main thread.
 * So: the thread keeps its opaque card background, and the one blur is the
 * composer's — a single small region.
 *
 * Every rule is scoped under `html.theme-glass`, which static/js/theme.js sets
 * before first paint on every page. It was a per-device opt-out until Oct
 * 2026; the toggle is gone and the class is now unconditional.
 *
 * Loaded after workspace.css in both shells, so it wins at equal specificity.
 * Served immutable: bump ?v= in base.html AND base_page.html on any change. */

html.theme-glass {
  --glass-tint: rgb(var(--c-card) / .62);
  --glass-edge: rgb(255 255 255 / .7);
  --glass-spec: rgb(255 255 255 / .85);
  --glass-shadow: 0 10px 30px rgb(18 40 34 / .12), 0 2px 6px rgb(18 40 34 / .06);
  --glass-blur: blur(14px) saturate(160%);
}
html.theme-glass.theme-dark {
  --glass-tint: rgb(var(--c-card) / .58);
  --glass-edge: rgb(255 255 255 / .12);
  --glass-spec: rgb(255 255 255 / .14);
  --glass-shadow: 0 12px 32px rgb(0 0 0 / .42), 0 2px 6px rgb(0 0 0 / .25);
}
@media (max-width: 767px) {
  html.theme-glass { --glass-blur: blur(10px); }
}
/* Asked the OS for less transparency, or no backdrop-filter at all: nearly
   opaque, so text behind the capsule never reads through it. */
@media (prefers-reduced-transparency: reduce) {
  html.theme-glass { --glass-tint: rgb(var(--c-card) / .95); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.theme-glass { --glass-tint: rgb(var(--c-card) / .95); }
}

/* ── The capsule (welcome screen and thread alike) ────────────────────── */
html.theme-glass #chat-form,
html.theme-glass #cx-chat-form {
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-spec), var(--glass-shadow);
}
html.theme-glass #chat-form:focus-within,
html.theme-glass #cx-chat-form:focus-within {
  border-color: rgb(var(--c-teal-400) / .8);
  box-shadow: inset 0 1px 0 var(--glass-spec), 0 0 0 3px rgb(var(--c-teal-100) / .55), var(--glass-shadow);
}

/* ── The thread scrolls under the composer band ───────────────────────────
   The band stays in the flex flow; the scroller is pulled down under it with a
   negative margin and given the same back as padding. static/js/glass.js
   measures the band and writes --glass-bottom; the fallback covers the frame
   before it runs. The band itself paints nothing — no fade, no bar — and lets
   clicks through everywhere but its controls. */
html.theme-glass #chat-messages {
  margin-bottom: calc(-1 * var(--glass-bottom, 150px));
  padding-bottom: var(--glass-bottom, 150px);
  scroll-padding-bottom: var(--glass-bottom, 150px);
}
html.theme-glass #chat-messages + div {
  position: relative; z-index: 20;
  background: none;
  pointer-events: none;
}
html.theme-glass #chat-messages + div > * > * { pointer-events: auto; }

/* The line under the capsule floats over text too. It gets a page-coloured
   halo rather than a backing box: legible, and no extra block and no extra
   blur. The mode toggle above it is already an opaque pill. */
html.theme-glass #chat-messages + div #chat-form + p {
  text-shadow: 0 0 4px rgb(var(--c-card)), 0 0 8px rgb(var(--c-card)), 0 0 12px rgb(var(--c-card));
}

/* Phone new-chat screen: drop the page-colour fade so the greeting scrolls
   under the glass composer. */
@media (max-width: 767px) {
  html.theme-glass #welcome-form-wrap { background: none; }
}