/* Daytrace: quiet content, floating glass controls, native source records. */
:root {
  color-scheme: dark;
  --bg: #0a111d;
  --panel: #142131;
  --panel-soft: #101b29;
  --surface: #1b2b3d;
  --line: #34495d;
  --line-light: #60798e;
  --text: #edf4fc;
  --muted: #b0bfd0;
  --quiet: #a3b5c7;
  --accent: #67e8de;
  --accent-rgb: 103, 232, 222;
  --cyan: #67e8de;
  --violet: #a782ff;
  --red: #ffaaa9;
  --playback: #f8d792;
  --sidebar: 220px;
  --glass-chrome: rgba(23, 37, 54, .8);
  --glass-edge: rgba(218, 239, 255, .18);
  --glass-highlight: rgba(239, 252, 255, .12);
  --glass-shadow: 0 12px 36px #00000024, inset 0 1px 0 var(--glass-highlight);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-optical-sizing: auto;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:active { transform: scale(.98); }
[hidden], .modal:not([open]) { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.accent { color: var(--accent); }
.muted { color: var(--muted); margin: 0; }
.fine-print { font-size: 12px; color: var(--quiet); line-height: 1.7; }
.eyebrow { margin: 0 0 7px; color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { font-weight: 600; margin: 0; }
h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
h2 { font-size: 17px; line-height: 1.4; letter-spacing: -.015em; }
h3 { font-size: 15px; line-height: 1.5; }
p { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.brand { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 650; letter-spacing: -.03em; }
.brand small { display: block; font: 9px/1.4 ui-monospace, SFMono-Regular, monospace; letter-spacing: .16em; color: var(--quiet); margin-top: 3px; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.boot { min-height: 100dvh; display: flex; justify-content: center; align-items: center; gap: 13px; font-size: 21px; font-weight: 600; }
.boot .brand-mark { width: 50px; height: 50px; }
.button { min-height: 40px; padding: 8px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; transition: transform 100ms, background 120ms, border-color 120ms; }
.button .icon { width: 16px; height: 16px; }
.button.primary { color: #072627; background: var(--accent); border-color: #b4fff2; box-shadow: 0 1px 0 #ffffff45 inset; }
.button.primary:hover { background: #94f4e9; }
.button.secondary { background: var(--surface); border-color: var(--line); }
.button.secondary:hover { background: #1c2d41; border-color: var(--line-light); }
.button.danger { color: var(--red); background: #ffaaa90a; border-color: #ffaaa933; }
.icon-button { background: transparent; border: 0; color: var(--muted); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 0; flex: none; transition: transform 100ms, background 120ms; }
.icon-button:hover { background: #d6eaff0a; color: var(--text); }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 5px 0; min-height: 36px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 550; }
.text-button .icon { width: 15px; height: 15px; }
.text-button:hover { color: #b8fff7; }
.quiet-badge { font-size: 11px; line-height: 1.5; color: var(--muted); padding: 4px 8px; border-radius: 6px; background: #172537; border: 1px solid var(--line); white-space: nowrap; }
.quiet-badge[data-state=enabled], .quiet-badge[data-state=confirmed], .quiet-badge[data-state=complete], .quiet-badge[data-state=processing] { color: #98f4da; border-color: #3b7361; background: #14372e; }
.quiet-badge[data-state=proposed], .quiet-badge[data-state=candidate] { color: #d9c5ff; border-color: #57447d; background: #271e3f; }
.quiet-badge[data-state=failed], .quiet-badge[data-state=stale] { color: var(--red); border-color: #744349; background: #362127; }
.form-error { color: var(--red); font-size: 13px; line-height: 1.6; padding: 10px 12px; background: #ffaaa90a; border: 1px solid #ffaaa92e; border-radius: 9px; margin: 8px 0 14px; }
.inline-note { font-size: 11px; font-weight: 400; color: var(--quiet); }
.full-width { width: 100%; }
.danger { color: var(--red); }

/* The brand has room on sign-in. Work screens spend that room on actual content. */
.auth-screen { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100dvh; }
.auth-story { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100dvh; padding: 40px 48px; background: radial-gradient(ellipse at 48% 44%, #172749 0, #0e1b2d 43%, var(--bg) 78%); border-right: 1px solid var(--line); }
.auth-brand { position: relative; z-index: 1; }
.auth-orbit { position: absolute; top: 18%; left: 50%; width: min(32vw,360px); aspect-ratio: 1; transform: translateX(-50%); }
.auth-orbit img { width: 100%; height: 100%; display: block; }
.auth-message { position: relative; z-index: 1; margin-top: auto; padding-top: 43vh; max-width: 410px; }
.auth-message h1 { font-size: clamp(32px,3vw,44px); line-height: 1.22; margin: 0 0 15px; letter-spacing: -.045em; }
.auth-message > p:last-child { font-size: 14px; color: var(--muted); max-width: 340px; line-height: 1.8; margin-bottom: 0; }
.auth-foot { font-size: 11px; color: var(--quiet); margin: 32px 0 0; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px; background: #091320; }
.auth-box { max-width: 360px; width: 100%; }
.auth-box h2 { font-size: 27px; letter-spacing: -.035em; margin-bottom: 8px; }
.auth-box form { margin-top: 26px; }
.auth-box label, .settings-panel > label, .field-row > label, .modal form > label, #bark-form > label { display: block; font-size: 13px; color: #c3d1e0; font-weight: 500; margin-bottom: 17px; }
input:not([type=checkbox]):not([type=range]), select, textarea { width: 100%; color: var(--text); background: #091321; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-top: 6px; min-height: 42px; outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: #8397ac; opacity: 1; }
input:not([type=checkbox]):focus, select:focus, textarea:focus { border-color: #67e8de8a; }
input[type=date], input[type=datetime-local], input[type=time] { color-scheme: dark; }
input[type=checkbox] { accent-color: #34c759; }
.auth-submit { width: 100%; justify-content: space-between; min-height: 44px; margin-top: 8px; }
.auth-switch { display: block; text-align: center; width: 100%; margin: 18px 0 25px; }
.privacy-note { display: flex; gap: 10px; align-items: flex-start; color: var(--quiet); font-size: 12px; line-height: 1.7; border-top: 1px solid var(--line); padding-top: 18px; }
.privacy-note .icon { width: 16px; height: 16px; margin-top: 2px; }

/* Compact 52px chrome + 50px page heading: the first card starts near 128px. */
.workspace { display: flex; min-height: 100dvh; }
.sidebar { width: var(--sidebar); position: fixed; inset: 0 auto 0 0; background: linear-gradient(165deg,#101b2d,#091321 75%); border-right: 1px solid var(--line); z-index: 20; padding: 22px 14px 16px; display: flex; flex-direction: column; }
.sidebar .brand { margin: 0 9px 29px; }
.sidebar-label { font-size: 10px; color: var(--quiet); letter-spacing: .08em; margin: 0 13px 10px; }
.navigation { display: flex; flex-direction: column; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; border: 1px solid transparent; background: transparent; color: #acbbce; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 550; white-space: nowrap; transition: transform 100ms, background 120ms; }
.nav-item .icon { width: 18px; height: 18px; }
.nav-item:hover { color: var(--text); background: #e2edff08; }
.nav-item.active { color: var(--accent); background: linear-gradient(95deg,#67e8de17,#66a8ff0a); border-color: #67e8de24; }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar-close { display: none; }
.sidebar-bottom { margin-top: auto; }
.sidebar-bottom > .nav-item { margin-bottom: 15px; }
.account { border-top: 1px solid var(--line); padding: 16px 0 0; display: flex; gap: 9px; align-items: center; }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: #1b3143; border: 1px solid #3e5a70; display: flex; align-items: center; justify-content: center; color: #bee1ed; font-size: 13px; font-weight: 600; flex: none; }
.account > span:nth-child(2) { flex: 1; min-width: 0; }
.account strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 550; }
.account small { display: block; font-size: 10px; margin-top: 3px; color: var(--quiet); }
.account .icon-button { width: 34px; }
.account .icon { width: 16px; height: 16px; }
.main-shell { width: calc(100% - var(--sidebar)); min-width: 0; margin-left: var(--sidebar); min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 98% 0,#315d7520,transparent 42%), var(--bg); }
.topbar { height: 52px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 26px; border-bottom: 1px solid #d4e6ff0b; background: #07111df2; position: sticky; top: 0; z-index: 15; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 12px; min-width: 0; }
.breadcrumb > span { color: var(--quiet); }
.breadcrumb > .icon { height: 11px; width: 11px; color: #7d93aa; }
.breadcrumb > strong { font-weight: 500; color: #d2deea; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.global-processing { flex: 1; min-width: 0; max-width: 390px; margin-inline: auto; }
.global-processing-button { width: 100%; position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: #b3dae909; text-align: left; color: var(--text); }
.global-processing-heading { display: grid; min-width: 0; flex: 1; gap: 1px; }
.global-processing-title,.global-processing-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-processing-title { font-size: 11px; font-weight: 550; }
.global-processing-caption { font-size: 9px; color: var(--quiet); }
.global-processing-steps { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.global-processing-step { color: var(--quiet); opacity: .65; white-space: nowrap; }
.global-processing-step.is-active { color: var(--accent); opacity: 1; font-weight: 600; }
.global-processing-step.is-failed { color: var(--red); opacity: 1; }
.global-processing-meter { position: absolute; height: 2px; width: calc(100% - 24px); bottom: 3px; left: 12px; border: 0; border-radius: 3px; accent-color: var(--accent); overflow: hidden; }
.global-processing-popover { inset: 62px 24px auto auto; width: min(420px,calc(100vw - 28px)); max-height: min(640px,calc(100dvh - 90px)); margin: 0; padding: 16px; overflow: auto; color: var(--text); background: #142634f7; border: 1px solid var(--line-light); border-radius: 22px; box-shadow: 0 24px 80px #0008,inset 0 1px 0 #ffffff12; backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }
.global-processing-popover::backdrop { background: #0002; }
.global-processing-popover-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 13px; padding: 2px 2px 10px; }
.global-processing-popover-heading > span { color: var(--quiet); font-size: 11px; white-space: nowrap; }
.global-processing-note { font-size: 11px; line-height: 1.65; margin: 8px 2px; color: var(--quiet); }
.global-processing-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 13px 2px; border-top: 1px solid var(--line); font-size: 12px; }
.global-processing-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; background: transparent; border: 0; font: inherit; font-weight: 500; color: var(--text); text-align: left; }
button.global-processing-source:hover { color: var(--accent); }
.global-processing-row-state,.global-processing-row > small { color: var(--quiet); font-size: 10px; }
.global-processing-row[data-state=failed] .global-processing-row-state { color: var(--red); }
.global-processing-row-meter { height: 4px; width: 100%; accent-color: var(--accent); }
.global-processing-meter,.global-processing-row-meter { appearance: none; -webkit-appearance: none; border: 0; border-radius: 3px; overflow: hidden; background: #b9dcf41c; }
.global-processing-meter::-webkit-progress-bar,.global-processing-row-meter::-webkit-progress-bar { background: #b9dcf41c; border-radius: 3px; }
.global-processing-meter::-webkit-progress-value,.global-processing-row-meter::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
.global-processing-meter::-moz-progress-bar,.global-processing-row-meter::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
.global-processing-meter:indeterminate,.global-processing-row-meter:indeterminate { background: linear-gradient(90deg,#b9dcf41c 20%,#8be9e266 50%,#b9dcf41c 80%); background-size: 200% 100%; animation: processing-indeterminate 1.8s linear infinite; }
@media(prefers-reduced-motion:reduce) { .global-processing-meter:indeterminate,.global-processing-row-meter:indeterminate { animation: none; } }
@media(max-width:760px) { .global-processing { max-width: none; margin-left: 4px; } .global-processing-button { padding-inline: 8px; gap: 6px; } .global-processing-title { font-size: 10px; } .global-processing-steps { gap: 4px; font-size: 8px; } .global-processing-popover { top: calc(60px + env(safe-area-inset-top)); right: 14px; } .topbar:has(.global-processing:not([hidden])) .breadcrumb { display: none; } .topbar:has(.global-processing:not([hidden])) .connection-state { display: none; } }
@media(prefers-reduced-transparency:reduce) { .global-processing-popover { background: #142634; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.connection-state { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.connection-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.mobile-menu { display: none; }
.main-content { padding: 14px 26px 26px; width: 100%; max-width: 1800px; margin: 0 auto; flex: 1; min-width: 0; }
.page { min-width: 0; animation: page-arrive 160ms ease-out; }
@keyframes page-arrive { from { opacity: .55; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; min-height: 50px; }
.page-heading > div:first-child { min-width: 0; }
.page-heading .eyebrow, .heading-dot { display: none; }
.page-heading .muted { font-size: 13px; line-height: 1.4; margin-top: 3px; max-width: 700px; }
.heading-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.date-picker { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); background: #111e2e; border-radius: 9px; }
.date-picker .icon { width: 15px; height: 15px; color: #a5bdcf; }
.date-picker input[type=date] { margin: 0; padding: 0; background: transparent; border: 0; font-size: 12px; min-height: 34px; width: 130px; }
.workspace-footer { margin: 0 26px 15px; border-top: 1px solid #d4e6ff0b; padding-top: 12px; color: var(--quiet); display: flex; justify-content: space-between; gap: 20px; font-size: 10px; }
.workspace-footer > span:first-child { font: 9px/1.5 ui-monospace,SFMono-Regular,monospace; letter-spacing: .08em; }

/* The archive is a timeline, not a landing-page hero. */
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0 0 20px; }
.stat-card { padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: #101d2b; position: relative; min-width: 0; }
.stat-card:first-child { background: linear-gradient(130deg,#123236,#10202f); border-color: #67e8de36; }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; margin-bottom: 9px; }
.stat-top .icon { width: 16px; height: 16px; color: #8fa6c1; }
.stat-card:first-child .stat-top .icon { color: var(--accent); }
.stat-value { font-size: 27px; letter-spacing: -.03em; font-weight: 550; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 5px; letter-spacing: 0; }
.stat-caption { font-size: 11px; color: var(--quiet); margin-top: 7px; }
.archive-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 20px; align-items: start; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading .eyebrow { display: none; }
.section-heading h2 { font-size: 16px; }
.timeline { position: relative; }
.recording-row { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; margin-bottom: 12px; position: relative; }
.timeline-time { font: 12px/1.5 ui-monospace,SFMono-Regular,monospace; color: #c3d5e4; padding-top: 17px; position: relative; }
.timeline-time::after { content: ""; position: absolute; right: -8px; top: 22px; width: 5px; height: 5px; border: 1px solid #72a8ba; border-radius: 50%; background: #253e53; z-index: 1; }
.recording-row::before { content: ""; position: absolute; left: 57px; top: 25px; bottom: -34px; width: 1px; background: var(--line); }
.recording-row:last-child::before { bottom: 22px; }
.recording-card { background: linear-gradient(135deg,#112032,#101b29); border: 1px solid var(--line); border-radius: 13px; padding: 15px 18px; text-align: left; width: 100%; min-width: 0; cursor: pointer; transition: transform 100ms,border-color 120ms,background 120ms; }
.recording-card:hover { border-color: #4e7488; background: #142638; }
.recording-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.recording-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #95d9ce; }
.recording-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.recording-status.pending { color: var(--muted); }
.recording-status.pending i { background: #a782ff; }
.recording-status.error { color: var(--red); }
.recording-status.error i { background: var(--red); }
.recording-duration { font: 11px ui-monospace,SFMono-Regular,monospace; color: var(--quiet); }
.recording-card h3 { font-size: 15px; line-height: 1.5; margin-bottom: 5px; letter-spacing: -.01em; }
.recording-excerpt { font-size: 13px; color: var(--muted); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.archive-card-placeholder { display: grid; gap: 9px; padding: 5px 0; }
.archive-card-placeholder span { display: block; width: 88%; height: 8px; border-radius: 4px; background: currentColor; opacity: .12; }
.archive-card-placeholder span:last-child { width: 56%; }
.archive-read-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.archive-read-feedback .form-error { margin: 0; }
.archive-read-feedback .text-button { flex: none; }
.recording-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #c4ddff0c; }
.recording-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #a3b8cd; }
.recording-meta span { display: flex; align-items: center; gap: 5px; }
.recording-meta .icon { width: 13px; height: 13px; }
.recording-card-bottom > .icon { width: 16px; height: 16px; color: #8cb7c1; }
.day-context { display: flex; flex-direction: column; gap: 12px; }
.archive-primary { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.health-table-scroll { max-width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid var(--line); border-radius: 10px; }
.health-data-table { width: 100%; min-width: 660px; border-collapse: collapse; text-align: left; font-size: 12px; line-height: 1.6; }
.health-data-table th, .health-data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.health-data-table thead th { position: sticky; top: 0; z-index: 1; background: #16283a; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.health-data-table tbody th { font-weight: 500; white-space: nowrap; }
.health-data-table tbody tr:last-child > * { border-bottom: 0; }
.health-data-table tbody tr:hover { background: #5fe3dc08; }
.health-data-table .health-value { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 550; max-width: 240px; overflow-wrap: anywhere; }
.health-data-table .health-time { color: var(--muted); min-width: 155px; font-variant-numeric: tabular-nums; }
.health-data-table .health-source { max-width: 200px; overflow-wrap: anywhere; color: var(--muted); }
.health-data-table .health-count { text-align: right; font-variant-numeric: tabular-nums; }
.health-data-table small { font-size: 11px; color: var(--quiet); font-weight: 400; }
.health-data-table .health-source small { display: block; }
.health-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.health-all-records { margin-top: 14px; }
.health-records-modal { width: min(1080px, calc(100vw - 32px)); }
.health-records-modal .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.health-records-modal > .fine-print { margin-bottom: 16px; }
.health-records-modal .health-table-scroll { max-height: min(60dvh, 620px); }
.health-table-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.health-table-pagination > div { display: flex; gap: 8px; }
.panel { background: linear-gradient(145deg,#111e2e,#0e1927); border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-width: 0; }
.panel-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.panel-heading h2 { font-size: 16px; }
.panel-heading .icon { width: 18px; height: 18px; }
.context-metric { display: block; border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 12px; }
.context-metric-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.context-metric-heading > span { min-width: 0; flex: 1; color: var(--muted); }
.context-metric-heading > strong { max-width: 60%; min-width: 0; text-align: right; overflow-wrap: anywhere; font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; }
.context-metric small { font-size: 11px; color: var(--quiet); font-weight: 400; }
.context-metric .context-sample-time { display: block; font-family: inherit; font-size: 11px; line-height: 1.7; margin-top: 6px; text-align: left; }
.context-metric:last-of-type { border-bottom: 0; }
.context-coverage { margin: 12px 0 0; }
.empty-note { font-size: 13px; color: var(--quiet); line-height: 1.75; margin: 0; }
.mini-review { background: radial-gradient(ellipse at top right,#a782ff16,transparent 70%),#111c2c; }
.mini-review h2 { font-size: 16px; line-height: 1.5; margin-bottom: 9px; }
.mini-review .eyebrow { color: #baa7e4; }
.mini-review p.muted { font-size: 12px; line-height: 1.8; margin-bottom: 10px; }
.context-foot { font-size: 11px; color: var(--quiet); line-height: 1.7; padding: 2px 4px; display: flex; gap: 7px; margin: 0; }
.context-foot .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.empty-state { border: 1px dashed #3c526a; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 22px; gap: 9px; background: #101c2a; }
.empty-state .empty-icon { height: 38px; width: 38px; border: 1px solid #67e8de36; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #18373c; color: var(--accent); margin-bottom: 3px; }
.empty-state h3 { font-size: 15px; }
.empty-state p { font-size: 13px; max-width: 390px; color: var(--quiet); line-height: 1.75; margin: 0; }
.loading-state { min-height: 130px; display: flex; align-items: center; justify-content: center; color: var(--quiet); font-size: 13px; gap: 9px; }
.spinner { height: 14px; width: 14px; border: 1px solid #45617b; border-right-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Chat uses the viewport for the conversation, with the composer in normal flow. */
.chat-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 18px; align-items: start; }
.chat-panel { padding: 0; display: flex; flex-direction: column; min-height: 380px; height: calc(100dvh - 184px); overflow: hidden; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-width: thin; scrollbar-color: #38506b transparent; }
.chat-welcome { text-align: center; max-width: 510px; margin: 22px auto; }
.welcome-mark { height: 58px; width: 58px; display: flex; align-items: center; justify-content: center; margin: 0 auto 17px; }
.welcome-mark img { width: 100%; height: 100%; }
.chat-welcome h2 { font-size: 22px; letter-spacing: -.03em; margin-bottom: 10px; }
.chat-welcome p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.prompt-suggestions { display: grid; gap: 8px; text-align: left; margin: 22px auto 0; max-width: 340px; }
.prompt-suggestions button { font-size: 13px; text-align: left; padding: 10px 13px; min-height: 42px; background: #162538; border: 1px solid #304761; border-radius: 9px; color: #c3d1e0; }
.prompt-suggestions button:hover { border-color: #65849e; color: var(--text); }
.chat-composer { position: relative; flex: none; padding: 12px 18px; background: #111e2f; border-top: 1px solid var(--line); }
.chat-composer textarea { resize: none; max-height: 150px; min-height: 46px; margin: 0; padding: 12px 56px 12px 13px; line-height: 1.55; scrollbar-width: thin; font-size: 14px; }
.send-button { position: absolute; right: 26px; top: 20px; width: 30px; height: 30px; border: 0; background: var(--accent); color: #092729; border-radius: 8px; display: flex; justify-content: center; align-items: center; }
.send-button .icon { width: 17px; height: 17px; }
.chat-composer p { font-size: 11px; color: var(--quiet); margin: 7px 0 0; }
.chat-context h2 { font-size: 15px; margin-bottom: 10px; }
.chat-context .text-button { margin-top: 12px; }
.source-context-item { padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; font-size: 12px; color: var(--muted); }
.source-context-item .icon { width: 15px; height: 15px; color: #8cb6c3; margin-top: 2px; }
.source-context-item small { font-size: 11px; color: var(--quiet); display: block; margin-top: 3px; }
.message { margin: 0 0 22px; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; min-width: 0; }
.message-header { display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.message-header .icon { width: 14px; height: 14px; }
.message-body { overflow-wrap: anywhere; min-width: 0; }
.message.user { padding: 11px 15px; border: 1px solid #67e8de30; border-radius: 12px 12px 3px 12px; background: #17343b; margin-left: auto; max-width: 85%; width: fit-content; line-height: 1.65; }
.message.assistant { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.message.processing { color: var(--quiet); display: flex; align-items: center; gap: 9px; font-size: 13px; }
.message.error { color: var(--red); background: #ffaaa90a; padding: 12px; border-radius: 9px; font-size: 13px; }
.markdown { font-size: 14px; line-height: 1.85; color: #d7e2f0; min-width: 0; }
.markdown p { margin: 0 0 12px; }
.markdown p:last-child { margin: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { font-size: 17px; line-height: 1.5; margin: 18px 0 9px; font-weight: 600; }
.markdown h1 { font-size: 21px; }
.markdown ul, .markdown ol { padding-left: 22px; margin: 9px 0 15px; }
.markdown li { margin: 4px 0; }
.markdown blockquote { margin: 14px 0; padding: 8px 13px; border-left: 2px solid var(--accent); color: #c0d5e0; background: #142b39; }
.markdown code { font: 12px/1.7 ui-monospace,SFMono-Regular,monospace; border: 1px solid #3a5066; background: #18283c; padding: 2px 5px; border-radius: 4px; }
.markdown pre { background: #08121f; border: 1px solid var(--line); border-radius: 9px; padding: 14px; overflow-x: auto; max-width: 100%; }
.markdown pre code { padding: 0; border: 0; background: none; white-space: pre; }
.markdown a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.markdown-table-scroll { min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; margin: 13px 0; border-radius: 8px; scrollbar-width: thin; scrollbar-color: #38506b transparent; }
.markdown table { border-collapse: collapse; font-size: 13px; width: 100%; }
/* A readable column minimum makes wide tables scroll locally; a single column still fills its card. */
.markdown td, .markdown th { min-width: 10.25rem; min-inline-size: 10.25rem; padding: 8px 11px; border: 1px solid #334961; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.markdown th { background: #1a2a40; }
.message-sources { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.source-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #67e8de36; border-radius: 7px; padding: 6px 9px; background: #16313b; color: #b3e6df; font-size: 11px; min-height: 34px; text-align: left; }
.source-chip .icon { width: 12px; height: 12px; }
.source-chip:hover { border-color: #88c7c5; }

.review-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }
.reflection-panel { padding: 22px; }
.reflection-panel .section-heading { border-bottom: 1px solid var(--line); padding-bottom: 13px; margin-bottom: 18px; }
.review-flow { border: 1px solid var(--line); border-radius: 13px; background: var(--panel-soft); padding: 17px 14px; margin-bottom: 22px; }
.review-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; list-style: none; margin: 0; padding: 0; }
.review-step { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--quiet); text-align: center; min-width: 0; font-size: 11px; line-height: 1.5; }
.review-step-marker { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line-light); font: 11px/1 ui-monospace,SFMono-Regular,monospace; }
.review-step.complete { color: #a0d7cf; }
.review-step.complete .review-step-marker { background: #173b37; border-color: #41766a; }
.review-step.active, .review-step.waiting { color: var(--accent); }
.review-step.active .review-step-marker, .review-step.waiting .review-step-marker { background: #193b42; border-color: var(--accent); box-shadow: 0 0 0 4px #67e8de0a; }
.review-step.failed { color: var(--red); }
.review-step.failed .review-step-marker { background: #362127; border-color: #945259; }
.review-stage-detail { color: var(--muted); font-size: 12px; margin: 17px 0 0; padding-top: 13px; border-top: 1px solid var(--line); line-height: 1.7; }
.review-flow > .fine-print { margin: 7px 0 0; }
.review-section { margin-top: 25px; }
.review-section:first-child { margin-top: 0; }
.review-section-heading { margin-bottom: 13px; }
.review-section-heading .eyebrow { color: #8ec5c9; font-size: 9px; margin-bottom: 5px; }
.review-section-heading h3 { font-size: 16px; }
.review-retained-note { color: var(--quiet); font-size: 12px; line-height: 1.7; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.review-highlights { display: grid; gap: 10px; }
.review-hour-highlight { border: 1px solid var(--line); border-radius: 11px; background: #142332; padding: 13px 15px; min-width: 0; }
.review-hour-clock { font: 11px/1.5 ui-monospace,SFMono-Regular,monospace; color: var(--accent); margin: 0 0 8px; }
.review-highlight-text.markdown > :last-child { margin-bottom: 0; }
.review-hour-highlight .message-sources { margin-top: 8px; }
.review-memory-list { display: grid; gap: 10px; }
.review-memory { border: 1px solid #a782ff35; background: #a782ff08; border-radius: 11px; padding: 13px 15px; margin-top: 10px; min-width: 0; }
.review-memory > .quiet-badge { display: inline-block; color: #d9c5ff; margin-bottom: 9px; }
.review-empty { padding: 25px 0; }
.review-empty h3 { margin-bottom: 10px; }
.agent-test-panel { margin: 18px 0; border-color: #7763a477; padding: 18px; }
.agent-test-panel .section-heading { flex-wrap: wrap; gap: 10px; }
.agent-test-badge { color: #ddc9ff; border-color: #79649d; background: #332447; white-space: normal; }
.agent-test-actions { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.agent-test-proposals { display: grid; gap: 12px; margin: 15px 0; }
.agent-test-proposal { padding: 15px; border: 1px solid var(--line-light); border-radius: 11px; background: #0d1927; min-width: 0; }
.agent-test-proposal-title { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.agent-test-choice { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
.agent-test-choice input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.agent-test-due { font-size: 13px; margin: 11px 0 7px; color: var(--accent); }
.agent-test-quote { margin: 11px 0; padding: 5px 0 5px 12px; border-left: 2px solid #8e7daf; color: var(--muted); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.agent-test-status { color: var(--accent); margin: 12px 0 0; font-size: 13px; }
.agent-test-consent { align-items: flex-start; margin: 17px 0; }
.advice-grid { display: grid; gap: 12px; }
.advice-card { border: 1px solid #a782ff40; background: linear-gradient(135deg,#1c2440,#111e2f); border-radius: 13px; padding: 19px; }
.advice-number { font: 11px ui-monospace,SFMono-Regular,monospace; color: #beace9; margin-bottom: 12px; display: flex; justify-content: space-between; }
.advice-card h3 { font-size: 15px; margin-bottom: 9px; }
.advice-card p { font-size: 13px; color: #b6c9dc; line-height: 1.8; margin: 0; }
.advice-source { font-size: 11px; color: var(--quiet); border-top: 1px solid #a782ff26; padding-top: 10px; margin-top: 13px; }
.info-strip { display: flex; gap: 10px; align-items: center; border: 1px solid #67e8de2e; border-radius: 10px; background: #102935; padding: 12px 15px; color: #b7d3e0; margin-bottom: 18px; font-size: 12px; line-height: 1.7; }
.info-strip > .icon { height: 17px; width: 17px; color: var(--accent); }
.info-strip p { font-size: 12px; margin: 0; }
.speakers-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.speaker-card { position: relative; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: #111f30; min-width: 0; }
.speaker-avatar { height: 42px; width: 42px; border-radius: 12px; background: linear-gradient(140deg,#263f62,#24263e); color: #d1deff; font-size: 19px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; border: 1px solid #7486c047; }
.speaker-card h3 { font-size: 16px; }
.speaker-card p { font-size: 12px; color: var(--quiet); margin: 6px 0 0; }
.owner-badge { font-size: 10px; color: #a3f4db; margin-left: 8px; border: 1px solid #67e8de4d; background: #16392f; border-radius: 5px; padding: 2px 5px; vertical-align: middle; }
.speaker-delete { position: absolute; top: 14px; right: 14px; color: var(--quiet); }
.speaker-delete:hover { color: var(--red); }
.speaker-card > .text-button { margin-top: 12px; }
.speaker-name-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.speaker-learning-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: var(--muted); }
.speaker-learning-status .text-button { font-size: 11px; }

/* Every setting has a compact card; all fields remain in their original form. */
.settings-jump { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; }
.settings-jump a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: #111f30; color: #c0d0e1; min-height: 34px; }
.settings-jump a:hover { border-color: #67e8de70; color: var(--accent); }
.settings-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.settings-panel { padding: 22px; scroll-margin-top: 68px; }
.settings-panel > .muted { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
.settings-panel .panel-heading { margin-bottom: 12px; }
.settings-panel label { margin-top: 15px; }
.settings-panel label .inline-note { float: right; }
.field-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px; }
.field-row label { min-width: 0; }
.switch-row { position: relative; display: flex !important; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0 !important; cursor: pointer; }
.switch-row > span:first-child { min-width: 0; }
.switch-row strong { font-size: 13px; font-weight: 550; color: #d2deec; display: block; }
.switch-row small { display: block; font-size: 12px; line-height: 1.7; color: var(--quiet); margin-top: 3px; font-weight: 400; }
.switch-row input { position: absolute; right: 0; opacity: 0; width: 44px; height: 26px; margin: 0; }
.switch { width: 44px; height: 26px; flex: none; border: 1px solid #516079; border-radius: 15px; background: #35445b; padding: 3px; transition: background 120ms; }
.switch::after { content: ""; display: block; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px #0003; transition: transform 140ms; }
.switch-row input:checked + .switch { background: #34c759; border-color: #34c759; }
.switch-row input:checked + .switch::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 4px; }
.agent-settings-panel { grid-column: 1/-1; }
.agent-settings-panel .field-row { max-width: 650px; }
.agent-settings-panel > label:has(#settings-agent-max) { max-width: 318px; }
.settings-save { grid-column: 1/-1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0; }
.settings-save .form-error { flex: 1; margin: 0; }
.settings-save .button { min-width: 140px; }
.bark-panel { margin-top: 18px; }
.bark-panel .panel-heading { flex-wrap: wrap; }
.bark-panel #bark-state { margin-left: auto; }
.bark-panel #bark-server { overflow-wrap: anywhere; }
.bark-panel #bark-result:empty { margin: 0; }
.bark-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.bark-actions .text-button { margin-left: auto; }
.admin-panel { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-panel h2 { font-size: 16px; margin-bottom: 6px; }
.admin-panel .muted { font-size: 13px; }

.agent-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 18px; align-items: start; }
.agent-panel { margin-bottom: 20px; }
.agent-panel.panel { background: radial-gradient(ellipse at 100% 0%,#66a8ff14,transparent 70%),#101e2e; }
.agent-panel .section-heading h2, .agent-activity .section-heading h2 { display: flex; align-items: center; gap: 8px; }
.agent-panel .section-heading h2 .icon, .agent-activity .section-heading h2 .icon { width: 18px; height: 18px; }
.agent-panel > .fine-print { margin: -4px 0 13px; }
.section-note { font-size: 11px; color: var(--quiet); white-space: nowrap; font-weight: 400; }
.agent-panel .empty-state, .agent-activity .empty-state { border-style: solid; padding: 21px 18px; background: #0b1623; }
.agent-activity { padding: 20px; position: sticky; top: 68px; }
.agent-cards { display: grid; gap: 13px; }
.agent-card { padding: 20px; }
.agent-card .section-heading { align-items: flex-start; margin-bottom: 11px; }
.agent-card h3 { font-size: 15px; }
.agent-card > p { font-size: 14px; line-height: 1.85; color: #d1dfef; margin-bottom: 12px; }
.agent-card > p.fine-print { font-size: 12px; color: var(--quiet); }
.agent-card > p.agent-trigger { color: #b8f5e9; font-size: 13px; background: #67e8de09; border: 1px solid #67e8de2b; padding: 9px 11px; border-radius: 9px; }
.agent-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }
.agent-evidence { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 3px; }
.agent-evidence-heading { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; color: #bbd7e7; min-height: 38px; list-style: none; }
.agent-evidence-heading .icon { width: 15px; height: 15px; }
.agent-evidence-heading::after { content: '＋'; margin-left: auto; color: var(--quiet); font-size: 16px; }
.agent-evidence[open] > .agent-evidence-heading::after { content: '−'; }
.agent-evidence-heading::-webkit-details-marker { display: none; }
.agent-evidence-row { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.agent-evidence-row blockquote { font-size: 13px; border-left: 2px solid #809fc7; padding-left: 12px; color: #cfdef0; line-height: 1.85; margin: 0 0 10px; }
.agent-evidence-row > small { display: block; margin-top: 8px; color: var(--quiet); font-size: 11px; }
.agent-source-binding { margin-top: 7px; color: var(--quiet); font-size: 11px; }
.agent-source-binding summary { cursor: pointer; min-height: 36px; padding-top: 8px; }
.agent-source-binding .fine-print { font: 11px/1.7 ui-monospace,SFMono-Regular,monospace; overflow-wrap: anywhere; }
.agent-run { padding: 15px 0; border-top: 1px solid var(--line); }
.agent-run:first-child { padding-top: 0; border-top: 0; }
.agent-run-heading { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.agent-run-heading strong { font-weight: 550; }
.agent-run-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.agent-run[data-state=failed] .agent-run-dot { background: var(--red); }
.agent-run[data-state=queued] .agent-run-dot { background: var(--violet); }
.agent-run > .fine-print { font-size: 11px; margin: 7px 0; line-height: 1.7; }
.agent-trace { font-size: 12px; color: #b4c8dc; }
.agent-trace summary { cursor: pointer; min-height: 36px; padding: 8px 0; line-height: 1.6; }
.agent-trace .source-chip { font-size: 11px; margin: 5px 4px 5px 0; }

/* Source playback reserves its own space; the transcript scrolls above it. */
.modal { border: 1px solid #42617b; border-radius: 20px; padding: 24px; color: var(--text); background: #0d1928; box-shadow: 0 28px 100px #0009; max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal::backdrop { background: #020814b8; backdrop-filter: blur(5px); }
.small-modal { max-width: 470px; width: calc(100% - 28px); }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.modal-heading h2 { font-size: 22px; letter-spacing: -.025em; line-height: 1.4; }
.modal-heading > .icon-button { border: 1px solid var(--line); background: #1c2d405c; margin-top: -2px; }
.modal .eyebrow { letter-spacing: .05em; }
.file-drop { display: flex !important; align-items: center; flex-direction: column; border: 1px dashed #54728c; border-radius: 12px; background: #12273a; text-align: center; padding: 20px !important; cursor: pointer; gap: 5px; margin-bottom: 20px !important; }
.file-drop > .icon { width: 25px; height: 25px; color: var(--accent); margin-bottom: 5px; }
.file-drop > strong { font-size: 14px; }
.file-drop > span { font-size: 12px; font-weight: 400; color: var(--quiet); }
.file-drop > input[type=file] { padding: 9px 0 0 !important; border: 0 !important; background: transparent !important; font-size: 11px; min-height: 30px; }
.file-drop input[type=file]::file-selector-button { background: #263d56; color: #d4e5f4; border: 1px solid #5a758e; border-radius: 6px; font: inherit; padding: 6px 9px; margin-right: 10px; }
.consent { display: flex !important; align-items: flex-start; gap: 9px; font-size: 12px !important; line-height: 1.75; font-weight: 400 !important; }
.consent input { margin: 4px 0 0; flex: none; }
.recording-modal { width: min(1100px,calc(100% - 32px)); padding: 22px; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.recording-modal .modal-heading { flex: none; margin-bottom: 15px; }
.detail-tabs { display: flex; gap: 4px; background: #16283a; border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 16px; flex: none; }
.detail-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: #acc0d4; font-size: 13px; font-weight: 550; }
.detail-tabs button[aria-selected=true] { color: #e6fffb; background: #285052; box-shadow: 0 1px 4px #0003; }
.detail-body { overflow-y: auto; flex: 1; display: block; padding: 0 0 18px; scrollbar-width: thin; scrollbar-color: #446482 transparent; min-height: 0; overscroll-behavior: contain; }
.conversation-map { --map-label-width: 156px; --map-gap: 12px; background: #142538; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.conversation-map .section-heading { min-height: 28px; margin-bottom: 6px; }
.conversation-map h3, .detail-summary h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.conversation-map h3 .icon, .detail-summary h3 .icon { width: 17px; height: 17px; color: var(--accent); }
.conversation-map .fine-print { font-size: 11px; line-height: 1.65; margin: 0 0 8px; }
.conversation-map .text-button { font-size: 12px; white-space: nowrap; }
.map-axis { display: flex; justify-content: space-between; padding-left: calc(var(--map-label-width) + var(--map-gap)); font: 11px/1.5 ui-monospace,SFMono-Regular,monospace; color: #a0b5cb; margin-bottom: 2px; }
.map-lanes { position: relative; }
.map-speaker-row { display: grid; grid-template-columns: var(--map-label-width) minmax(0,1fr); gap: var(--map-gap); align-items: center; }
.map-speaker-label { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 8px; align-items: center; background: transparent; border: 0; padding: 0; min-height: 44px; text-align: left; color: #d5e2f3; font-size: 12px; min-width: 0; }
.map-speaker-label > strong { font: 11px ui-monospace,SFMono-Regular,monospace; color: #b0c4d7; font-weight: 400; }
.map-speaker-title { min-width: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }
.map-person-name { display: block; margin-top: 2px; font-size: 11px; color: #9fb7cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speaker-dot { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: var(--speaker-color); flex: none; }
.map-track { height: 44px; position: relative; min-width: 0; }
.map-track::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: #3c5269; }
.map-raw-range { position: absolute; top: 18px; height: 7px; border-radius: 999px; background: var(--speaker-color); opacity: .28; pointer-events: none; }
.map-clean-range { position: absolute; top: 0; height: 44px; padding: 0; border: 0; min-width: 0; background: transparent; cursor: pointer; }
.map-clean-range::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 7px; border-radius: 999px; background: var(--speaker-color); box-shadow: 0 0 0 3px color-mix(in srgb,var(--speaker-color) 10%,transparent); }
.map-clean-range:hover::before, .map-clean-range.playing::before { box-shadow: inset 0 0 0 1px #f4fffd,0 0 0 3px color-mix(in srgb,var(--speaker-color) 25%,transparent),0 0 12px color-mix(in srgb,var(--speaker-color) 50%,transparent); }
.map-clean-range:active { transform: none; }
.map-clean-range:disabled { cursor: default; opacity: .55; }
.map-playhead-layer { position: absolute; left: calc(var(--map-label-width) + var(--map-gap) - 4px); right: -4px; overflow: clip; top: 0; bottom: 0; pointer-events: none; z-index: 3; }
.map-playhead { position: absolute; top: 4px; bottom: 4px; width: calc(100% - 8px); left: 4px; border-left: 2px solid var(--playback); transform: translateX(0); will-change: transform; }
.map-playhead::before, .map-playhead::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--playback); border-radius: 50%; left: -1px; transform: translateX(-50%); box-shadow: 0 0 8px #f8d79233; }
.map-playhead::before { top: -2px; }
.map-playhead::after { bottom: -2px; }
.detail-summary { padding: 18px; margin-bottom: 20px; background: radial-gradient(ellipse at 100% 0%,#67e8de15,transparent 70%),#132839; }
.detail-summary .section-heading { gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.detail-summary .quiet-badge { margin-left: auto; }
.detail-summary #recording-summary-generate { font-size: 12px; min-height: 36px; white-space: nowrap; }
.summary-progress { font-size: 13px; color: #b5dfe0; margin: 0 0 15px; }
.detail-summary { position: relative; isolation: isolate; }
.detail-summary > :not(.summary-aura) { position: relative; z-index: 1; }
.summary-aura { position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; overflow: hidden; opacity: .8; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; }
.summary-aura i { position: absolute; inset: -180%; background: conic-gradient(from 0deg,transparent 0deg 20deg,#f6b5e8 38deg,transparent 58deg 120deg,#ffd69a 140deg,transparent 164deg 215deg,#72e5d4 242deg,transparent 267deg 309deg,#b1b1ff 330deg,transparent 350deg); animation: summary-edge-flow 7s linear infinite; }
.summary-skeleton { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 19px; }
.summary-skeleton span { display: block; position: relative; overflow: hidden; height: 13px; border-radius: 999px; background: #9bb2c61b; }
.summary-skeleton span:nth-child(2) { width: 92%; }
.summary-skeleton span:nth-child(3) { width: 97%; }
.summary-skeleton span:last-child { width: 68%; }
.summary-skeleton span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,transparent 15%,#dceaf521 43%,#f8ffff3d 50%,#dceaf521 57%,transparent 85%); transform: translateX(-100%); }
.summary-is-active .summary-skeleton span::after { animation: summary-scan 2.8s ease-in-out infinite; }
.summary-is-active .summary-skeleton span:nth-child(2)::after { animation-delay: .08s; }
.summary-is-active .summary-skeleton span:nth-child(3)::after { animation-delay: .16s; }
.summary-is-active .summary-skeleton span:last-child::after { animation-delay: .24s; }
.summary-is-active .quiet-badge { display: inline-flex; align-items: center; gap: 7px; }
.summary-is-active .quiet-badge .icon { width: 14px; height: 14px; animation: summary-voice 1.3s ease-in-out infinite; }
.summary-previous { margin-top: 14px; font-size: 13px; color: var(--muted); }
.summary-previous > summary { cursor: pointer; min-height: 36px; display: list-item; }
.summary-motion-paused *, .summary-motion-paused *::after, .summary-page-paused .summary-is-active *, .summary-page-paused .summary-is-active *::after, .recording-modal:not([open]) .summary-is-active *, .recording-modal:not([open]) .summary-is-active *::after { animation-play-state: paused !important; }
@keyframes summary-edge-flow { to { transform: rotate(360deg); } }
@keyframes summary-scan { 0%,10% { transform: translateX(-100%); } 85%,100% { transform: translateX(100%); } }
@keyframes summary-voice { 50% { opacity: .45; transform: scaleY(.7); } }
.detail-tab-panel { min-width: 0; }
.detail-analysis-note { margin-bottom: 14px; }
.detail-analysis-note h3 { margin-bottom: 10px; }
.reprocess-note { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.reprocess-note .fine-print { margin: 6px 0 0; }
.reader-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; margin: 0 0 10px; }
.reader-actions .text-button { min-height: 36px; font-size: 13px; }
.reader-retry-dialog { margin: auto; }
.reader-retry-dialog .muted { line-height: 1.7; }
.reader-retry-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.transcript-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.transcript-heading h3 { font-size: 16px; }
.transcript { display: flex; flex-direction: column; gap: 11px; }
.transcript-line { display: flex; flex-direction: column; position: relative; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; gap: 9px; background: #122236; cursor: pointer; min-width: 0; }
.transcript-line:hover { background: #182b42; }
.transcript-line.current { border-color: color-mix(in srgb,var(--speaker-color) 65%,#294761); background: color-mix(in srgb,var(--speaker-color) 10%,#122236); }
.transcript-card-heading { display: flex; align-items: center; gap: 8px; width: 100%; }
.transcript-speaker { color: var(--speaker-color); font-size: 12px; font-weight: 550; margin: 0; }
.transcript-time { font: 11px/1.8 ui-monospace,SFMono-Regular,monospace; color: #b2c6dc; margin-left: auto; flex: none; }
.transcript-text { font-size: 14px; line-height: 1.9; color: #d9e5f3; }
.context-timeline { display: grid; gap: 0; position: relative; padding-left: 21px; }
.context-timeline::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 16px; width: 1px; background: linear-gradient(var(--accent),var(--line) 80%); opacity: .45; }
.context-location { display: flex; align-items: center; gap: 9px; position: relative; padding: 19px 0 12px; color: var(--text); font-size: 13px; font-weight: 550; }
.context-location::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: absolute; left: -19px; box-shadow: 0 0 0 4px var(--panel); }
.context-location .icon { width: 15px; height: 15px; color: var(--accent); }
.context-location small { margin-left: auto; color: var(--quiet); font-size: 11px; font-weight: 400; }
.context-interval { --context-color: #82d7ca; position: relative; margin-bottom: 15px; border: 1px solid color-mix(in srgb,var(--context-color) 28%,var(--line)); border-radius: 15px; overflow: clip; background: color-mix(in srgb,var(--context-color) 4%,var(--panel)); }
.context-interval[data-kind=sleep] { --context-color: #b6a3ed; }
.context-interval[data-kind=vehicle] { --context-color: #8fb9e3; }
.context-interval[data-kind=unknown] { --context-color: #a6b5c3; }
.context-interval-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 15px; border-bottom: 1px solid color-mix(in srgb,var(--context-color) 15%,transparent); background: color-mix(in srgb,var(--context-color) 5%,transparent); }
.context-activity-label { display: inline-flex; align-items: center; gap: 7px; color: var(--context-color); font-size: 12px; font-weight: 550; }
.context-activity-label .icon { width: 15px; height: 15px; }
.context-time-range { margin-left: auto; color: var(--muted); font: 11px/1.6 ui-monospace,SFMono-Regular,monospace; font-variant-numeric: tabular-nums; }
.context-transcripts { display: grid; gap: 0; padding: 0 14px; }
.context-transcripts .transcript-line { border: 0; border-radius: 0; background: transparent; padding: 14px 1px; border-bottom: 1px solid var(--line); }
.context-transcripts .transcript-line:last-child { border-bottom: 0; }
.context-transcripts .transcript-line:hover, .context-transcripts .transcript-line.current { background: color-mix(in srgb,var(--context-color) 6%,transparent); }
.context-multi-background { display: block; color: var(--quiet); font-size: 11px; font-weight: 400; line-height: 1.7; }
.context-evidence, .context-gap { color: var(--quiet); font-size: 11px; line-height: 1.75; margin: 0; padding: 11px 15px; }
.context-gap { border: 1px dashed var(--line); border-radius: 11px; margin-bottom: 15px; background: transparent; }
.context-timeline-footer { padding: 6px 0 15px; color: var(--quiet); font-size: 11px; line-height: 1.7; }
.context-load-more { width: 100%; margin: 5px 0 15px; min-height: 44px; }
@media(max-width:760px) { .context-timeline { padding-left: 16px; } .context-timeline::before { left: 3px; } .context-location::before { left: -16px; width: 6px; height: 6px; } .context-interval-heading { padding: 11px 12px; gap: 5px 10px; } .context-time-range { font-size: 10px; } .context-transcripts { padding: 0 11px; } .context-location { flex-wrap: wrap; } }
.untimed-transcript { padding: 17px; border-radius: 13px; border: 1px solid var(--line); background: #122236; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.untimed-transcript > p:last-child { margin-bottom: 0; }
.untimed-heading { font-size: 12px; color: var(--quiet); margin: 0 0 10px; }
.people-modal { width: min(690px,calc(100% - 32px)); }
.detail-speaker { margin-top: 14px; padding: 17px; border: 1px solid var(--line); border-left: 3px solid var(--speaker-color); border-radius: 13px; background: #14273a; }
.detail-speaker > strong { display: block; font-size: 15px; color: var(--speaker-color); font-weight: 550; }
.detail-speaker > small { display: block; font-size: 12px; color: var(--quiet); margin-top: 4px; line-height: 1.7; }
.speaker-raw-label { overflow-wrap: anywhere; }
.speaker-previews { margin-top: 12px; }
.preview-range-note { font-size: 11px; color: var(--quiet); margin: 0 0 7px; }
.speaker-clip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid #4b7480; border-radius: 9px; background: #183740; padding: 10px 12px; font: 12px/1.5 ui-monospace,SFMono-Regular,monospace; text-align: left; color: #cff6ed; min-height: 42px; }
.speaker-clip:hover, .speaker-clip.playing { border-color: var(--accent); background: #214a4c; color: var(--accent); }
.speaker-clip .icon { width: 14px; height: 14px; }
.speaker-more-clips { margin-top: 7px; }
.speaker-more-clips summary { font-size: 12px; line-height: 1.7; color: #b8d6df; cursor: pointer; padding: 7px 0; }
.speaker-clip-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#speaker-preview { width: 100%; margin-bottom: 16px; }
.speaker-source-preview { padding: 13px; border: 1px solid #3f6575; border-radius: 11px; background: #132d3c; margin: 0 0 18px; }
.speaker-preview-status, .audio-preview-status { font-size: 11px; line-height: 1.6; color: var(--accent); margin: 7px 0; }
.speaker-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.speaker-actions button { font-size: 12px; }
.speaker-person-selection { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; margin-top: 13px; }
.speaker-person-selection select { margin: 0; }
.speaker-person-selection button { border: 1px solid #67e8de46; border-radius: 9px; padding: 9px 12px; font-size: 12px; min-height: 42px; white-space: nowrap; background: #1b3f43; }
.audio-dock { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; flex: none; padding: 14px 17px; border-radius: 19px; border: 1px solid #87b7d255; background: linear-gradient(130deg,#54859732,#42628444),#152d40dd; box-shadow: inset 0 1px 0 #d4f4ff20,0 8px 22px #0004; backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); isolation: isolate; }
.audio-track { min-width: 0; }
.audio-track > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.audio-track strong { font-size: 12px; font-weight: 550; color: #dceaf5; }
.audio-track span { font: 11px ui-monospace,SFMono-Regular,monospace; font-variant-numeric: tabular-nums; color: #bfd0e2; }
.audio-track .audio-preview-status { font-family: inherit; font-size: 11px; line-height: 1.6; color: var(--accent); margin: 0 0 7px; }
.audio-track input[type=range] { width: 100%; height: 14px; min-height: 14px; accent-color: var(--accent); cursor: pointer; display: block; margin: 0; }
.audio-waveform-wrap, .audio-waveform-wrap canvas { height: 36px; width: 100%; }
.audio-waveform-wrap { margin: 5px 0 3px; }
.audio-waveform-wrap canvas { display: block; cursor: pointer; }
.review-illustration { margin: 0 0 28px; padding: 0; border: 0; background: transparent; }
.review-illustration img { display: block; width: min(100%,720px); height: auto; max-height: 440px; margin: 0 auto; object-fit: contain; background: transparent; border: 0; box-shadow: none; }
.audio-controls { display: flex; align-items: center; justify-content: center; gap: 11px; }
.audio-play { height: 50px; width: 50px; border: 1px solid #b8fff2; background: var(--accent); color: #0b3034; border-radius: 50%; display: flex; justify-content: center; align-items: center; padding: 0; flex: none; box-shadow: 0 1px 0 #fff5 inset; }
.audio-play .icon { height: 19px; width: 19px; fill: currentColor; stroke-width: 1; }
/* One continuous vector combines the direction and time step. The dock owns
   the blur; its controls add a quiet reflection without another blur layer. */
.audio-skip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #d2edf726; border-radius: 50%; background: linear-gradient(150deg,#efffff0d,#d1e9f202 65%),#9ec8dd08; color: var(--text); box-shadow: inset 0 1px 0 #f2ffff12,0 2px 7px #00121d12; transition: transform 140ms cubic-bezier(.2,.8,.2,1),background-color 140ms ease,border-color 140ms ease; }
.audio-skip .audio-skip-icon { width: 29px; height: 29px; stroke-width: 1.7; }
.audio-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-color: var(--accent); }
.audio-skip:not(:disabled):active { transform: scale(.94); background-color: #b5e4ee26; border-color: #e7ffff55; transition-duration: 0s; }
.audio-skip:disabled { opacity: .38; transform: none; box-shadow: none; }
@media (hover:hover) and (pointer:fine) { .audio-skip:not(:disabled):hover { background-color: #b5e4ee1a; border-color: #d8f6ff4d; } }
.audio-dock select { margin: 0; height: 40px; min-height: 40px; width: 58px; font-size: 12px; padding: 4px; background: #35557266; border-color: #90b4d33b; border-radius: 11px; }
.toast { position: fixed; bottom: calc(22px + env(safe-area-inset-bottom)); left: calc(50% + var(--sidebar)/2); transform: translateX(-50%); max-width: min(560px,calc(100% - 32px)); padding: 12px 18px; background: #1b3f46; border: 1px solid #5d9a9d; border-radius: 13px; font-size: 13px; line-height: 1.7; color: #d8fff3; box-shadow: 0 8px 30px #0006; z-index: 100; }
.toast.error { background: #3a252c; border-color: #8b515e; color: #ffd7d5; }
.toast.in-modal { left: 50%; }

@media (min-width: 1600px) {
  :root { --sidebar: 234px; }
  .main-content, .topbar { padding-left: 30px; padding-right: 30px; }
  .archive-layout { grid-template-columns: minmax(0,1fr) 300px; }
  .chat-layout { grid-template-columns: minmax(0,1fr) 280px; }
  .review-layout, .agent-layout { grid-template-columns: minmax(0,1fr) 320px; }
}
@media (max-width: 1200px) {
  :root { --sidebar: 204px; }
  .sidebar { padding: 20px 12px 16px; }
  .sidebar .brand { margin-left: 6px; }
  .nav-item.active::before { left: -12px; }
  .main-content, .topbar { padding-left: 20px; padding-right: 20px; }
  .workspace-footer { margin-left: 20px; margin-right: 20px; }
  .archive-layout { grid-template-columns: minmax(0,1fr) 238px; gap: 16px; }
  .chat-layout { grid-template-columns: minmax(0,1fr) 220px; gap: 16px; }
  .review-layout, .agent-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 16px; }
  .stat-card { padding: 14px; }
  .speakers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-heading .muted { max-width: 480px; }
}
@media (max-width: 1000px) {
  .archive-layout, .chat-layout, .review-layout, .agent-layout { grid-template-columns: minmax(0,1fr); }
  .day-context { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .context-foot { grid-column: 1/-1; }
  .chat-context { display: none; }
  .agent-activity { position: static; }
  .advice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-layout { grid-template-columns: minmax(0,1fr); }
  .agent-settings-panel, .settings-save { grid-column: auto; }
  .auth-story { padding: 30px; }
  .auth-panel { padding: 30px; }
  .auth-orbit { width: 300px; }
  .page-heading { align-items: flex-start; }
  .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 760px) {
  :root { --sidebar: 0px; }
  .sidebar { transform: translateX(-100%); width: 246px; transition: transform 180ms ease-out; box-shadow: 12px 0 40px #0007; padding-top: max(22px,env(safe-area-inset-top)); }
  .sidebar.open { transform: translateX(0); }
  .sidebar .brand { margin-bottom: 22px; }
  .sidebar-close { display: flex; position: absolute; top: max(20px,env(safe-area-inset-top)); right: 8px; width: 32px; height: 38px; }
  .nav-item { min-height: 46px; font-size: 14px; }
  .main-shell { width: 100%; margin-left: 0; }
  .mobile-menu { display: flex; margin-left: -7px; }
  .topbar { height: calc(52px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: 16px; padding-right: 16px; justify-content: normal; }
  .topbar-actions { margin-left: auto; gap: 5px; }
  .connection-state { display: none; }
  .breadcrumb { gap: 8px; font-size: 12px; }
  .breadcrumb > span, .breadcrumb > .icon { display: none; }
  .main-content { padding: 15px 16px 25px; }
  .page-heading { gap: 12px; margin-bottom: 15px; flex-direction: column; align-items: stretch; min-height: 0; }
  .page-heading h1 { font-size: 24px; }
  .page-heading .muted { font-size: 13px; line-height: 1.65; max-width: none; margin-top: 5px; }
  .heading-actions { justify-content: flex-start; flex-wrap: wrap; gap: 9px; }
  .heading-actions .button, .page-heading > .button { align-self: flex-start; }
  .date-picker { height: 42px; }
  .date-picker input[type=date] { font-size: 13px; width: 138px; }
  .button { min-height: 42px; padding: 9px 13px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 20px; }
  .stat-card { padding: 14px; }
  .stat-top { font-size: 11px; gap: 7px; }
  .stat-value { font-size: 25px; }
  .stat-caption { font-size: 11px; line-height: 1.6; }
  .archive-layout { gap: 18px; }
  .recording-row { grid-template-columns: 41px minmax(0,1fr); gap: 14px; }
  .timeline-time { font-size: 11px; padding-top: 16px; }
  .timeline-time::after { right: -7px; top: 22px; }
  .recording-row::before { left: 45px; }
  .recording-card { padding: 14px; border-radius: 12px; }
  .recording-card h3 { font-size: 15px; }
  .recording-excerpt { font-size: 13px; }
  .recording-card-bottom { margin-top: 11px; }
  .recording-meta { font-size: 11px; gap: 8px; }
  .recording-status, .recording-duration { font-size: 11px; }
  .day-context { grid-template-columns: minmax(0,1fr); }
  .panel { padding: 18px; }
  .context-foot { grid-column: auto; }
  .workspace-footer { margin: 0 16px calc(15px + env(safe-area-inset-bottom)); font-size: 10px; }
  .workspace-footer > span:last-child { display: none; }
  .chat-panel { min-height: 360px; height: calc(100dvh - 208px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 0; }
  .chat-welcome { margin: 15px auto; }
  .chat-welcome h2 { font-size: 20px; }
  .chat-messages { padding: 19px 16px; }
  .chat-composer { padding: 11px 13px; }
  .chat-composer textarea { font-size: 16px; }
  .chat-composer p { font-size: 10px; }
  .send-button { right: 21px; top: 19px; }
  .message, .markdown { font-size: 14px; }
  .reflection-panel { padding: 19px; }
  .advice-grid { grid-template-columns: minmax(0,1fr); }
  .speakers-grid { gap: 11px; }
  .speaker-card { padding: 18px; }
  .speaker-delete { right: 8px; top: 10px; }
  .speaker-card .owner-badge { margin: 5px 0 0; display: table; }
  .settings-jump { gap: 7px; margin-bottom: 15px; }
  .settings-jump a { padding: 7px 10px; min-height: 36px; }
  .settings-panel { padding: 19px; scroll-margin-top: calc(66px + env(safe-area-inset-top)); }
  .settings-panel input:not([type=checkbox]), .settings-panel select, .auth-box input, .modal form input:not([type=checkbox]), .modal form select, .speaker-person-selection select { font-size: 16px; min-height: 44px; }
  .field-row { gap: 12px; }
  .settings-save { flex-direction: column; align-items: stretch; }
  .bark-actions { gap: 9px; }
  .bark-actions > .button { flex: 1; min-width: 125px; padding: 10px; font-size: 12px; }
  .bark-actions .text-button { margin-left: 0; }
  .admin-panel { flex-direction: column; align-items: flex-start; gap: 13px; }
  .agent-layout { gap: 0; }
  .agent-panel { margin-bottom: 18px; }
  .agent-activity { order: 2; }
  .agent-actions button { flex: 1; font-size: 12px; white-space: normal; }
  .section-note { font-size: 10px; }
  .auth-screen { grid-template-columns: 1fr; grid-template-rows: 205px 1fr; }
  .auth-story { min-height: 0; height: 205px; padding: 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-brand { font-size: 16px; }
  .auth-brand .brand-mark { width: 34px; height: 34px; }
  .auth-orbit { width: 205px; left: auto; right: -30px; top: 16px; opacity: .62; transform: none; }
  .auth-message { padding: 0; margin-top: 20px; max-width: 245px; }
  .auth-message .eyebrow { display: none; }
  .auth-message h1 { font-size: 24px; line-height: 1.3; margin-bottom: 6px; }
  .auth-message > p:last-child { font-size: 12px; max-width: 235px; line-height: 1.7; }
  .auth-foot { display: none; }
  .auth-panel { padding: 27px 23px 40px; align-items: flex-start; }
  .auth-box h2 { font-size: 25px; }
  .auth-box form { margin-top: 22px; }
  .modal { border-radius: 18px; padding: 20px; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .modal-heading h2 { font-size: 20px; }
  .recording-modal { width: calc(100% - 14px); padding: 17px 13px 13px; }
  .recording-modal .modal-heading { margin-bottom: 13px; }
  .detail-tabs { margin-bottom: 13px; }
  .detail-tabs button { min-height: 40px; font-size: 13px; }
  .detail-body { padding-bottom: 14px; }
  .conversation-map { --map-label-width: 118px; --map-gap: 8px; padding: 13px; margin-bottom: 14px; }
  .conversation-map .section-heading { min-height: 28px; gap: 8px; }
  .conversation-map h3, .detail-summary h3 { font-size: 14px; gap: 6px; }
  .conversation-map .text-button { font-size: 11px; }
  .conversation-map .text-button .icon { width: 13px; height: 13px; }
  .map-axis { font-size: 10px; }
  .map-speaker-label { font-size: 11px; gap: 5px; grid-template-columns: 6px minmax(0,1fr) auto; }
  .map-speaker-label > strong { font-size: 10px; }
  .map-speaker-label .speaker-dot { width: 6px; height: 6px; }
  .map-person-name { font-size: 10px; }
  .detail-summary { padding: 15px; margin-bottom: 17px; }
  .detail-summary .quiet-badge { font-size: 10px; }
  .detail-summary #recording-summary-generate { font-size: 11px; }
  .transcript-heading { gap: 9px; }
  .transcript-heading h3 { font-size: 15px; }
  .transcript-heading .inline-note { font-size: 11px; max-width: 148px; text-align: right; line-height: 1.5; }
  .transcript-line { padding: 15px; gap: 9px; }
  .transcript-text { font-size: 14px; }
  .transcript-time { font-size: 10px; }
  .audio-dock { grid-template-columns: 1fr; padding: 12px 14px; gap: 10px; border-radius: 18px; }
  .audio-controls { gap: 15px; }
  .audio-play { height: 48px; width: 48px; }
  .audio-skip { min-width: 44px; height: 44px; }
  .audio-track strong { font-size: 12px; }
  .audio-track span { font-size: 11px; }
  .people-modal { width: calc(100% - 20px); padding: 20px 15px; }
  .detail-speaker { padding: 15px; }
  .speaker-person-selection { gap: 8px; }
  .speaker-person-selection button { padding: 10px; font-size: 11px; }
  .toast { left: 50%; bottom: calc(17px + env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
  .main-content { padding-left: 13px; padding-right: 13px; }
  .stat-card { padding: 12px; }
  .recording-row { grid-template-columns: 36px minmax(0,1fr); gap: 13px; }
  .recording-row::before { left: 40px; }
  .timeline-time { font-size: 10px; }
  .recording-card { padding: 13px; }
  .recording-status, .recording-duration { font-size: 10px; }
  .speakers-grid, .field-row { grid-template-columns: minmax(0,1fr); }
  .conversation-map { --map-label-width: 107px; padding-left: 11px; padding-right: 11px; }
  .conversation-map .section-heading .text-button { font-size: 10px; }
  .map-speaker-label { font-size: 10px; }
  .speaker-person-selection button .icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .spinner { border-color: var(--accent); }
  .map-playhead { will-change: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  .modal::backdrop { backdrop-filter: none; }
  .audio-dock { background: #1c354d; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #d4e1ef; --quiet: #bfd0e1; --line: #7692af; }
  .recording-card, .panel, .stat-card, .audio-dock { border-color: #8da7c0; }
  .form-error { border-color: var(--red); }
}

/* Clock-hour projection: fixed compact rows, source detail loaded on demand. */
.hour-row .timeline-time{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.2;padding-top:13px}
.hour-modal{width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto}
.hour-recordings{display:grid;gap:14px;margin-top:18px}
.hour-source{min-width:0;padding:18px}
.hour-source h3{font-size:15px;overflow-wrap:anywhere}
.hour-transcript{width:100%;display:grid;gap:5px;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);color:var(--text);padding:12px 0;line-height:1.7;font:inherit;cursor:pointer}
.hour-transcript small{color:var(--muted);font-size:12px}
.hour-transcript span{overflow-wrap:anywhere}
.hour-transcript:hover span{color:var(--accent)}
.hour-previous:not(:empty){padding:18px 0;border-top:1px solid var(--line);margin-top:18px}
.unplaced-recordings{margin:26px 0 0 70px;border-top:1px solid var(--line);padding-top:18px}
.unplaced-card{width:100%;background:transparent;border:0;border-top:1px solid var(--line);padding:14px 0;display:flex;align-items:center;gap:10px;text-align:left;color:var(--text);font:inherit;cursor:pointer}
.unplaced-card strong{flex:1;font-size:13px;overflow-wrap:anywhere}.unplaced-card .muted{white-space:nowrap;font-size:12px}
@media(max-width:760px){.hour-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 20px)}.hour-source{padding:14px}.hour-modal .section-heading{flex-wrap:wrap}.unplaced-recordings{margin-left:0}.hour-row .timeline-time{font-size:20px}}

/* Health has its own date-scoped surface. The graph uses a few source paths,
   rather than thousands of animated sample nodes or a repainting canvas. */
.health-timeline-panel { margin-bottom: 22px; padding: 22px; background: radial-gradient(ellipse at 95% 0,#67e8de08,transparent 55%),var(--panel); }
.health-chart-heading { align-items: center; gap: 18px; }
.date-scope { display:flex; align-items:center; gap:8px; min-width:0; }
.range-picker select { min-height:42px; max-width:148px; padding:8px 28px 8px 12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--text); font-size:13px; }
.range-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.range-pagination .fine-print { text-align:center; }
.range-review { padding:18px 0; border-bottom:1px solid var(--line); }
.range-review:first-child { padding-top:0; }
.health-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.health-metric-card { min-width:0; padding:15px 14px; border:1px solid var(--line); border-radius:15px; background:var(--panel-soft); contain:layout style; }
.health-metric-card .section-heading { margin-bottom:6px; gap:8px; }
.health-metric-card .section-heading button { font-size:15px; font-weight:600; }
.health-metric-card .quiet-badge { font-size:10px; padding:2px 7px; }
.health-metric-card .health-chart { min-height:0; }
.health-metric-card .fine-print { margin:6px 0 0; font-size:10px; }
.health-mini-empty { display:flex; align-items:center; min-height:150px; color:var(--quiet); font-size:12px; padding:18px; }
.health-raw-value { max-width:500px; overflow:auto; font:11px/1.5 ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:760px) { .date-scope{flex-wrap:wrap;gap:6px;} .range-picker select{font-size:12px;min-height:40px;} .heading-actions{flex-wrap:wrap;} .health-overview-grid{grid-template-columns:minmax(0,1fr);} .range-pagination{flex-wrap:wrap;gap:8px;} .range-pagination .fine-print{order:3;flex:1 0 100%;font-size:11px;} .health-metric-card{padding:13px 10px;} }
.health-metric-picker { width: min(230px,48%); flex: none; }
.health-metric-picker select { margin: 0; min-height: 44px; }
.health-chart-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 20px; }
.health-chart-summary > div { display: flex; flex-direction: column; gap: 2px; }
.health-chart-summary strong { font-size: 23px; font-weight: 550; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.health-chart-summary > div:nth-child(2) strong { color: var(--muted); font-size: 17px; }
.health-chart-summary > .quiet-badge { margin-left: auto; }
.health-chart-meta { display: flex; align-items: center; gap: 12px; min-height: 28px; margin-top: 16px; color: var(--quiet); font-size: 11px; }
.health-chart-meta > span:first-child { color: var(--muted); }
.health-chart-meta > span:nth-child(2) { margin-left: auto; }
.health-updating { display: inline-flex; align-items: center; gap: 7px; }
.health-updating .spinner { width: 12px; height: 12px; }
.health-chart-wrap { min-height: 240px; border-top: 1px solid var(--line); }
.health-chart { display: block; width: 100%; height: auto; min-height: 220px; overflow: visible; cursor: crosshair; border-radius: 8px; }
.health-chart-grid { stroke: var(--line); stroke-width: 1; }
.health-chart-axis { fill: var(--quiet); font-size: 12px; font-variant-numeric: tabular-nums; }
.health-chart-cursor { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.health-chart-marker { fill: var(--text); stroke: var(--bg); stroke-width: 2; pointer-events: none; }
.health-chart-empty { min-height: 240px; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 auto; max-width: 480px; padding: 32px; color: var(--muted); font-size: 14px; }
.health-point-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 44px; padding: 10px 12px; background: #07111d70; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 12px; }
.health-point-detail strong { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.health-source-legend { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 0; margin: 14px 0; list-style: none; }
.health-source-item { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.health-source-swatch { width: 18px; height: 3px; border-radius: 2px; flex: none; }
.health-dose-charts { display: grid; gap: 24px; padding: 18px 0 4px; }
.health-dose-group { min-width: 0; }
.health-dose-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 0 8px; }
.health-dose-heading strong { font-size: 15px; font-weight: 550; overflow-wrap: anywhere; }
.health-dose-heading > span { color: var(--muted); font-size: 12px; }
.health-dose-group + .health-dose-group { border-top: 1px solid var(--line); padding-top: 20px; }
.health-metric-card .health-dose-charts { gap: 12px; padding-top: 12px; }
.health-metric-card .health-dose-heading { padding: 0; }
.health-metric-card .health-dose-heading strong { font-size: 13px; }
.health-metric-card .health-dose-heading > span { font-size: 10px; }
.health-dose-chart { min-height: 0; }
/* Sleep uses native interval geometry, with one independently selected source.
   No animated canvas, perpetual timers, or synthetic score calculation. */
.sleep-chart-shell { min-width: 0; padding: 24px 4px 10px; }
.sleep-summary-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 10px 20px; }
.sleep-summary-copy { display: grid; gap: 7px; min-width: 0; }
.sleep-eyebrow { color: var(--muted); font-size: 13px; }
.sleep-duration { color: var(--text); font-size: clamp(25px,3.2vw,42px); font-weight: 580; letter-spacing: -.045em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sleep-summary-date { color: var(--quiet); font-size: 12px; font-variant-numeric: tabular-nums; }
.sleep-stage-ring { flex: none; width: 136px; height: 136px; overflow: visible; }
.sleep-ring-value { fill: var(--text); font-size: 25px; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sleep-ring-caption { fill: var(--muted); font-size: 10px; }
.sleep-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 22px; padding: 15px 10px 22px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 11px; }
.sleep-controls label { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.sleep-source-picker { max-width: min(360px,60vw); min-height: 40px; width: auto; margin: 0; padding: 6px 30px 6px 12px; color: var(--text); border: 1px solid var(--line); border-radius: 12px; background: #d1e9ff09; font-size: 12px; }
.sleep-stage-chart { display: block; width: 100%; height: auto; min-height: 0; overflow: visible; touch-action: pan-y; }
.sleep-stage-label { font-size: 16px; font-weight: 550; }
.sleep-stage-total { fill: var(--text); font-size: 16px; font-weight: 550; font-variant-numeric: tabular-nums; }
.sleep-stage-block { opacity: .94; stroke: #ffffff24; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: crosshair; }
.sleep-stage-block.is-selected { stroke: var(--text); stroke-width: 2; opacity: 1; }
.sleep-stage-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 8px; }
.sleep-chart-scroller { overflow-x: auto; padding: 3px 3px 9px; scrollbar-color: var(--line-light) transparent; }
.sleep-chart-scroller .sleep-stage-chart { min-width: 340px; }
.sleep-stage-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 14px 10px 10px; color: var(--muted); font-size: 11px; }
.sleep-stage-legend li { display: inline-flex; align-items: center; gap: 7px; }
.sleep-stage-legend li > span { display: block; width: 9px; height: 9px; border-radius: 3px; }
.sleep-other-stages { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 11px; margin: 8px 10px; }
.sleep-reading-note { color: var(--quiet); font-size: 11px; line-height: 1.65; margin: 9px 10px; }
.sleep-score-info { display: block; color: var(--quiet); font-size: 10px; margin: 6px 10px; cursor: help; }
.sleep-page-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; margin: 14px 10px; }
.sleep-page-navigation button { flex: none; min-height: 40px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #beddf009; color: var(--text); font: inherit; }
.sleep-page-navigation button:active { background: #beddf024; }
.sleep-page-navigation button:disabled { opacity: .35; cursor: default; }
.sleep-overview-caption { margin: 0 10px 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.sleep-overview-back { min-height: 40px; margin: 10px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: #beddf009; color: var(--text); font: inherit; font-size: 12px; }
.sleep-compact-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; font-size: 11px; line-height: 1.5; }
.sleep-compact { padding: 0; }
.sleep-compact .sleep-summary-header { padding: 0 0 10px; gap: 8px; }
.sleep-compact .sleep-duration { font-size: 21px; }
.sleep-compact .sleep-eyebrow { font-size: 10px; }
.sleep-compact .sleep-summary-date { font-size: 10px; }
.sleep-compact .sleep-stage-ring { width: 82px; height: 82px; }
.sleep-compact .sleep-stage-label,.sleep-compact .sleep-stage-total { font-size: 14px; }
@media(max-width:760px) {
  .sleep-chart-shell { padding: 18px 0 6px; }
  .sleep-summary-header { padding: 0 2px 16px; gap: 12px; }
  .sleep-stage-ring { width: 104px; height: 104px; }
  .sleep-controls { padding-left: 2px; padding-right: 2px; }
  .sleep-stage-chart:not(.sleep-compact .sleep-stage-chart) { min-width: 0; }
  .sleep-page-navigation { flex-wrap: wrap; }
  .sleep-page-navigation > span { order: 3; flex-basis: 100%; text-align: center; }
  .sleep-compact { padding: 0; }
}
.health-page-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.health-page-actions .button,.health-page-actions .text-button { min-height: 44px; }
#page-health .health-panel { margin: 0; }
#health-chart-note { margin-top: 12px; }
@media(max-width:760px) {
  .health-timeline-panel { padding: 16px 12px; }
  .health-chart-heading { gap: 10px; }
  .health-chart-heading .eyebrow { max-width: 170px; font-size: 8px; }
  .health-chart-summary { gap: 12px 20px; }
  .health-chart-summary strong { font-size: 21px; }
  .health-chart-summary > .quiet-badge { margin-left: 0; }
  .health-chart-summary > div:nth-child(2) strong { font-size: 15px; }
  .health-chart { min-height: 190px; }
  .health-chart-wrap { min-height: 190px; }
  .health-chart-empty { min-height: 190px; padding: 24px 14px; }
  .health-chart-meta { flex-wrap: wrap; }
}
@media(prefers-contrast:more) { .health-chart-grid { stroke: var(--line-light); } .health-chart-axis { fill: var(--text); } }
@media(prefers-reduced-motion:reduce) { .health-updating .spinner { animation: none; } }

/* A reading surface: actual capture time, quiet context outlines and a player
   that remains reachable while the transcript scrolls underneath. */
.reader-modal { width: min(1020px,calc(100vw - 40px)); height: min(900px,calc(100dvh - 40px)); max-height: calc(100dvh - 40px); padding: 26px 30px 18px; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 100% 0%,#19394b38,transparent 52%),#0c1824; }
.reader-modal .modal-heading { margin-bottom: 4px; }
.reader-modal .modal-heading h2 { font-size: 25px; font-weight: 570; letter-spacing: -.035em; }
.reader-capture-range { margin: 5px 0 14px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.reader-tabs { justify-content: flex-start; gap: 34px; padding: 0; margin: 7px 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.reader-tabs button { flex: none; min-height: 45px; padding: 0 5px 12px; border-radius: 0; position: relative; color: var(--quiet); font-size: 14px; font-weight: 500; }
.reader-tabs button[aria-selected=true] { background: transparent; box-shadow: none; color: var(--text); }
.reader-tabs button[aria-selected=true]::after { position: absolute; content: ''; left: 3px; right: 3px; height: 2px; bottom: -1px; border-radius: 2px; background: var(--accent); }
.hour-reader-body,.reader-modal .detail-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 30px 0; scrollbar-width: thin; scrollbar-color: #45606e transparent; }
.reader-section-title { font-size: 17px; font-weight: 550; margin: 8px 0 18px; }
.reader-points { line-height: 1.95; font-size: 16px; color: var(--muted); margin-bottom: 28px; }
.reader-points-list { padding-left: 1.15em; margin: 0; }
.reader-points-list > li { padding-left: .2em; margin: 0 0 .8em; }
.reader-source-points + .reader-source-points { margin-top: 20px; }
.reader-source-points > .text-button { margin-bottom: 12px; }
.reader-source-points > .reader-points { margin-bottom: 0; }
.reader-modal .transcript-heading { margin: 0 0 12px; }
.reader-modal .transcript-heading:has(.inline-note:empty),.reader-capture-range:empty { display: none; }
.reader-modal .reading-transcript { display: block; }
.reading-transcript .context-timeline { padding: 0; display: block; }
.reading-transcript .context-timeline::before,.reading-transcript .context-location::before { display: none; }
.reading-transcript .context-location { gap: 10px; padding: 14px 4px; font-weight: 450; color: var(--muted); }
.reading-transcript .context-location::after { content: ''; height: 1px; background: var(--line); flex: 1; order: 2; min-width: 20px; }
.reading-transcript .context-location small { order: 3; margin-left: 0; max-width: 48%; text-align: right; font-size: 10px; color: var(--quiet); }
.reading-transcript .context-location .icon { color: var(--muted); width: 16px; height: 16px; }
.reading-transcript .context-interval { margin: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.reading-transcript .context-interval-heading { padding: 14px 4px 6px; background: transparent; border: 0; color: var(--muted); }
.reading-transcript .context-activity-label { color: var(--muted); font-size: 12px; font-weight: 450; }
.reading-transcript .context-interval[data-kind=unknown] { border: 0; border-radius: 0; }
.reading-transcript .context-interval[data-kind=unknown] > .context-interval-heading { display: none; }
.reading-transcript .context-transcripts { padding: 0; display: block; }
.reading-transcript .context-interval[data-kind=unknown] .context-transcripts { padding: 0; }
.reading-transcript .transcript-line { display: grid; grid-template-columns: 70px minmax(0,1fr); column-gap: 17px; row-gap: 4px; padding: 17px 10px; min-height: 60px; border: 0; border-radius: 9px; background: transparent; margin: 0; text-align: left; align-items: start; transition: background-color 160ms ease; }
.reading-transcript .transcript-card-heading { display: contents; }
.reading-transcript .speaker-dot { display: none; }
.reading-transcript .transcript-time { grid-column: 1; grid-row: 1; padding-top: 5px; color: var(--quiet); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; font-family: ui-monospace,SFMono-Regular,monospace; }
.reading-transcript .transcript-text { grid-column: 2; grid-row: 1; color: var(--text); font-size: 18px; line-height: 1.75; letter-spacing: 0; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
.reading-transcript .transcript-speaker { grid-column: 2; grid-row: 2; font-size: 10px; color: var(--speaker-color,var(--quiet)); font-weight: 400; opacity: .8; }
.reading-transcript .context-multi-background { grid-column: 2; font-size: 10px; }
.reading-transcript .transcript-line:hover { background: #d8f8fb06; }
.reading-transcript .transcript-line.current { background: #6ce5d910; box-shadow: inset 2px 0 var(--accent); }
.reading-transcript .transcript-line.current .transcript-text { color: #dbfff5; }
.reading-transcript .context-evidence { font-size: 10px; padding: 8px 15px; opacity: .8; }
.reading-paragraph { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: start; gap: 18px; padding: 11px 4px; }
.reading-paragraph-time { color: var(--quiet); padding-top: .3em; font: 12px/1.75 ui-monospace,SFMono-Regular,monospace; font-variant-numeric: tabular-nums; letter-spacing: .015em; white-space: nowrap; }
.reading-paragraph-content { min-width: 0; }
.reading-paragraph-content { position: relative; }
.correction-editable { cursor: pointer; }
.reading-paragraph-time[role=button] { cursor: pointer; border-radius: 4px; }
.reading-paragraph-time[role=button]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reading-correction-edit { position: absolute; right: 0; top: -15px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--accent); font-size: 11px; line-height: 1.5; opacity: 0; pointer-events: none; }
.reading-paragraph:hover .reading-correction-edit,.reading-paragraph:focus-within .reading-correction-edit { opacity: 1; pointer-events: auto; }
.reading-correction-edit:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.correction-untimed-text { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; line-height: inherit; text-align: left; white-space: pre-wrap; cursor: pointer; }
.reading-gap { grid-template-columns: max-content minmax(0,1fr); min-height: 36px; }
.reading-gap .reading-paragraph-time { padding-top: 0; font-size: 11px; }
.reading-paragraph-text { color: var(--text); font-size: 18px; line-height: 1.75; font-weight: 400; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reading-speaker-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; font-size: 12px; line-height: 1.4; }
.reading-speaker-marker { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 2px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: inherit; font-weight: 550; white-space: nowrap; cursor: pointer; }
.reading-speaker-marker:hover { color: var(--text); background: color-mix(in srgb,var(--speaker-color,var(--accent)) 12%,transparent); }
.reading-speaker-marker:focus-visible { outline: 2px solid var(--speaker-color,var(--accent)); outline-offset: 2px; }
.reading-speaker-marker:disabled { cursor: default; opacity: 1; }
.reading-known-voice { color: color-mix(in srgb,var(--speaker-color,var(--accent)) 60%,var(--text)); }
.reading-speaker-footer { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; line-height: 1.4; }
.reading-speaker-footer .reading-speaker-marker { color: color-mix(in srgb,var(--speaker-color,var(--accent)) 60%,var(--text)); }
.reading-speaker-footer .reading-speaker-dot { background: currentColor; }
.speaker-phrase-modal { width: min(500px,calc(100vw - 28px)); padding: 22px; }
.speaker-phrase-modal form { display: grid; gap: 18px; }
.speaker-phrase-heading { display: grid; grid-template-columns: 62px minmax(0,1fr) 40px; align-items: center; gap: 8px; }
.speaker-phrase-heading h2 { margin: 0; text-align: center; font-size: 18px; }
.speaker-phrase-heading > .text-button { justify-self: start; font-weight: 650; }
.speaker-phrase-heading > .icon-button { justify-self: end; width: 36px; height: 36px; }
.speaker-phrase-text { margin: 0; color: var(--text); line-height: 1.8; overflow-wrap: anywhere; max-height: 200px; overflow: auto; }
.speaker-phrase-status { min-height: 20px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.speaker-phrase-choices { display: grid; gap: 16px; }
.speaker-phrase-modal .fine-print { margin: 0; }
.reading-speaker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--speaker-color); flex: none; }
.reading-unknown-voice { color: inherit; text-decoration: underline dotted color-mix(in srgb,var(--quiet) 55%,transparent); text-underline-offset: .2em; text-decoration-thickness: .045em; }
.transcript-coarse-fragment,.transcript-punctuation { color: inherit; white-space: pre-wrap; }
.reading-transcript .transcript-line.transcript-fragment { display: inline; width: auto; min-height: 0; padding: 3px 0; border: 0; border-radius: 4px; margin: 0; color: inherit; font: inherit; text-align: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.reading-transcript .transcript-fragment .transcript-text { font: inherit; color: inherit; white-space: pre-wrap; }
.reading-transcript .transcript-fragment:disabled { opacity: 1; cursor: text; }
.reading-transcript .transcript-fragment.current { color: #dbfff5; background: #6ce5d91c; box-shadow: 0 2px 0 #6ce5d977; }
.reading-transcript .transcript-fragment:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(max-width:760px) { .reading-paragraph { grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 10px 1px; } .reading-paragraph-time { font-size: 11px; } .reading-paragraph-text { font-size: 17px; line-height: 1.8; } }
.reader-modal .audio-dock { margin-top: 10px; border-radius: 24px; padding: 16px 20px; border-color: #86b8c447; background: linear-gradient(140deg,#a5d8df16,#28465744),#152b37df; box-shadow: inset 0 1px 0 #e8ffff1a,0 12px 32px #0004; }
.reader-modal .audio-track strong { font-weight: 550; font-size: 13px; }
.reader-modal .audio-play { width: 52px; height: 52px; background: #d5f7ec; color: #102b27; border: 0; }
.reader-modal .audio-preview-status { font-size: 10px; min-height: 15px; margin-bottom: 2px; }
.audio-track > .reader-audio-ranges { display: block; height: 4px; position: relative; background: #4f6271; border-radius: 3px; margin: 6px 7px -10px; overflow: hidden; }
.reader-audio-ranges i { position: absolute; height: 4px; min-width: 1px; background: var(--accent); border-radius: 3px; }
.reader-audio-ranges i.unavailable { background: #73838b; }
#hour-audio-seek { appearance: none; position: relative; background: transparent; height: 16px; min-height: 16px; }
#hour-audio-seek::-webkit-slider-runnable-track { height: 4px; background: transparent; border: 0; }
#hour-audio-seek::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--accent); }
#hour-audio-seek::-moz-range-track, #hour-audio-seek::-moz-range-progress { height: 4px; background: transparent; border: 0; }
#hour-audio-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent); }
#hour-audio-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reader-modal input[type=range] { accent-color: var(--accent); }
.reader-modal .hour-source { border: 0; background: transparent; border-radius: 0; padding: 0; margin-bottom: 22px; box-shadow: none; }
.reader-modal .hour-source > .fine-print { font-size: 10px; }
@media(max-width:760px) {
  .reader-modal { width: calc(100vw - 12px); height: calc(100dvh - 18px); max-height: calc(100dvh - 18px); border-radius: 25px; padding: 20px 16px 12px; }
  .reader-modal .modal-heading h2 { font-size: 21px; }
  .reader-capture-range { font-size: 11px; margin-bottom: 6px; }
  .reader-tabs { gap: 32px; margin-bottom: 10px; }
  .reader-tabs button { font-size: 13px; min-height: 42px; }
  .reading-transcript .transcript-line { grid-template-columns: 56px minmax(0,1fr); gap: 4px 9px; padding: 15px 3px; }
  .reading-transcript .transcript-time { font-size: 9px; padding-top: 5px; }
  .reading-transcript .transcript-text { font-size: 16px; line-height: 1.9; }
  .reading-transcript .context-transcripts { padding: 0 9px; }
  .reading-transcript .context-location { flex-wrap: nowrap; gap: 7px; font-size: 11px; }
  .reading-transcript .context-location small { max-width: 43%; font-size: 9px; }
  .reader-modal .audio-dock { padding: 11px 15px; border-radius: 23px; gap: 7px; }
  .reader-modal .audio-controls { justify-content: center; gap: 24px; }
  .reader-modal .audio-play { width: 48px; height: 48px; }
  .reader-modal .audio-skip { min-width: 44px; }
}
@media(prefers-reduced-transparency:reduce) { .reader-modal .audio-dock { background: #172f3d; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media(prefers-reduced-motion:reduce) { .reading-transcript .transcript-line { transition: none; } }

/* Shared material system. Only floating chrome samples the background;
   content cards use a static reflection, so long archives do not stack blur. */
body { background: radial-gradient(ellipse at 68% 0, #233c542e, transparent 58%), var(--bg); }
.main-shell { background: transparent; }
.sidebar { inset: 12px auto 12px 12px; width: calc(var(--sidebar) - 12px); padding: 22px 12px 15px; border: 1px solid var(--glass-edge); border-radius: 24px; background: linear-gradient(155deg,#c6e5ff0b,transparent 40%),var(--glass-chrome); box-shadow: var(--glass-shadow); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }
.sidebar .brand { margin: 0 4px 25px; }
.sidebar-label { margin-left: 11px; font-size: 10px; letter-spacing: .06em; }
.navigation { gap: 7px; }
.nav-item { border-radius: 14px; min-height: 46px; color: #c0cfdf; }
.nav-item.active { color: #b5fff0; background: linear-gradient(125deg,#8fe9dc29,#b5d9ff0b); border-color: #b7f8ef40; box-shadow: inset 0 1px 0 #e2fff52b,0 4px 14px #07111b30; }
.nav-item.active::before { display: none; }
.nav-item:hover { background-color: #d9f1ff0a; }
.account { border-top-color: var(--glass-edge); padding-top: 13px; }
.avatar { border-radius: 50%; background: linear-gradient(145deg,#79c0be30,#a29bce25); border-color: #c5e5f126; }
.topbar { background: #101d2cba; border-bottom-color: #e3f4ff0e; backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
.topbar .icon-button { border-radius: 50%; border: 1px solid #d8eeff17; background: #d0e8ff09; box-shadow: inset 0 1px 0 #ffffff0c; }
.connection-state { padding: 4px 10px; border-radius: 999px; background: #c8ebff08; border-color: #daefff17; }
.connection-state i { box-shadow: 0 0 0 3px #67e8de12; }
.main-content { padding-top: 20px; }
.page-heading { margin-bottom: 18px; }
.page-heading .muted { margin-top: 6px; }
.panel,.stat-card,.recording-card { border-color: var(--glass-edge); background: linear-gradient(145deg,#d5ecff0b,transparent 48%),linear-gradient(160deg,#172637f5,#101c2bf5); box-shadow: var(--glass-shadow); }
.panel { border-radius: 22px; }
.stat-card { border-radius: 19px; }
.stat-card:first-child { border-color: #9ceede38; background: linear-gradient(135deg,#95e7df15,#afcbef06),#142b35; }
.stat-value { letter-spacing: -.035em; }
.recording-card { border-radius: 20px; padding: 18px 20px; }
.recording-card:hover { background: linear-gradient(145deg,#dbf4ff10,transparent 60%),#172a3b; border-color: #b9dfed46; }
.recording-card:active { box-shadow: inset 0 1px 0 #dffaff20; }
.recording-card-bottom { border-top-color: #d2e9ff10; }
.quiet-badge { border-radius: 999px; padding: 4px 10px; border-color: #c3dff223; background: #c0d9f00b; }
.button { min-height: 42px; border-radius: 999px; padding: 9px 17px; box-shadow: inset 0 1px 0 #e5f8ff12; }
.button.primary { color: #092d2b; background: linear-gradient(145deg,#b3fff2,#72e3d7); border-color: #d7fff9b3; box-shadow: inset 0 1px 0 #ffffff80,0 4px 16px #4fdcc411; }
.button.secondary { background: linear-gradient(150deg,#dcefff14,#cee7ff04),#1c2c3d; border-color: #d4eeff27; }
.button.secondary:hover { background: linear-gradient(150deg,#dcefff20,#cee7ff08),#22384b; border-color: #c8e8ff45; }
.icon-button { border-radius: 50%; }
.date-picker,.range-picker select { border-radius: 999px; background: #c8e0ff0b; border-color: #cbe7ff27; box-shadow: inset 0 1px 0 #e8f7ff0c; }
.date-picker { padding-left: 13px; padding-right: 13px; }
.range-picker select { margin-top: 0; }
input:not([type=checkbox]):not([type=range]),select,textarea { border-color: #beddf22a; border-radius: 13px; background-color: #080f1b85; }
input:not([type=checkbox]):focus,select:focus,textarea:focus { border-color: #96ecdd99; box-shadow: 0 0 0 3px #67e8de0d; }
.settings-jump { gap: 9px; }
.settings-jump a { border-radius: 999px; padding: 8px 15px; background: #c4e6ff0c; border-color: #d4ecff23; }
.settings-panel { padding: 24px; }
.switch-row { border-bottom-color: #d4e8ff12; }
.switch { border-color: #adcce32e; background: #d0e5ff1c; box-shadow: inset 0 1px 3px #0003; }
.chat-panel { padding: 0; }
.chat-composer { background: linear-gradient(140deg,#bbdfff09,transparent),#142233; border-top-color: #d2e9ff1a; }
.chat-composer textarea { border-radius: 18px; }
.send-button { border-radius: 50%; background: linear-gradient(140deg,#b3fff2,#72e3d7); }
.prompt-suggestions button { border-radius: 15px; background: #b6d8f00b; border-color: #bcdff124; }
.message.user { background: #67e8de12; border-color: #9de9dd27; border-radius: 18px 18px 5px 18px; }
.message.assistant { border-bottom-color: #d0e8ff12; }
.modal { border-radius: 28px; border-color: #d3edff38; background: linear-gradient(145deg,#d8eeff0d,transparent 40%),#111e2df7; box-shadow: inset 0 1px 0 #eaffff24,0 32px 110px #0009; }
.modal::backdrop { background: #030914b5; backdrop-filter: none; }
.modal-heading > .icon-button,.modal-header > .icon-button { border-radius: 50%; background: linear-gradient(145deg,#effaff13,#e1f3ff06); border: 1px solid #d1ebff2e; box-shadow: inset 0 1px 0 #ffffff14; }
.reader-modal { background: linear-gradient(145deg,#a8d9ef0d,transparent 45%),#101c29fa; }
.reader-tabs { gap: 8px; padding: 0; margin: 6px 0 12px; border: 0; }
.reader-tabs button { flex: 1; min-height: 32px; padding: 4px 12px; border-radius: 999px; color: #c1d2e1; background: linear-gradient(160deg,#e2f6ff0b,#dfedff04); border: 1px solid #d4eeff26; box-shadow: inset 0 1px 0 #f4ffff14; }
.reader-tabs button:hover { border-color: #d3f6ff52; background-color: #d2f2ff08; }
.reader-tabs button[aria-selected=true] { background: linear-gradient(140deg,#b1f7e828,#8ec4dc0d); color: #d9fff3; border-color: #c3f9ed55; box-shadow: inset 0 1px 0 #f4ffff26,0 4px 12px #0002; }
.reader-tabs button[aria-selected=true]::after { display: none; }
.reader-modal .audio-dock { border-color: #c3edee45; background: linear-gradient(140deg,#d9ffff20,#bddeff05),#203644e8; box-shadow: inset 0 1px 0 #f2ffff38,0 10px 30px #0004; }
.audio-dock select { border-radius: 999px; background: #cee8f510; border-color: #c8e8ff30; }
.toast { border-radius: 999px; background: #20394bf2; border-color: #c3e5ef4d; box-shadow: inset 0 1px 0 #efffff22,0 8px 32px #0005; }
.review-layout.review-single { grid-template-columns: minmax(0,1fr); }
.review-footnote { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

/* Health: one overview, nine honest metric cards, and the raw table nearby. */
.health-timeline-panel { padding: 24px; background: linear-gradient(145deg,#b9e2f009,transparent 40%),#111f2ef5; }
.health-overview-meta { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; padding: 0 0 22px; border-bottom: 1px solid #d3eaff16; }
.health-overview-meta > div { display: flex; flex-direction: column; gap: 3px; }
.health-overview-meta > div > span { color: var(--muted); font-size: 11px; }
.health-overview-meta strong { font-size: 27px; line-height: 1.2; letter-spacing: -.035em; font-weight: 600; font-variant-numeric: tabular-nums; }
.health-overview-meta > .quiet-badge { margin-left: auto; }
.health-overview-meta .health-updating { font-size: 11px; color: var(--muted); }
.health-category-navigation { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 18px 0 23px; margin-bottom: 0; }
.health-category-navigation::-webkit-scrollbar { display: none; }
.health-category-button { min-height: 40px; padding: 8px 15px; border: 1px solid #d1e8ff18; background: #beddf009; color: var(--muted); border-radius: 999px; white-space: nowrap; flex: none; font-size: 12px; box-shadow: inset 0 1px 0 #ffffff0a; }
.health-category-button[aria-pressed=true] { color: #c8fff0; border-color: #b3eddf45; background: linear-gradient(145deg,#9ce9dd22,#b3def00b); }
.health-category-button:hover { border-color: #ceebff45; color: var(--text); }
.health-chart-heading { margin-bottom: 10px; scroll-margin-top: 78px; }
.health-chart-heading .eyebrow { font-size: 9px; letter-spacing: .12em; margin-bottom: 5px; }
.health-chart-heading h2 { font-size: 21px; letter-spacing: -.025em; }
.health-metric-picker { width: 205px; }
.health-metric-picker select { border-radius: 999px; background: #d1e9ff09; }
.health-overview-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 18px 0 22px; }
.health-metric-card { padding: 17px 15px 13px; border: 1px solid #c7e7f124; border-radius: 19px; background: linear-gradient(145deg,#c8e8ff0a,transparent 55%),#18293990; box-shadow: inset 0 1px 0 #efffff0e; --metric-color: #9ce9df; }
.health-metric-card[data-group=cardio] { --metric-color: #9ce9df; }
.health-metric-card[data-group=activity] { --metric-color: #a2d7fe; }
.health-metric-card[data-group=sleep] { --metric-color: #c8b5fb; }
.health-metric-card[data-group=medication] { --metric-color: #f4c4d7; }
.health-metric-card .section-heading { gap: 10px; margin-bottom: 11px; flex-wrap: wrap; }
.health-metric-open { border: 0; background: transparent; color: var(--metric-color); text-align: left; padding: 2px 0; min-height: 26px; font-weight: 600; font-size: 13px; }
.health-metric-open::after { content: ' ↗'; font-weight: 400; opacity: .8; }
.health-kind-label { font-size: 10px; color: var(--quiet); margin-left: auto; }
.health-metric-value { display: flex; align-items: baseline; gap: 6px; min-height: 34px; }
.health-metric-value strong { font-size: 27px; font-weight: 550; line-height: 1.3; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.health-metric-value > span { color: var(--muted); font-size: 12px; }
.health-metric-card[data-group=sleep] .health-metric-value strong,.health-metric-card[data-group=medication] .health-metric-value strong,.health-metric-card[data-metric=workout] .health-metric-value strong { font-size: 18px; }
.health-value-context { display: block; font-size: 10px; color: var(--quiet); margin: 3px 0 8px; }
.health-metric-card .health-chart { min-height: 0; cursor: default; }
.health-metric-card .fine-print { border-top: 1px solid #d3eaff0d; padding-top: 8px; margin-top: 8px; font-size: 10px; line-height: 1.55; }
.health-metric-card[data-empty=true] .health-metric-value strong { font-size: 18px; color: var(--muted); }
.health-mini-empty { min-height: 48px; padding: 5px 0; margin: 0; font-size: 11px; line-height: 1.6; }
.health-chart-summary { margin-top: 16px; gap: 32px; }
.health-chart-summary strong { font-size: 29px; }
.health-chart-wrap { margin-top: 14px; border-top-color: #d3eaff18; }
.health-chart-grid { stroke: #bedcf118; }
.health-point-detail { border-color: #c6e5f124; border-radius: 15px; background: #06121e45; padding: 13px 15px; }
.health-page-actions { border-top: 1px solid #d2e9ff14; padding-top: 16px; margin-top: 16px; }
.health-page-actions #health-open-records { margin-left: auto; padding: 9px 14px; border-radius: 999px; border: 1px solid #b2eddf30; background: #a5e9dc0a; }
.health-records-disclosure { padding: 0 22px; }
.health-records-disclosure > summary { display: flex; align-items: center; gap: 18px; min-height: 68px; list-style: none; cursor: pointer; }
.health-records-disclosure > summary::-webkit-details-marker { display: none; }
.health-records-disclosure > summary > span:first-child { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 550; }
.health-records-disclosure > summary::after { content: '＋'; margin-left: auto; color: var(--muted); }
.health-records-disclosure[open] > summary::after { content: '−'; }
.health-records-body { border-top: 1px solid #d3eaff16; padding: 18px 0 22px; }
.health-records-body > .fine-print { margin-bottom: 16px; }

@media (max-width: 1180px) {
  .health-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .sidebar { width: min(288px,calc(100vw - 24px)); inset: 12px auto 12px 12px; transform: translateX(calc(-100% - 24px)); padding: max(22px,env(safe-area-inset-top)) 14px 16px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { right: 12px; }
  .sidebar .brand { margin-left: 8px; }
  .main-content { padding-top: 17px; }
  .page-heading { margin-bottom: 17px; }
  .panel,.stat-card,.recording-card { border-radius: 19px; }
  .settings-panel { padding: 20px 17px; }
  .modal,.reader-modal { border-radius: 25px; }
  .reader-tabs { gap: 7px; margin-bottom: 10px; }
  .reader-tabs button { min-height: 32px; padding: 4px 10px; }
  .health-timeline-panel { padding: 18px 14px; }
  .health-overview-meta { gap: 18px 26px; padding-bottom: 18px; }
  .health-overview-meta strong { font-size: 25px; }
  .health-overview-meta > .quiet-badge { margin-left: 0; }
  .health-category-navigation { padding: 16px 0 21px; margin-right: -14px; }
  .health-category-navigation::after { content: ''; min-width: 6px; }
  .health-chart-heading { flex-wrap: wrap; }
  .health-chart-heading h2 { font-size: 19px; }
  .health-metric-picker { width: auto; max-width: 55%; }
  .health-metric-picker select { font-size: 12px; padding-left: 11px; }
  .health-overview-grid { gap: 11px; grid-template-columns: minmax(0,1fr); margin-top: 16px; }
  .health-metric-card { padding: 15px; }
  .health-metric-card[data-empty=true] .health-mini-empty { min-height: 30px; }
  .health-metric-card .health-chart { max-height: 170px; }
  .health-chart-summary { gap: 16px; }
  .health-chart-summary strong { font-size: 25px; }
  .health-page-actions #health-open-records { margin-left: 0; }
  .health-records-disclosure { padding: 0 16px; }
  .health-records-disclosure > summary { gap: 10px; flex-wrap: wrap; padding: 15px 0; }
  .health-records-disclosure > summary > .fine-print { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar,.topbar { background: #172637; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panel,.stat-card,.recording-card,.health-metric-card,.modal,.reader-modal,.audio-dock,.reader-modal .audio-dock { background: #162638; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .health-point-detail { background: #0e1d2c; }
  .reader-tabs button { background: #1c3043; }
  .reader-tabs button[aria-selected=true] { background: #194841; }
  .audio-skip { background: #243b4a; box-shadow: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #e2edf7; --quiet: #cedde9; --glass-edge: #9db6ca; }
  .sidebar,.topbar,.panel,.stat-card,.recording-card,.modal,.reader-modal,.audio-dock,.reader-modal .audio-dock,.health-metric-card { background: #101e2e; border-color: #9db6ca; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .health-category-button,.reader-tabs button,.button.secondary,.date-picker,.range-picker select { border-color: #9db6ca; background: #1c3043; color: #fff; }
  .health-category-button[aria-pressed=true],.reader-tabs button[aria-selected=true],.nav-item.active { border-color: var(--accent); background: #194841; color: #fff; }
  .health-chart-grid { stroke: #8ba6bd55; }
  .health-kind-label,.health-value-context,.health-metric-card[data-empty=true] .health-metric-value strong { color: var(--muted); }
  .audio-skip { background: #1c3043; border-color: #b8d0df; color: #fff; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .audio-skip, .audio-skip:not(:disabled):active { transform: none; }
}
@media (forced-colors: active) {
  .audio-skip { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
  .audio-skip:disabled { color: GrayText; border-color: GrayText; opacity: 1; }
}

/* Synced conversations: quiet glass chrome with the input as one small surface. */
.chat-heading { flex-direction: row; align-items: center; }
.chat-heading h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(62vw,800px); }
.chat-heading-actions { display: flex; flex: none; gap: 8px; }
.chat-toolbar-button { width: 44px; height: 44px; color: var(--text); border: 1px solid #daefff2c; background: linear-gradient(145deg,#d8efff17,#a2ccf807); box-shadow: inset 0 1px 0 #ffffff14,0 4px 15px #00000012; backdrop-filter: blur(16px) saturate(150%); }
.chat-toolbar-button:hover { background: #cde9ff22; }
.chat-toolbar-button:active,.chat-history-row:active,.send-button:active { transform: scale(.96); }
.chat-toolbar-button:focus-visible,.chat-history-row:focus-visible,.send-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.chat-panel { border-radius: 28px; background: linear-gradient(145deg,#aecfe00b,transparent 70%),#101d2acf; }
.chat-welcome { margin: clamp(20px,6vh,80px) auto 24px; }
.chat-welcome h2 { font-size: clamp(23px,2.6vw,30px); font-weight: 600; }
.chat-welcome p { line-height: 1.85; }
.prompt-suggestions { max-width: 360px; gap: 9px; }
.prompt-suggestions button { border-radius: 16px; padding: 12px 16px; background: linear-gradient(145deg,#d5ecff0e,#b8dcff04); border-color: #d8ebff22; }
.chat-composer { padding: 0 18px 13px; background: transparent; border: 0; }
.chat-input-shell { padding: 6px 10px 9px; border: 1px solid #e0f1ff2d; border-radius: 25px; background: linear-gradient(145deg,#c9e4fa15,#d0e8ff07); box-shadow: inset 0 1px 0 #ffffff16,0 7px 25px #00000012; backdrop-filter: blur(20px) saturate(140%); transition: border-color 120ms; }
.chat-input-shell:focus-within { border-color: #96eee48a; box-shadow: inset 0 1px 0 #ffffff1e,0 0 0 3px #65e0d90c; }
.chat-composer textarea { width: 100%; padding: 12px 8px 7px; min-height: 48px; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 15px; outline: none; }
.chat-composer textarea:focus { border: 0; box-shadow: none; }
.chat-composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 7px; }
.chat-effort-control { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.chat-effort-control .icon { width: 14px; height: 14px; color: var(--accent); }
.chat-effort-control output { min-width: 2.5em; color: var(--text); }
.chat-effort-control input[type=range] { --effort-progress:0%; width: 98px; min-height: 28px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; appearance: none; cursor: pointer; }
.chat-effort-control input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right,#93f4e7 var(--effort-progress),#bdd7ed27 var(--effort-progress)); }
.chat-effort-control input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; margin-top: -6px; border: 1px solid #ffffff66; background: #e6faf5; box-shadow: 0 1px 6px #0004; }
.chat-effort-control input[type=range]::-moz-range-track { height: 4px; border-radius: 3px; background: #bdd7ed27; }
.chat-effort-control input[type=range]::-moz-range-progress { height: 4px; border-radius: 3px; background: #93f4e7; }
.chat-effort-control input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #ffffff66; background: #e6faf5; }
.chat-effort-control input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.chat-composer .send-button { position: static; width: 36px; height: 36px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 0 #ffffff70,0 3px 12px #65e0d91a; }
.chat-composer .send-button .icon { width: 20px; height: 20px; transform: rotate(-90deg); }
.chat-composer .chat-composer-note { margin: 8px 0 0; text-align: center; font-size: 10px; color: var(--quiet); }
.chat-sync-status { flex: none; padding: 0 28px 9px; color: var(--quiet); font-size: 11px; }
.chat-error-panel { flex: none; margin: 0 18px 10px; padding: 10px 14px; border: 1px solid #ffb3ab25; border-radius: 14px; background: #ffaaa908; }
.chat-error-panel .form-error { margin: 0 0 5px; }
.chat-earlier { flex: none; align-self: center; margin-top: 10px; font-size: 12px; }
.chat-context .source-chip { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; margin: 4px 0; }
.chat-history-modal { width: min(540px,calc(100vw - 32px)); padding: 25px; border-radius: 30px; }
.chat-history-modal .muted { margin-top: 7px; font-size: 12px; }
.chat-history-list { max-height: min(60dvh,540px); overflow: auto; scrollbar-width: thin; margin: 6px -6px; padding: 2px 6px; }
.chat-history-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 78px; border: 1px solid transparent; border-radius: 17px; background: transparent; text-align: left; padding: 12px; transition: transform 100ms,background 120ms; }
.chat-history-row:hover { background: #d0eaff09; }
.chat-history-row.selected { background: #77e7db0c; border-color: #b2f8e92c; }
.chat-history-row > .icon:first-child { width: 20px; color: var(--muted); }
.chat-history-row > .icon:last-child { width: 15px; color: var(--quiet); }
.chat-history-copy { flex: 1; min-width: 0; }
.chat-history-copy strong { display: block; color: var(--text); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-copy small { display: block; margin-top: 5px; color: var(--quiet); font-size: 11px; }
.chat-history-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; gap: 12px; }
.message.error p { margin: 0 0 7px; }
@media (max-width:760px) {
  .chat-heading { gap: 10px; margin-bottom: 14px; }
  .chat-heading .muted { max-width: 28em; font-size: 12px; line-height: 1.55; }
  .chat-heading h1 { max-width: 57vw; font-size: 24px; }
  .chat-heading-actions { gap: 7px; }
  .chat-toolbar-button { width: 40px; height: 40px; }
  .chat-panel { height: calc(100dvh - 201px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 380px; border-radius: 24px; }
  .chat-composer { padding: 0 11px 11px; }
  .chat-composer textarea { font-size: 16px; }
  .chat-input-shell { border-radius: 23px; }
  .chat-welcome { margin: 22px auto; }
  .chat-effort-control { gap: 7px; font-size: 11px; }
  .chat-effort-control input[type=range] { width: 88px; }
  .chat-history-modal { padding: 21px; }
}
@media (prefers-reduced-motion:reduce) {
  .chat-toolbar-button,.chat-history-row,.chat-input-shell { transition: none; }
  .chat-toolbar-button:active,.chat-history-row:active,.send-button:active { transform: none; }
}
@media (prefers-reduced-transparency:reduce) {
  .chat-toolbar-button,.chat-input-shell { backdrop-filter: none; background: #203246; }
}
@media (prefers-contrast:more) {
  .chat-toolbar-button,.chat-input-shell,.chat-history-row.selected { border-color: #c5e3ee; background: #142536; }
  .chat-effort-control,.chat-sync-status { color: #dcebf5; }
}

/* Small, explicit service checks and a saved-configuration index card. */
.settings-ai-stack { display: grid; align-content: start; gap: 16px; min-width: 0; }
.settings-mcp-panel { margin-bottom: 18px; }
.settings-mcp-panel .panel-heading { flex-wrap: wrap; }
.settings-mcp-panel .panel-heading h2 { margin: 0; }
.settings-mcp-panel .quiet-badge { margin-left: auto; }
.settings-mcp-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 28px; }
.settings-mcp-connection { min-width: 0; }
.settings-mcp-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.settings-mcp-endpoint-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.settings-mcp-endpoint-row input { flex: 1; width: 0; min-width: 0; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; text-overflow: ellipsis; }
.settings-mcp-endpoint-row .icon-button { flex: none; width: 42px; height: 42px; }
.settings-mcp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.settings-mcp-panel .settings-tool-result { margin-bottom: 0; }
.settings-mcp-access { padding-left: 28px; border-left: 1px solid var(--line); }
.settings-mcp-access h3 { margin: 0 0 15px; font-size: 13px; font-weight: 550; }
.settings-mcp-access > p:not(.fine-print) { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; color: var(--muted); font-size: 12px; line-height: 1.8; margin: 0 0 12px; }
.settings-mcp-operation-kind { color: var(--accent); }
.settings-mcp-access .fine-print { line-height: 1.8; margin: 13px 0 0; }
.settings-mcp-guide { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 17px; }
.settings-mcp-guide summary { cursor: pointer; color: var(--accent); font-size: 12px; width: fit-content; min-height: 24px; }
.settings-mcp-guide ol { padding-left: 20px; font-size: 12px; line-height: 1.9; color: var(--muted); margin-top: 14px; }
.settings-mcp-guide li { padding-left: 4px; margin-bottom: 6px; }
.settings-mcp-config-heading { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 18px 0 10px; font-size: 12px; color: var(--muted); }
.settings-mcp-config-heading .text-button { font-size: 12px; }
.settings-mcp-guide pre { margin: 0; border: 1px solid var(--line); padding: 15px; border-radius: 12px; background: #06111c66; color: var(--muted); overflow: auto; font: 11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }
.settings-mcp-tokens { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.settings-mcp-token-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.settings-mcp-token-heading h3 { margin: 0; font-size: 14px; font-weight: 550; }
.settings-mcp-token-heading .fine-print { margin: 0; }
.settings-mcp-token-form { display: grid; grid-template-columns: minmax(140px,1.5fr) minmax(110px,1fr) minmax(110px,1fr) auto; gap: 12px; align-items: end; }
.settings-mcp-token-form label { margin: 0; font-size: 12px; min-width: 0; }
.settings-mcp-token-form input,.settings-mcp-token-form select { width: 100%; margin-top: 7px; min-height: 42px; }
.settings-mcp-token-form .button { min-height: 42px; padding: 10px 15px; white-space: nowrap; }
.settings-mcp-created { margin: 18px 0 6px; padding: 16px; border: 1px solid var(--accent-dim,var(--line)); border-radius: 16px; background: #6fcfc609; }
.settings-mcp-created > .fine-print { margin: 0 0 12px; line-height: 1.8; }
.settings-mcp-secret-row { display: flex; align-items: center; gap: 14px; }
.settings-mcp-secret-row input { flex: 1; min-width: 0; width: 0; font: 12px ui-monospace,SFMono-Regular,Menlo,monospace; }
.settings-mcp-secret-row .text-button { flex: none; }
.settings-mcp-token-list { margin-top: 14px; }
.settings-mcp-token-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.settings-mcp-token-body { flex: 1; min-width: 0; }
.settings-mcp-token-body strong { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.settings-mcp-token-body .fine-print { margin: 5px 0 0; white-space: pre-line; line-height: 1.8; overflow-wrap: anywhere; }
.settings-mcp-token-row .quiet-badge { margin-left: 0; flex: none; }
.settings-mcp-token-row .text-button { font-size: 12px; flex: none; }
.settings-mcp-revoke-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.settings-mcp-revoke-confirm { color: #ffe2e0; background: #bc494530; border: 1px solid #e086805c; }
#settings-mcp-revoke-description { overflow-wrap: anywhere; }
@media (max-width:1000px) {
  .settings-mcp-token-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .settings-mcp-token-form label:first-child { grid-column: 1 / -1; }
  .settings-mcp-token-form .button { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width:760px) {
  .settings-mcp-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .settings-mcp-access { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .settings-mcp-panel .quiet-badge { font-size: 10px; }
  .settings-mcp-actions { gap: 10px; }
  .settings-mcp-token-row { gap: 10px; }
}
.settings-model-tests { margin: 17px 0 7px; padding: 15px 0 2px; border-top: 1px solid var(--line); }
.settings-test-actions,.settings-index-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.settings-tool-button { min-height: 40px; padding: 9px 13px; border-radius: 20px; background: linear-gradient(145deg,#d5edff14,#bddcff06); border: 1px solid #d4ecff2d; box-shadow: inset 0 1px 0 #ffffff14; }
.settings-tool-button .icon { width: 16px; height: 16px; }
.settings-tool-button:active { transform: scale(.97); transition: transform 100ms; }
.settings-tool-button[aria-busy=true] .icon { opacity: .65; }
.settings-model-tests > .fine-print { margin: 12px 0 9px; line-height: 1.75; }
.settings-tool-result { padding: 10px 12px; border-radius: 12px; border: 1px solid #c8e6ff20; color: var(--muted); background: #b2d8fb06; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; margin: 8px 0 0; }
.settings-tool-result[data-tone=success] { color: #adf4dc; border-color: #8cf5cf2b; background: #6ce8c508; }
.settings-tool-result[data-tone=error] { color: #ffd1c1; border-color: #ffbda52d; background: #ffb38f07; }
.settings-index-panel .panel-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.settings-index-panel .panel-heading h2 { margin: 0; }
.settings-index-panel .quiet-badge { margin-left: auto; }
.settings-index-model { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.settings-index-model strong { color: var(--text); font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.settings-index-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 21px 0 17px; }
.settings-index-counts span { display: block; font-size: 11px; color: var(--quiet); margin-bottom: 6px; }
.settings-index-counts strong { display: block; font-size: 25px; line-height: 1.3; letter-spacing: -.03em; font-weight: 550; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.settings-index-progress { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); margin-bottom: 17px; }
.settings-index-progress progress { flex: 1; width: 100%; height: 5px; appearance: none; border: 0; border-radius: 3px; background: #b9dcf41c; overflow: hidden; }
.settings-index-progress progress::-webkit-progress-bar { background: #b9dcf41c; border-radius: 3px; }
.settings-index-progress progress::-webkit-progress-value { background: linear-gradient(90deg,#8be9e2,#c3fff0); border-radius: 3px; }
.settings-index-progress progress::-moz-progress-bar { background: #8be9e2; border-radius: 3px; }
.settings-index-progress > span { min-width: 2.8em; text-align: right; }
.settings-index-panel > .fine-print { margin: 11px 0; line-height: 1.8; }
.settings-index-actions { margin-top: 17px; justify-content: space-between; }
.settings-index-actions .text-button { font-size: 12px; }
@media (max-width:760px) {
  .settings-tool-button { font-size: 12px; padding: 9px 11px; min-height: 42px; }
  .settings-test-actions { gap: 8px; }
  .settings-index-counts { gap: 9px; }
  .settings-index-counts strong { font-size: 24px; }
}
@media (prefers-reduced-motion:reduce) { .settings-tool-button:active { transform: none; transition: none; } }
@media (prefers-reduced-transparency:reduce) { .settings-tool-button { background: #203246; } }
@media (prefers-contrast:more) { .settings-tool-button,.settings-tool-result { border-color: #b8dae9; background: #142536; } }

.processing-panel { margin: 0 0 18px; padding: 13px 18px; border-color: #a6f2e52b; }
.processing-detail { border: 1px solid #b3dfed27; border-radius: 18px; background: #b4dff008; padding: 12px 16px; margin: 0 0 15px; }
.processing-recording + .processing-recording { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.processing-recording-heading { display: flex; align-items: baseline; justify-content: flex-start; gap: 0; font-size: 12px; line-height: 1.6; margin-bottom: 7px; }
.processing-recording-heading strong { color: var(--accent); font-weight: 500; flex: none; }
.processing-phase-separator { color: var(--quiet); margin-inline: 5px; }
.processing-current-source { color: var(--text); background: none; border: 0; padding: 0; min-height: 0; font: inherit; text-align: left; overflow-wrap: anywhere; }
button.processing-current-source { color: var(--accent); cursor: pointer; }
.processing-meter { display: block; width: 100%; height: 4px; appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: #b9dcf41c; }
.processing-meter::-webkit-progress-bar { border-radius: 999px; background: #b9dcf41c; }
.processing-meter::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg,#73ddd5,#c3fff0); }
.processing-meter::-moz-progress-bar { border-radius: 999px; background: #8be9e2; }
.processing-meter:indeterminate { background: linear-gradient(90deg,#b9dcf41c 20%,#8be9e266 50%,#b9dcf41c 80%); background-size: 200% 100%; animation: processing-indeterminate 1.8s linear infinite; }
.processing-estimate { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--quiet); font-size: 11px; line-height: 1.6; }
.processing-estimate:empty { display: none; }
.processing-percent { font-variant-numeric: tabular-nums; flex: none; }
@keyframes processing-indeterminate { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media(max-width:760px){.processing-panel{padding:12px 14px}.processing-recording-heading{font-size:11px}.processing-estimate{font-size:10px}}
@media(prefers-reduced-motion:reduce){.processing-meter:indeterminate{animation:none}}
@media(prefers-reduced-transparency:reduce){.processing-panel,.processing-detail{background:#142536}}
@media(prefers-contrast:more){.processing-panel,.processing-detail{border-color:#b8dae9}.processing-estimate{color:var(--muted)}}

.voice-enrollment-modal { width: min(680px,calc(100% - 28px)); background: var(--glass-chrome); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.voice-enrollment-modal > .modal-heading { position: sticky; top: -24px; z-index: 2; margin: -24px -24px 18px; padding: 20px 24px 14px; background: var(--glass-chrome); border-bottom: 1px solid var(--glass-edge); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.voice-enrollment-modal > .muted { margin: -8px 0 18px; line-height: 1.7; }
.voice-enrollment-status:empty { display: none; }
.voice-enrollment-status { color: var(--quiet); padding: 12px 0; }
.voice-enrollment-samples { display: grid; gap: 12px; margin-bottom: 22px; }
.voice-enrollment-sample { padding: 16px 18px; border: 1px solid var(--glass-edge); border-radius: 18px; background: color-mix(in srgb,var(--surface) 65%,transparent); }
.voice-enrollment-sample-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.voice-enrollment-sample-heading > strong { color: var(--accent); font-weight: 600; }
.voice-enrollment-prompt { margin: 12px 0 14px; font-size: 16px; line-height: 1.8; color: var(--text); }
.voice-enrollment-sample > .button { min-height: 40px; border-radius: 999px; font-size: 12px; padding: 8px 16px; }
.voice-enrollment-sample .is-recording { color: var(--red); border-color: currentColor; }
.voice-enrollment-sample audio { display: block; width: 100%; height: 38px; margin-top: 12px; }
.voice-enrollment-listen { margin: 7px 0 0; font-size: 11px; color: var(--quiet); }
.voice-enrollment-listen[data-complete=true] { color: var(--accent); }
.voice-enrollment-form { border-top: 1px solid var(--line); padding-top: 18px; }
.voice-enrollment-modal > .text-button { display: block; margin: 16px auto 0; font-size: 12px; }
@media(max-width:760px){.voice-enrollment-modal{padding:20px 16px}.voice-enrollment-modal>.modal-heading{top:-20px;margin:-20px -16px 18px;padding:18px 16px 12px}.voice-enrollment-sample{padding:14px}.voice-enrollment-prompt{font-size:16px}.voice-enrollment-sample-heading{font-size:11px}}
@media(prefers-reduced-transparency:reduce){.voice-enrollment-modal{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}.voice-enrollment-sample{background:var(--surface)}}

.transcript-correction-modal { width: min(680px,calc(100% - 28px)); max-height: min(86dvh,860px); }
.transcript-correction-modal .modal-heading { align-items: center; margin-bottom: 20px; }
.transcript-correction-modal .modal-heading h2 { font-size: 23px; }
.correction-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.correction-choices > button { flex: 1; }
.correction-input { min-height: 180px; resize: vertical; font-size: 17px; line-height: 1.8; }
.correction-original { margin: 14px 0; color: var(--quiet); font-size: 13px; }
.correction-original > summary { cursor: pointer; padding: 8px 0; }
.correction-original pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--muted); line-height: 1.8; margin: 6px 0; }
.correction-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.correction-actions > button { min-width: 100px; }
.correction-status { font-size: 12px; color: var(--quiet); margin: 6px 0; }
.correction-status:empty { display: none; }
@media(max-width:760px){.transcript-correction-modal{padding:22px 18px}.correction-input{font-size:17px}.correction-actions>button{flex:1}}

/* Topic cards use saved evidence, while the narrative stays a reading surface. */
.reader-points-list > .reader-key-point { list-style: none; margin: 0 0 24px; padding: 28px; border: 1px solid #d2dfeb08; border-radius: 26px; background: #e7f0f90a; }
.reader-points-list:has(.reader-key-point) { padding: 0; }
.reader-point-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.reader-point-clock { display: flex; align-items: center; gap: 10px; color: var(--quiet); }
.reader-point-clock > .icon { width: 14px; height: 14px; }
.reader-point-time { color: var(--quiet); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .025em; }
.reader-point-play { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid #b7cdda65; border-radius: 50%; background: transparent; color: var(--muted); flex: none; }
.reader-point-play:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: #67e8de0b; }
.reader-point-play .icon { width: 16px; height: 16px; margin-left: 2px; }
.reader-point-title { margin: 0 0 16px; color: var(--text); font-size: 22px; line-height: 1.65; font-weight: 500; letter-spacing: -.015em; }
.reader-point-kind { display: inline-flex; margin-bottom: 18px; padding: 4px 11px; border-radius: 999px; background: #c5d6e50a; color: var(--quiet); font-size: 12px; line-height: 1.5; }
.reader-point-text,.reader-point-detail { color: var(--muted); font-size: 18px; line-height: 1.85; white-space: pre-wrap; margin: 0 0 18px; }
.reader-point-details { margin-top: 24px; }
.reader-point-details > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; width: fit-content; min-height: 40px; padding: 7px 0; color: var(--quiet); font-size: 15px; }
.reader-point-details > summary::-webkit-details-marker { display: none; }
.reader-point-details > summary > .icon { width: 15px; height: 15px; transform: rotate(90deg); }
.reader-point-details[open] > summary > .icon { transform: rotate(-90deg); }
.reader-point-detail { color: var(--text); margin: 16px 0 20px; }
.reader-point-sources { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 24px; }
.reader-point-source { display: flex; align-items: center; gap: 20px; }
.reader-point-sources .text-button { font-size: 14px; padding: 6px 0; min-height: 38px; color: var(--quiet); }
.reader-point-source > .text-button:first-child { flex: 1; justify-content: space-between; }
.reader-point-sources .text-button:hover { color: var(--accent); }
.reader-point-target { background: #67e8de12; border-radius: 12px; outline: 1px solid #67e8de55; outline-offset: 7px; }
.reader-summary-panel { padding: 8px 4px 24px; background: transparent; border: 0; box-shadow: none; }
.reader-summary-panel > .section-heading { margin-bottom: 22px; }
.reader-summary-panel > .section-heading > button { margin-left: auto; }
.reader-summary-panel:has(.reader-rich-summary) > .section-heading > h3 { display: none; }
.reader-summary-caption { margin: 0 0 12px; color: var(--quiet); font-size: 13px; line-height: 1.6; letter-spacing: .02em; }
.reader-summary-overview { margin: 0 0 34px; font-size: 24px; line-height: 1.8; font-weight: 450; color: var(--text); white-space: pre-wrap; }
.reader-summary-narrative { padding-top: 28px; border-top: 1px solid #c2d2df24; }
.reader-summary-narrative h3,.reader-summary-reminders h3 { margin: 0 0 18px; font-size: 20px; font-weight: 500; }
.reader-summary-narrative p,.reader-summary-reminders li { color: var(--muted); font-size: 18px; line-height: 1.9; white-space: pre-wrap; }
.reader-summary-narrative p { margin: 0; }
.reader-summary-narrative p + p { margin-top: 24px; }
.reader-summary-reminders { margin-top: 32px; }
.reader-summary-reminders ul { margin: 0; padding-left: 1.3em; }
.reader-summary-reminders li { margin: 0 0 10px; }
.reader-summary-reminders li:last-child { margin-bottom: 0; }
.reader-summary-updated { margin: 30px 0 0; color: var(--quiet); font-size: 13px; }
@media(max-width:760px){
  .reader-points-list > .reader-key-point { padding: 24px 22px; border-radius: 23px; margin-bottom: 20px; }
  .reader-point-heading { margin-bottom: 22px; }
  .reader-point-title { font-size: 21px; }
  .reader-point-text,.reader-point-detail { font-size: 17px; line-height: 1.85; }
  .reader-summary-overview { font-size: 22px; margin-bottom: 28px; }
  .reader-summary-narrative p,.reader-summary-reminders li { font-size: 17px; line-height: 1.9; }
  .reader-summary-panel { padding: 4px 1px 24px; }
}
@media(prefers-contrast:more){
  .reader-points-list > .reader-key-point { border-color: var(--line-light); }
}

.hour-read-status{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;margin:0 0 18px;border-radius:16px;background:var(--panel-soft);color:var(--muted);font-size:14px;line-height:1.6}
.hour-read-status[data-phase="failed"]{color:var(--text)}
.hour-read-status .text-button{flex:none;white-space:nowrap}

/* Settings workspace: local category rail, grouped forms, persistent save dock. */
.settings-page-heading { margin-bottom: 25px; }
.settings-account-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--quiet); font-size: 12px; }
.settings-account-badge .icon { width: 15px; height: 15px; color: var(--accent); }
.settings-workspace { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 26px; align-items: start; }
.settings-navigation { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid #d4ecff16; border-radius: 26px; background: var(--panel-soft); max-height: calc(100dvh - 98px); overflow: auto; scrollbar-width: thin; }
.settings-navigation-label { margin: 5px 12px 12px; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--quiet); }
.settings-navigation-item { display: flex; align-items: center; gap: 12px; padding: 15px 12px; min-height: 78px; border: 1px solid transparent; border-radius: 17px; color: var(--muted); transition: background 120ms,border-color 120ms; }
.settings-navigation-item:hover { background: #d5edff07; color: var(--text); }
.settings-navigation-item.active { background: #67e8de0c; border-color: #67e8de48; color: var(--text); }
.settings-navigation-icon { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; flex: none; border: 1px solid #c0e5f322; border-radius: 12px; background: #c4e6ff05; color: var(--quiet); }
.settings-navigation-item.active .settings-navigation-icon { color: var(--accent); border-color: #67e8de38; background: #67e8de08; }
.settings-navigation-icon .icon { width: 18px; height: 18px; }
.settings-navigation-item strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; }
.settings-navigation-item small { display: block; font-size: 11px; line-height: 1.6; margin-top: 4px; color: var(--quiet); }
.settings-navigation-note { padding: 16px 12px 1px; margin: 9px 0 0; border-top: 1px solid #d4ecff12; color: var(--quiet); font-size: 10px; line-height: 1.9; }
.settings-content { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.settings-main-form { min-width: 0; margin: 0; }
.settings-main-card { padding: 0; overflow: clip; border-radius: 30px; }
.settings-page .settings-panel { padding: 32px 36px; scroll-margin-top: 80px; margin: 0; min-width: 0; }
.settings-main-card > .settings-panel + .settings-panel { border-top: 1px solid #d4ecff16; }
.settings-page .panel-heading { gap: 13px; margin-bottom: 8px; }
.settings-page .panel-heading > .icon { width: 40px; height: 40px; padding: 10px; border: 1px solid #c0e5f326; border-radius: 13px; background: #c4e6ff06; }
.settings-page .panel-heading h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.settings-page .settings-panel > .muted { margin-bottom: 23px; font-size: 13px; line-height: 1.8; }
.settings-page .settings-panel label:not(.switch-row) { font-size: 12px; line-height: 1.7; color: var(--muted); font-weight: 500; }
.settings-page .field-row { gap: 20px; }
.settings-page .field-row > label { margin-top: 0; }
.settings-page .settings-panel input:not([type=checkbox]):not([type=hidden]),.settings-page .settings-panel select { min-height: 47px; border-radius: 14px; background-color: #09131ed9; padding: 11px 14px; }
.settings-page .settings-model-fields label { display: block; margin-top: 0; }
.settings-page .settings-model-fields .fine-print { margin: 10px 0 14px; font-size: 11px; }
.settings-page .settings-panel > .fine-print:last-child { margin-bottom: 0; }
.settings-page .settings-panel > label:not(.switch-row):not(:has(input[type=password])) { max-width: 100%; }
.settings-page .switch-row { margin: 12px 0 !important; padding: 17px 18px; border: 1px solid #c5e7f121; border-radius: 17px; background: #07152247; }
.settings-page .switch-row strong { font-size: 13px; font-weight: 550; }
.settings-page .switch-row small { font-size: 12px; line-height: 1.75; }
.settings-page .switch-row input { right: 18px; }
.settings-page .switch-row input:checked + .switch { background: var(--accent); border-color: var(--accent); }
.settings-page .settings-model-tests { margin-bottom: 22px; }
.settings-page .agent-settings-panel .field-row { max-width: none; margin-top: 23px; }
.settings-page #settings-agent-max { max-width: 200px; display: block; }
.settings-page #settings-time-zone { max-width: 320px; display: block; }
.settings-page .settings-mcp-panel,.settings-page .bark-panel { margin: 0; }
.settings-page .settings-index-counts { padding: 19px 21px; border: 1px solid #c5e7f11c; border-radius: 17px; background: #07152247; gap: 18px; }
.settings-page .settings-save { position: sticky; bottom: 18px; z-index: 12; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 20px; align-items: center; margin: 0 12px 0; padding: 14px 18px; border: 1px solid #c0e5f32e; border-radius: 21px; background: #142432f5; box-shadow: 0 12px 38px #0006,inset 0 1px 0 #dff8ff0c; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.settings-save-state { display: flex; align-items: center; gap: 11px; min-width: 0; }
.settings-save-icon { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d4ecff26; border-radius: 50%; color: var(--accent); }
.settings-save-icon .icon { width: 16px; height: 16px; }
.settings-save-state strong { display: block; font-size: 12px; font-weight: 550; line-height: 1.5; }
.settings-save-state small { display: block; font-size: 10px; color: var(--quiet); line-height: 1.6; margin-top: 2px; }
.settings-page .settings-save .button { min-height: 42px; min-width: 128px; border-radius: 13px; font-size: 12px; }
.settings-save[data-state=dirty] { border-color: #67e8de65; }
.settings-save[data-state=dirty] .settings-save-icon { color: var(--playback); border-color: #f8d79255; }
.settings-save[data-state=error] .settings-save-icon { color: var(--red); }
.settings-page .settings-save .form-error { grid-column: 1 / -1; grid-row: 2; margin: 0 2px; font-size: 12px; }
.settings-page #admin-settings { scroll-margin-top: 80px; }
@media (max-width: 1180px) and (min-width: 901px) {
  .settings-workspace { grid-template-columns: 218px minmax(0,1fr); gap: 18px; }
  .settings-navigation { padding: 10px; }
  .settings-navigation-item { gap: 9px; padding: 13px 10px; }
  .settings-navigation-item small { font-size: 10px; }
  .settings-page .settings-panel { padding: 27px 25px; }
  .settings-page .field-row { gap: 14px; }
}
@media (max-width: 900px) {
  .settings-workspace { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .settings-navigation { position: sticky; top: 63px; z-index: 13; flex-direction: row; gap: 7px; max-height: none; padding: 8px; border-radius: 18px; overflow-x: auto; overscroll-behavior-x: contain; }
  .settings-navigation-label,.settings-navigation-note { display: none; }
  .settings-navigation-item { min-width: max-content; min-height: 46px; gap: 8px; padding: 9px 12px; border-radius: 12px; }
  .settings-navigation-item strong { font-size: 12px; font-weight: 550; white-space: nowrap; }
  .settings-navigation-item small { display: none; }
  .settings-navigation-icon { width: auto; height: auto; border: 0; background: none; }
  .settings-navigation-icon .icon { width: 15px; height: 15px; }
  .settings-navigation-item.active .settings-navigation-icon { border: 0; background: none; }
  .settings-page .settings-panel,.settings-page #admin-settings { scroll-margin-top: 140px; }
  .settings-page .settings-save { margin: 0 4px; }
}
@media (max-width: 600px) {
  .settings-page-heading { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: 19px; }
  .settings-account-badge { font-size: 0; gap: 0; margin-top: 5px; }
  .settings-account-badge .icon { width: 20px; height: 20px; }
  .settings-content { gap: 18px; }
  .settings-page .settings-panel { padding: 25px 20px; }
  .settings-main-card { border-radius: 22px; }
  .settings-page .panel-heading h2 { font-size: 17px; }
  .settings-page .panel-heading > .icon { width: 36px; height: 36px; padding: 9px; border-radius: 11px; }
  .settings-page .settings-panel > .muted { font-size: 12px; margin-bottom: 20px; }
  .settings-page .field-row { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .settings-page .switch-row { padding: 15px; gap: 14px; }
  .settings-page .switch-row input { right: 15px; }
  .settings-page .switch-row small { font-size: 11px; }
  .settings-page .settings-save { bottom: max(10px,env(safe-area-inset-bottom)); margin: 0; padding: 12px; gap: 10px; border-radius: 17px; }
  .settings-save-state { gap: 8px; }
  .settings-save-icon { width: 27px; height: 27px; }
  .settings-save-state strong { font-size: 11px; }
  .settings-save-state small { max-width: 180px; font-size: 9px; }
  .settings-page .settings-save .button { min-width: 95px; padding: 9px 11px; font-size: 11px; }
}
@media (prefers-reduced-motion:reduce) { .settings-navigation-item { transition: none; } }
@media (prefers-reduced-transparency:reduce) { .settings-page .settings-save { background: #142432; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast:more) { .settings-navigation,.settings-navigation-item.active,.settings-page .switch-row,.settings-page .settings-save { border-color: #b8dae9; } }