@font-face { font-family: "Archivo"; src: url("/assets/assets/archivo-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/assets/archivo-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/assets/archivo-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/assets/archivo-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --surface-page: #ffffff;
  --surface-sidebar: #f5f5f5;
  --surface-chip: rgba(0, 0, 0, .06);
  --surface-chip-hover: rgba(0, 0, 0, .10);
  --text-primary: #0a0a0a;
  --text-secondary: #3a3a3a;
  --text-tertiary: #6b6b6b;
  --text-muted: #9a9a9a;
  --border-subtle: rgba(0, 0, 0, .10);
  --border-default: rgba(0, 0, 0, .08);
  --border-frame: #e0e0e0;
  --focus: #2f6feb;
  --blue: #2f6feb;
  --green: #18794e;
  --green-soft: #ecf8f2;
  --amber: #9a6700;
  --amber-soft: #fff8e1;
  --red: #c93737;
  --red-soft: #fff0f0;
  background: var(--surface-page);
  color: var(--text-primary);
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; background: var(--surface-page); color: var(--text-primary); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-header { height: 64px; border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,.96); }
.header-inner { width: min(1040px, calc(100% - 40px)); height: 100%; display: flex; align-items: center; gap: 14px; margin: 0 auto; }
.brand-logo { width: 92px; height: auto; }
.header-divider { width: 1px; height: 20px; background: var(--border-frame); }
.product-label { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.prototype-badge, .privacy-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 7px; background: var(--surface-sidebar); color: var(--text-tertiary); font-size: 9px; font-weight: 600; }
.prototype-badge { margin-left: auto; text-transform: uppercase; letter-spacing: .06em; }

.page-shell { width: min(880px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 64px; }
.page-header { margin-bottom: 24px; }
.eyebrow { margin: 0 0 8px; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 36px); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.page-header > p:last-child { margin: 10px 0 0; color: var(--text-tertiary); font-size: 13px; line-height: 1.55; }

.session-card { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; }
.session-section { padding: 27px 30px; border-bottom: 1px solid var(--border-subtle); }
.section-heading { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: flex-start; gap: 13px; }
.section-number { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--text-primary); color: #fff; font-size: 9px; font-weight: 600; }
.section-heading h2 { margin: 1px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.section-heading p { margin: 6px 0 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; }
.section-body { margin: 20px 0 0 41px; }

label { display: block; margin: 14px 0 6px; color: var(--text-secondary); font-size: 10px; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid var(--border-subtle); border-radius: 8px; outline: 0; background: #fff; color: var(--text-primary); padding: 10px 11px; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(47,111,235,.10); }
select { min-height: 40px; }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
textarea:disabled { background: var(--surface-sidebar); color: var(--text-muted); cursor: not-allowed; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field-hint, .hint { margin: 6px 0 0; color: var(--text-muted); font-size: 9px; line-height: 1.5; }

.behavior-controls { min-width: 0; margin: 16px 0 2px; border: 1px solid var(--border-subtle); border-radius: 9px; padding: 12px 13px 13px; }
.behavior-controls legend { padding: 0 5px; color: var(--text-secondary); font-size: 10px; font-weight: 600; }
.behavior-options { display: grid; grid-template-columns: auto auto minmax(150px, 1fr); align-items: center; gap: 10px 16px; }
.behavior-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; cursor: pointer; }
.behavior-toggle input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--text-primary); }
.behavior-toggle span, .language-intensity > span { color: var(--text-secondary); font-size: 10px; font-weight: 500; }
.language-intensity { display: grid; grid-template-columns: auto minmax(110px, 1fr); align-items: center; gap: 8px; margin: 0; }
.language-intensity select { min-height: 34px; padding: 7px 9px; }

.replay-library { margin-top: 16px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--surface-sidebar); }
.replay-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.replay-heading strong { font-size: 11px; font-weight: 600; }
.privacy-badge { background: #fff; }
.replay-details { margin-top: 11px; padding: 13px; border: 1px solid var(--border-subtle); border-radius: 8px; background: #fff; }
.replay-details p { margin: 6px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.replay-metadata { color: var(--text-muted) !important; font-size: 9px !important; }

.mode-selector { margin-bottom: 17px; padding: 13px 14px 15px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--surface-sidebar); }
.mode-selector label { margin-top: 0; }
.mode-selector select { background: #fff; font-weight: 500; }
.real-data-warning { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 13px; border: 1px solid #e5b9b9; border-radius: 9px; background: var(--red-soft); color: #7d2525; font-size: 10px; line-height: 1.5; }
.real-data-warning strong { flex: 0 0 auto; font-size: 10px; }
.branch-fields { align-items: end; }
.branch-source-details { min-height: 40px; display: flex; align-items: center; margin-top: 14px; padding: 10px 11px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-sidebar); color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.branch-transcript-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 18px 0 9px; }
.branch-transcript-heading strong { font-size: 11px; }
.branch-transcript-heading p { margin: 5px 0 0; color: var(--text-tertiary); font-size: 9px; line-height: 1.5; }
.real-data-badge { flex: 0 0 auto; background: var(--red-soft); color: var(--red); }
.branch-transcript { max-height: 420px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 9px; padding: 7px; background: var(--surface-sidebar); }
.branch-transcript .empty { margin: 55px 12px; color: var(--text-muted); font-size: 10px; text-align: center; }
.branch-turn { width: 88%; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 6px 0; border: 1px solid transparent; border-radius: 8px; padding: 10px 11px; background: #fff; color: var(--text-secondary); text-align: left; }
button.branch-turn { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
button.branch-turn:hover { border-color: rgba(47,111,235,.38); box-shadow: 0 2px 9px rgba(0,0,0,.05); transform: translateY(-1px); }
.branch-turn.agent { margin-left: 12%; background: #f3f5f7; }
.branch-turn.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,235,.11); }
.branch-turn-meta { color: var(--text-muted); font-size: 8px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.branch-turn-text { font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.branch-turn-action { margin-top: 2px; color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.status-panel { display: flex; align-items: flex-start; gap: 10px; min-height: 45px; padding: 13px 14px; border-radius: 8px; background: var(--surface-sidebar); }
.status-indicator { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--text-muted); }
#status { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.status-panel:has(#status[data-state="working"]) { background: var(--amber-soft); }
.status-panel:has(#status[data-state="working"]) .status-indicator { background: var(--amber); }
.status-panel:has(#status[data-state="working"]) #status { color: var(--amber); }
.status-panel:has(#status[data-state="ready"]) { background: var(--green-soft); }
.status-panel:has(#status[data-state="ready"]) .status-indicator { background: var(--green); }
.status-panel:has(#status[data-state="ready"]) #status { color: var(--green); }
.status-panel:has(#status[data-state="error"]) { background: var(--red-soft); }
.status-panel:has(#status[data-state="error"]) .status-indicator { background: var(--red); }
.status-panel:has(#status[data-state="error"]) #status { color: var(--red); }
.download-link { display: inline-flex; margin-top: 10px; color: var(--blue); font-size: 10px; font-weight: 600; text-underline-offset: 3px; }

#timeline { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; margin: 19px 0 0; padding: 0; list-style: none; }
#timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-muted); text-align: center; }
#timeline li:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: calc(50% + 14px); width: calc(100% - 28px); height: 1px; background: var(--border-frame); }
#timeline li span { position: relative; z-index: 1; width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-frame); border-radius: 50%; background: #fff; font-size: 8px; }
#timeline li small { font-size: 8px; }
#timeline li.active { color: var(--text-primary); }
#timeline li.active span { border-color: var(--text-primary); background: var(--text-primary); color: #fff; }
#timeline li.active:not(:last-child)::after { background: var(--text-primary); }

.transcript-privacy { align-self: start; white-space: nowrap; }
#transcript { min-height: 150px; max-height: 300px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 14px; background: #fff; }
#transcript .empty { margin: 56px 0; color: var(--text-muted); font-size: 10px; text-align: center; }
.transcript-line { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--border-default); color: var(--text-secondary); font-size: 11px; line-height: 1.55; }
.transcript-line:last-child { border-bottom: 0; }
.transcript-line strong { color: var(--text-primary); }
.transcript-line.interim { opacity: .6; }
#remote-audio { display: none; }

.session-actions { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 30px; background: var(--surface-sidebar); }
.session-actions > p { margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.session-actions > div { display: flex; gap: 9px; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; padding: 0 15px; font-size: 11px; font-weight: 600; cursor: pointer; }
.button:disabled { opacity: .42; cursor: not-allowed; }
.primary-button { background: var(--text-primary); color: #fff; }
.primary-button:hover:not(:disabled) { background: #2b2b2b; }
.secondary-button { border-color: var(--border-subtle); background: #fff; color: var(--text-secondary); }
.secondary-button:hover:not(:disabled) { border-color: rgba(0,0,0,.24); }
.danger-button:not(:disabled) { color: var(--red); }
.privacy-note { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin: 18px auto 0; color: var(--text-muted); font-size: 9px; line-height: 1.5; text-align: center; }

@media (max-width: 680px) {
  .header-inner, .page-shell { width: min(100% - 28px, 880px); }
  .page-shell { padding: 31px 0 44px; }
  .session-section { padding: 23px 18px; }
  .section-heading { grid-template-columns: 25px minmax(0,1fr); gap: 10px; }
  .section-number { width: 22px; height: 22px; }
  .transcript-privacy { grid-column: 2; margin-top: 6px; justify-self: start; }
  .section-body { margin: 17px 0 0 35px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .branch-source-details { margin-top: 8px; }
  .behavior-options { grid-template-columns: 1fr 1fr; }
  .language-intensity { grid-column: 1 / -1; }
  .session-actions { align-items: stretch; flex-direction: column; padding: 16px 18px; }
  .session-actions > p { text-align: center; }
  .session-actions > div { width: 100%; }
  .session-actions .button { flex: 1; }
}

@media (max-width: 430px) {
  .header-divider, .product-label { display: none; }
  .page-header { margin-bottom: 19px; }
  h1 { font-size: 28px; }
  .session-section { padding-right: 15px; padding-left: 15px; }
  .section-body { margin-left: 0; }
  .behavior-options { grid-template-columns: 1fr; }
  .language-intensity { grid-column: auto; }
  #timeline li small { font-size: 7px; }
  .session-actions > div { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}