@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #f7f9fc; --surface: #ffffff; --surface-2: #f0f3f9; --border: #dde3ee;
  --text: #09142d; --text-secondary: #536078; --text-muted: #7b879d;
  --navy: #07183f; --blue: #2855ff; --cyan: #09bff7; --violet: #7138ff; --magenta: #c72cf3;
  --success: #16845b; --danger: #c54152; --focus: rgb(40 85 255 / 24%);
  --brand-gradient: linear-gradient(90deg, #09bff7 0%, #2855ff 48%, #7138ff 76%, #c72cf3 100%);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text); background: var(--bg);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080d1c; --surface: #0e162b; --surface-2: #151f38; --border: #27334d;
  --text: #f4f7fc; --text-secondary: #aab5c9; --text-muted: #75839d;
  --navy: #07183f; --blue: #4770ff; --cyan: #20ccff; --violet: #895dff; --magenta: #d34af6;
  --success: #45c994; --danger: #ff7182; --focus: rgb(71 112 255 / 32%);
}

:root[data-theme="dark"] .logotype { filter: brightness(0) invert(1); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #080d1c; --surface: #0e162b; --surface-2: #151f38; --border: #27334d;
    --text: #f4f7fc; --text-secondary: #aab5c9; --text-muted: #75839d;
    --navy: #07183f; --blue: #4770ff; --cyan: #20ccff; --violet: #895dff; --magenta: #d34af6;
    --success: #45c994; --danger: #ff7182; --focus: rgb(71 112 255 / 32%);
  }
  :root:not([data-theme]) .logotype { filter: brightness(0) invert(1); }
}

* { box-sizing: border-box; }
html { min-width: 560px; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); }
button, select, textarea { font: inherit; }
button, select, summary { -webkit-tap-highlight-color: transparent; }
.app-shell { max-width: 1040px; margin: 0 auto; padding: 30px 42px 40px; }

.app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; margin-bottom: 26px; }
.logotype { display: block; width: 152px; height: auto; }
.header-tools, .listening-control, .listening-actions, .actions, .section-heading,
.answer-heading-row, .transcript-heading-row, .status-row, .session-row { display: flex; align-items: center; }
.header-tools { justify-content: flex-end; gap: 12px; }
.listening-control { gap: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.listening-actions, .actions { gap: 8px; }
.header-status-dot { width: 9px; height: 9px; border: 1px solid var(--text-muted); border-radius: 50%; background: transparent; }
.listening-control[data-state="listening"] .header-status-dot { border: 0; background: var(--brand-gradient); animation: activity-pulse 1.8s ease-in-out infinite; }
.listening-control[data-state="thinking"] .header-status-dot { border-color: var(--violet); background: var(--violet); }
.listening-control[data-state="error"] { color: var(--danger); }
.listening-control[data-state="error"] .header-status-dot { border-color: var(--danger); background: var(--danger); }
.theme-control select { min-width: 82px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 26px 7px 9px; color: var(--text-secondary); background: var(--surface); font-size: 13px; font-weight: 500; }

.label { margin: 0; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.09em; }
.primary-response { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.prompt-block { padding: 22px 28px 20px; border-bottom: 1px solid var(--border); }
.section-heading { justify-content: space-between; gap: 16px; }
.quiet-status, .answer-question { margin: 0; color: var(--text-muted); font-size: 12px; }
.latest-question { margin: 10px 0 0; color: var(--text-secondary); font-size: 16px; font-weight: 500; line-height: 1.5; }
.answer-block { padding: 26px 28px 24px; background: var(--surface); }
.answer-heading-row { align-items: flex-start; }
.answer-question { max-width: 680px; margin-top: 7px; line-height: 1.4; }
.suggested-answer { min-height: 178px; max-width: 92ch; margin-top: 19px; color: var(--text); font-size: 19px; font-weight: 400; line-height: 1.58; white-space: pre-wrap; }
.answer-actions { justify-content: flex-end; margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--border); }

.secondary-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 28px; margin-top: 28px; }
.secondary-section { min-width: 0; padding-top: 18px; border-top: 1px solid var(--border); }
.question-history { margin: 12px 0 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 13px; }
.question-history li { padding: 9px 0; border-bottom: 1px solid var(--border); line-height: 1.45; }
.question-history li:first-child { color: var(--text); font-weight: 500; }
.question-history:not(:empty) + .empty-hint { display: none; }
.empty-hint, .technical-note { margin: 13px 0 0; color: var(--text-muted); font-size: 12px; }
.context-grid { display: grid; gap: 8px; margin-top: 13px; }
.context-slot { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 13px; }
.context-slot > div { display: grid; min-width: 0; gap: 2px; }
.context-grid strong { color: var(--text); font-size: 12px; font-weight: 600; }
.context-grid strong::before { content: "•"; margin-right: 6px; color: var(--text-muted); }
.context-grid strong[data-state="loaded"]::before { color: var(--success); }
.context-grid strong[data-state="not-selected"] { color: var(--text-muted); }
.context-grid strong[data-state="error"] { color: var(--danger); }
.context-slot small { color: var(--danger); font-size: 11px; line-height: 1.3; }
.context-slot small:empty { display: none; }
.session-row { justify-content: space-between; gap: 16px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); font-size: 12px; }
.session-row > div { display: flex; flex-direction: column; gap: 3px; color: var(--text-secondary); }
.session-label { color: var(--text-muted); }
.meter-row { display: grid; grid-template-columns: 1fr 48px; gap: 12px; align-items: center; margin-top: 12px; }
progress { width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 5px; accent-color: var(--blue); }
#numeric-level { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.live-details { margin-top: 28px; border-top: 1px solid var(--border); }
.live-details > summary { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.live-details > summary::-webkit-details-marker { display: none; }
.live-details > summary::before { content: "+"; width: 20px; color: var(--text-muted); }
.live-details[open] > summary::before { content: "−"; }
.live-details > summary > span:first-of-type { flex: 1; }
.transcript-heading-row { justify-content: space-between; margin-bottom: 12px; }
.technical-note { margin: 0; }
.transcript { min-height: 112px; max-height: 260px; overflow-y: auto; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-secondary); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.answer-block .transcript { margin-top: 16px; }
.interim { color: var(--text-muted); font-style: italic; }
.placeholder { color: var(--text-muted); }
.capture-section { margin-top: 28px; }
.capture-section .technical-note { margin-top: 5px; }
.track-label { max-width: 50%; overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.detector-harness { margin-top: 14px; padding-bottom: 10px; }
.detector-harness summary { color: var(--text-muted); font-size: 12px; cursor: pointer; }
.detector-harness textarea { width: 100%; margin: 12px 0 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; color: var(--text); background: var(--surface); font-size: 13px; }
.status-row { gap: 7px; margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.status-row:has(.active) .dot { background: var(--success); }

button { border: 1px solid var(--blue); border-radius: 8px; padding: 8px 12px; color: #fff; background: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
button:hover:not(:disabled) { border-color: var(--violet); background: var(--violet); }
button:active:not(:disabled) { transform: translateY(1px); }
button.secondary { border-color: var(--border); color: var(--text-secondary); background: transparent; }
button.secondary:hover:not(:disabled), button.text-button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: var(--surface-2); }
button.text-button { border: 0; padding: 3px 0; color: var(--text-muted); background: transparent; font-size: 12px; font-weight: 600; }
button:disabled { cursor: default; opacity: 0.42; }
button:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.error { display: none; margin: -12px 0 18px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: 8px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); font-size: 13px; }
.error:not(:empty) { display: block; }
footer { margin-top: 24px; color: var(--text-muted); font-size: 11px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes activity-pulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
@media (max-width: 760px) {
  html { min-width: 0; }
  .app-shell { padding: 22px 20px 32px; }
  .app-header { align-items: flex-start; }
  .header-tools { flex-wrap: wrap; }
  .secondary-grid { grid-template-columns: 1fr; gap: 20px; }
  .answer-block, .prompt-block { padding-left: 20px; padding-right: 20px; }
  .suggested-answer { font-size: 18px; }
}
@media (max-width: 600px) {
  .app-header { flex-direction: column; }
  .header-tools { width: 100%; justify-content: flex-start; }
  .answer-heading-row { flex-direction: column; gap: 10px; }
  .answer-actions { justify-content: flex-start; flex-wrap: wrap; }
}