/* WhiteMirror design tokens — the single source of visual truth for the v2
   frontend. Light, glass, air: white/gray surfaces, thin translucent panels,
   generous whitespace, ONE red accent (the brand dD red). No raw hex values
   belong in component modules — only these custom properties. */

:root {
  /* surfaces */
  --wm-bg: #f5f6f7;
  --wm-bg-raised: #ffffff;
  --wm-glass: rgba(255, 255, 255, 0.62);
  --wm-glass-strong: rgba(255, 255, 255, 0.82);
  --wm-glass-blur: 16px;
  --wm-hairline: rgba(22, 25, 28, 0.09);
  --wm-hairline-strong: rgba(22, 25, 28, 0.16);

  /* ink */
  --wm-ink: #16191c;
  --wm-ink-soft: #5b636b;
  --wm-ink-faint: #8b939b;

  /* THE red (brand dD) — the only accent. Sampled from the logo deck's
     "dD" and its footer rule (#e42b1c); white on it is 4.5:1, the AA floor. */
  --wm-red: #e42b1c;
  --wm-red-hover: #c4241a;
  --wm-red-tint: rgba(228, 43, 28, 0.08);
  --wm-red-tint-strong: rgba(228, 43, 28, 0.16);
  --wm-on-red: #ffffff;

  /* semantic status (calm, non-competing) */
  --wm-ok: #2e7d4f;
  --wm-ok-tint: rgba(46, 125, 79, 0.1);
  --wm-warn: #9a6b1a;
  --wm-warn-tint: rgba(154, 107, 26, 0.1);
  --wm-danger: var(--wm-red);
  --wm-danger-tint: var(--wm-red-tint);
  --wm-info: var(--wm-ink-soft);

  /* radii */
  --wm-r-sm: 8px;
  --wm-r-md: 12px;
  --wm-r-lg: 18px;
  --wm-r-xl: 26px;
  --wm-r-pill: 999px;

  /* shadows: air, not weight */
  --wm-shadow-1: 0 1px 2px rgba(20, 23, 26, 0.05);
  --wm-shadow-2: 0 1px 2px rgba(20, 23, 26, 0.04), 0 10px 30px rgba(20, 23, 26, 0.07);
  --wm-shadow-drawer: 0 12px 48px rgba(20, 23, 26, 0.14);

  /* spacing, 4-base */
  --wm-s1: 4px;
  --wm-s2: 8px;
  --wm-s3: 12px;
  --wm-s4: 16px;
  --wm-s5: 24px;
  --wm-s6: 32px;
  --wm-s7: 48px;
  --wm-s8: 64px;

  /* type */
  --wm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wm-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* the wordmark: a light humanist sans, as set in the logo deck */
  --wm-font-brand: "Segoe UI", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --wm-brand-weight: 300;
  --wm-fs-xs: 12px;
  --wm-fs-sm: 13.5px;
  --wm-fs-md: 15px;
  --wm-fs-lg: 17px;
  --wm-fs-xl: 22px;
  --wm-fs-d1: 28px;
  --wm-fs-d2: 36px;
  --wm-lh-body: 1.55;
  --wm-lh-display: 1.18;
  --wm-track-display: -0.015em;

  /* motion */
  --wm-ease: cubic-bezier(0.22, 0.7, 0.3, 1);
  --wm-t-fast: 120ms;
  --wm-t-med: 200ms;
  --wm-t-slow: 320ms;

  /* focus: one double red ring for the whole product */
  --wm-focus-ring: 0 0 0 2px var(--wm-bg), 0 0 0 4px var(--wm-red);

  /* safe areas */
  --wm-safe-top: env(safe-area-inset-top);
  --wm-safe-bottom: env(safe-area-inset-bottom);
}

body:has(.wm) {
  background: var(--wm-bg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wm-t-fast: 0ms;
    --wm-t-med: 0ms;
    --wm-t-slow: 0ms;
  }

  .wm *,
  .wm *::before,
  .wm *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Adapted from the existing WhiteMirror auth, wordmark, transcript and composer. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { color: var(--wm-ink); background: var(--wm-bg); font: var(--wm-fs-md)/var(--wm-lh-body) var(--wm-font); }
button, input, textarea, select { font: inherit; color: inherit; }
button, .button { cursor: pointer; border: 1px solid var(--wm-hairline-strong); background: var(--wm-bg-raised); border-radius: var(--wm-r-md); padding: 9px 14px; text-decoration: none; color: var(--wm-ink); }
button:hover:not(:disabled), .button:hover { border-color: var(--wm-red); }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: none; box-shadow: var(--wm-focus-ring); }
a { color: inherit; }
.primary { display: inline-flex; justify-content: center; align-items: center; background: var(--wm-red); color: var(--wm-on-red); border: 1px solid transparent; padding: 10px 18px; font-weight: 600; text-decoration: none; border-radius: var(--wm-r-md); }
.primary:hover:not(:disabled) { background: var(--wm-red-hover); }
.pill { border-radius: var(--wm-r-pill); }
.quiet { border-color: transparent; background: transparent; }
.muted { color: var(--wm-ink-soft); }
.error { color: var(--wm-danger); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: var(--wm-fs-xl); font-weight: 600; letter-spacing: var(--wm-track-display); }
h2 { font-size: var(--wm-fs-lg); }
input, select { width: 100%; padding: 10px 14px; border: 1px solid var(--wm-hairline-strong); border-radius: var(--wm-r-md); background: var(--wm-bg-raised); }
label { font-size: var(--wm-fs-sm); }
.wordmark { display: inline-block; font-family: var(--wm-font-brand); font-weight: var(--wm-brand-weight); letter-spacing: -.01em; line-height: 1; color: var(--wm-ink); white-space: nowrap; text-decoration: none; user-select: none; font-size: 26px; }
.dd { color: var(--wm-red); }
.tm { font-size: .36em; font-weight: 400; vertical-align: top; position: relative; top: .05em; margin-left: .08em; }
.kicker { font-size: var(--wm-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-ink-faint); }
.login-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--wm-bg-raised); padding: calc(32px + env(safe-area-inset-top)) clamp(16px, 6vw, 64px) calc(24px + env(safe-area-inset-bottom)); }
.login-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 48px 0; }
.login-wordmark { font-size: clamp(2.75rem, 8vw, 4.5rem); }
.login-hero > p { max-width: 30rem; margin: 0; }
.login-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--wm-red); font-size: var(--wm-fs-sm); }
.login-footer .wordmark { font-size: 22px; }
.access-form { width: min(100%, 340px); display: grid; gap: 12px; text-align: left; margin-top: 24px; }
.access-form h1, .access-form p { margin: 0; }
.app { height: var(--viewport-height, 100dvh); display: flex; flex-direction: column; overflow: hidden; }
.app-header { display: flex; align-items: center; gap: 20px; padding: calc(16px + env(safe-area-inset-top)) 24px 16px; border-bottom: 1px solid var(--wm-hairline); background: var(--wm-glass-strong); }
.header-label { color: var(--wm-ink-faint); border-left: 1px solid var(--wm-hairline-strong); padding-left: 20px; }
.account { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: var(--wm-fs-sm); }
#account-name { max-width: 220px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.workspace { display: grid; grid-template-columns: 274px minmax(0, 1fr); flex: 1; min-height: 0; }
.sidebar { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; border-right: 1px solid var(--wm-hairline); min-height: 0; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; }
.sidebar h2 { font-size: var(--wm-fs-md); margin: 0; }
.interview-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.interview-item { text-align: left; padding: 12px; border-color: transparent; background: transparent; }
.interview-item[aria-current="true"] { background: var(--wm-bg-raised); border-color: var(--wm-hairline-strong); box-shadow: var(--wm-shadow-1); }
.interview-item span { display: block; }
.interview-item .muted { font-size: var(--wm-fs-xs); margin-top: 4px; }
.sidebar-note { font-size: var(--wm-fs-xs); color: var(--wm-ink-faint); margin: 8px 0 0; }
.chat { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 32px 12px; }
.chat-toolbar h1 { margin: 0; }
.chat-toolbar p { margin: 3px 0 0; font-size: var(--wm-fs-sm); }
.chat-toolbar .button { white-space: nowrap; font-size: var(--wm-fs-sm); }
.conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px max(24px, calc((100% - 820px)/2)); }
.empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 0; color: var(--wm-ink-soft); }
.empty h2 { font-size: 28px; font-weight: 500; letter-spacing: -.015em; color: var(--wm-ink); margin: 20px 0 10px; }
.monogram { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--wm-r-md); border: 1px solid var(--wm-hairline-strong); background: var(--wm-bg-raised); color: var(--wm-red); font-family: var(--wm-font-brand); font-weight: var(--wm-brand-weight); font-size: 15px; letter-spacing: -.02em; line-height: 1; }
.monogram.large { width: 58px; height: 58px; font-size: 28px; border-radius: 18px; }
.transcript { display: flex; flex-direction: column; gap: 24px; padding-bottom: 16px; }
.turn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; max-width: 44rem; }
.turn .monogram { margin-top: 23px; }
.turn.user { grid-template-columns: minmax(0, 1fr); align-self: flex-end; max-width: min(36rem, 90%); }
.bubble-wrap { display: grid; gap: 6px; min-width: 0; }
.speaker { font-size: var(--wm-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wm-ink-faint); font-weight: 700; }
.user .speaker { text-align: right; }
.bubble { margin: 0; padding: 12px 16px; font-size: var(--wm-fs-md); line-height: var(--wm-lh-body); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--wm-glass-strong); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border: 1px solid var(--wm-hairline); border-radius: 8px 18px 18px; box-shadow: var(--wm-shadow-1); }
.user .bubble { background: var(--wm-ink); color: var(--wm-bg-raised); border-color: transparent; border-radius: 18px 8px 18px 18px; }
.turn.partial .bubble { border-style: dashed; }
.interrupted { font-size: var(--wm-fs-xs); color: var(--wm-ink-soft); }
.composer-area { padding: 12px max(24px, calc((100% - 820px)/2)) calc(16px + env(safe-area-inset-bottom)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chips button { padding: 7px 14px; border-radius: var(--wm-r-pill); font-size: var(--wm-fs-sm); }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: end; gap: 8px; padding: 8px; background: var(--wm-glass-strong); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border: 1px solid var(--wm-hairline); border-radius: 18px; box-shadow: var(--wm-shadow-2); }
.composer:focus-within { border-color: var(--wm-hairline-strong); }
.composer textarea { width: 100%; border: 0; background: none; resize: none; color: var(--wm-ink); line-height: 1.55; padding: 10px 4px; min-height: 44px; max-height: 30dvh; overflow-y: auto; }
.composer textarea:focus { outline: none; box-shadow: none; }
.composer textarea::placeholder { color: var(--wm-ink-faint); }
.send, .dictate { height: 44px; width: 44px; padding: 0; display: grid; place-items: center; }
.send { font-size: 25px; }
.dictate[aria-pressed="true"] { color: var(--wm-red); background: var(--wm-red-tint); }
.delivery { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 8px 0; font-size: var(--wm-fs-xs); color: var(--wm-ink-soft); min-height: 26px; }
.error-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; margin-bottom: 12px; border-radius: 12px; background: var(--wm-red-tint); color: var(--wm-danger); font-size: var(--wm-fs-sm); }
.error-banner button { flex: none; font-size: var(--wm-fs-sm); }
.global-error { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(90%, 500px); background: var(--wm-bg-raised); border: 1px solid var(--wm-red); box-shadow: var(--wm-shadow-2); border-radius: 12px; padding: 16px; z-index: 8; }
dialog { width: min(960px, calc(100% - 32px)); max-height: 90dvh; border: 1px solid var(--wm-hairline); border-radius: 26px; padding: 28px; color: var(--wm-ink); background: var(--wm-bg); box-shadow: var(--wm-shadow-drawer); }
dialog::backdrop { background: rgba(22,25,28,.3); backdrop-filter: blur(4px); }
.dialog-heading, .results-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog-heading h2 { font-size: 24px; margin: 4px 0 20px; }
.dialog-heading > button { font-size: 24px; line-height: 1; }
.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--wm-hairline); padding-bottom: 16px; margin-bottom: 20px; }
.tabs [aria-pressed="true"] { background: var(--wm-ink); color: var(--wm-bg-raised); }
.prompt-editor { margin-top: 24px; }
.prompt-editor h3 { font-size: 17px; margin-bottom: 8px; }
.prompt-editor textarea { width: 100%; min-height: 250px; resize: vertical; border: 1px solid var(--wm-hairline-strong); border-radius: 12px; padding: 16px; font: 13px/1.6 var(--wm-font-mono); background: var(--wm-bg-raised); }
.prompt-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.prompt-status { font-size: var(--wm-fs-sm); margin: 10px 0 0; }
.result { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--wm-hairline); }
.result p { margin: 0; overflow-wrap: anywhere; }
.result .muted { font-size: var(--wm-fs-sm); }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.result-actions > * { font-size: var(--wm-fs-sm); }
.mobile-only { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Only the transcript scrolls; header and composer keep their intrinsic height. */
html { -webkit-text-size-adjust: 100%; }
body:has(#app:not([hidden])) { overflow: hidden; overscroll-behavior: none; }
.app { position: fixed; inset: var(--viewport-top, 0px) 0 auto; }
.app-header, .chat-toolbar, .composer-area { flex-shrink: 0; }
.app-header, .chat-toolbar, .composer-area, .sidebar { min-width: 0; }
.chat-toolbar > div { min-width: 0; overflow-wrap: anywhere; }
.composer-area { position: relative; background: var(--wm-bg); border-top: 1px solid var(--wm-hairline); }
.composer textarea { min-height: 44px; max-height: min(160px, calc(var(--viewport-height, 100dvh) * .25)); font-size: 16px; padding: 9px 4px; }
.conversation { overflow-anchor: none; scrollbar-gutter: stable; }
.interview-item { flex-shrink: 0; overflow-wrap: anywhere; }
.interview-list, .sidebar { overscroll-behavior: contain; }
.latest-message { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-height: 44px; border-radius: var(--wm-r-pill); box-shadow: var(--wm-shadow-2); white-space: nowrap; z-index: 1; }
.sidebar-backdrop { display: none; }
button, .button, .primary { touch-action: manipulation; }
.error-banner, .global-error, .result { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  button, .button, .primary, select, input { min-height: 44px; }
  input, select, .prompt-editor textarea { font-size: 16px; }
  .app-header { gap: 8px; padding: calc(4px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); }
  .app-header .wordmark { font-size: 23px; }
  .header-label, #account-name { display: none; }
  .account { gap: 2px; }
  .account button { padding: 8px; font-size: 12px; }
  #admin-button { width: 44px; padding: 10px; }
  #admin-button .mobile-only { min-width: 0; }
  .admin-label, #metrics { display: none; }
  .mobile-only { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
  #menu-toggle { padding: 0; font-size: 20px; }
  .workspace { grid-template-columns: minmax(0, 1fr); position: relative; }
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: absolute; inset: 0 auto 0 0; width: min(340px, calc(100% - 36px)); z-index: 5; background: var(--wm-bg); padding: 12px 16px max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-shadow: var(--wm-shadow-drawer); overflow-y: auto; }
  .sidebar-heading { gap: 4px; }
  .sidebar-heading h2 { margin-right: auto; }
  .sidebar-note { flex-shrink: 0; }
  .sidebar-backdrop:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 4; border: 0; border-radius: 0; background: rgba(22, 25, 28, .3); }
  .chat-toolbar { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); gap: 8px; }
  .chat-toolbar h1 { font-size: 16px; line-height: 1.3; }
  .chat-toolbar p { font-size: 12px; }
  .chat-toolbar .button { padding: 10px 8px; font-size: 12px; }
  .conversation { padding: 16px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); scrollbar-gutter: auto; }
  .composer-area { padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .composer { gap: 4px; padding: 4px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; gap: 6px; margin-bottom: 8px; padding: 2px; }
  .chips button { flex-shrink: 0; padding: 8px 12px; font-size: 12px; }
  .delivery { min-height: 0; padding: 0; }
  .delivery:not([data-active="true"]) { display: none; }
  .delivery[data-active="true"] { padding: 6px 4px 0; }
  .transcript { gap: 20px; padding-bottom: 4px; }
  .turn { gap: 6px; }
  .turn .monogram { width: 24px; height: 24px; font-size: 13px; }
  .turn.user { max-width: 90%; }
  .bubble { padding: 10px 12px; font-size: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .empty { padding: 20px 0; }
  .empty h2 { font-size: 24px; }
  .login-footer { align-items: center; flex-wrap: wrap; }
  .login-footer > .muted { max-width: 150px; }
  dialog { padding: 16px; border-radius: 18px; max-height: calc(var(--viewport-height, 100dvh) - 24px); max-width: calc(100% - 24px); }
  .result { align-items: flex-start; flex-direction: column; gap: 8px; }
  .error-banner { flex-wrap: wrap; max-height: 25dvh; overflow-y: auto; margin-bottom: 8px; }
  .sidebar > label, .sidebar > select, .sidebar > button { flex-shrink: 0; }
}
@media (max-width: 360px) {
  .app-header .wordmark { font-size: 20px; }
}
@media (max-width: 900px) and (max-height: 500px) {
  .chat-toolbar p, .sidebar-note { display: none; }
  .chat-toolbar { padding-top: 4px; padding-bottom: 4px; }
  .chips { margin-bottom: 4px; }
  .composer-area { padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

.legal-page { max-width: 900px; margin: 0 auto; padding: 40px 24px; line-height: 1.65; height: 100dvh; overflow-y: auto; }
.legal-page h1 { font-size: 30px; line-height: 1.2; margin: 28px 0 16px; }
.legal-page h2 { font-size: 20px; margin: 28px 0 8px; }
.legal-page p { margin: 12px 0; }
.result-cost { font-variant-numeric: tabular-nums; font-weight: 600; }