:root{
  --ink-900:#16232A;
  --ink-500:#4B5D64;
  --paper-050:#FBF9F4;
  --paper-100:#EEEAE0;
  --paper-200:#E2DCCC;
  --amber-500:#C97A22;
  --amber-400:#E2A052;
  --line:rgba(22,35,42,0.14);
  --radius-s:3px;
  --radius-m:6px;
  --bg:var(--paper-100);
  --surface:var(--paper-050);
  --surface-raised:#ffffff;
  --text:var(--ink-900);
  --text-dim:var(--ink-500);
  --border:var(--line);
  --accent:var(--amber-500);
  --accent-ink:#ffffff;
  --danger:#E0483E;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#10181C; --surface:#182228; --surface-raised:#1E2A30;
    --text:#F1ECE1; --text-dim:#9FAEB2; --border:rgba(241,236,225,0.14);
    --accent:var(--amber-400); --accent-ink:#16232A;
  }
}
:root[data-theme="dark"]{
  --bg:#10181C; --surface:#182228; --surface-raised:#1E2A30;
  --text:#F1ECE1; --text-dim:#9FAEB2; --border:rgba(241,236,225,0.14);
  --accent:var(--amber-400); --accent-ink:#16232A;
}
:root[data-theme="light"]{
  --bg:var(--paper-100); --surface:var(--paper-050); --surface-raised:#ffffff;
  --text:var(--ink-900); --text-dim:var(--ink-500); --border:var(--line);
  --accent:var(--amber-500); --accent-ink:#ffffff;
}

*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1.6px) 0 0/16px 16px,
    var(--bg);
  color:var(--text);
  font-family:"Segoe UI","Noto Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.display{
  font-family:"Bahnschrift","Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; text-wrap:balance;
}
.wrap{ max-width:560px; margin:0 auto; padding:40px 20px 60px; }
header.top{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
header.top .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
header.top .name{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }

.stage{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:36px 28px; text-align:center;
  box-shadow:0 4px 24px rgba(22,35,42,0.08);
}
.icon-badge{
  width:64px; height:64px; border-radius:18px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 12px rgba(22,35,42,0.22);
  transition:background-color .2s ease, transform .2s ease;
}
.icon-badge svg{ width:32px; height:32px; }
.icon-badge.pulse{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

h1.display{ font-size:22px; margin:0 0 8px; }
.sub{ color:var(--text-dim); line-height:1.5; margin:0 0 26px; font-size:14.5px; }

.call-btn{
  border:none; border-radius:100px; padding:16px 32px; font:inherit; font-weight:700; font-size:15px;
  cursor:pointer; background:var(--accent); color:var(--accent-ink);
  box-shadow:0 6px 16px rgba(22,35,42,0.18);
  transition:background-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.call-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(22,35,42,0.22); }
.call-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.call-btn.hangup{ background:var(--danger); color:#fff; }

.status-line{ margin-top:16px; font-size:13.5px; color:var(--text-dim); min-height:18px; }
.status-line.error{ color:var(--danger); }

.transcript{
  margin-top:24px; text-align:left; max-height:280px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface-raised);
  padding:14px 16px; display:none; flex-direction:column; gap:10px;
}
.transcript.visible{ display:flex; }
.transcript .line{ font-size:13.5px; line-height:1.5; }
.transcript .line .who{ font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--text-dim); display:block; margin-bottom:2px; }
.transcript .line.assistant .who{ color:var(--accent); }

.key-facts{
  margin-top:16px; text-align:left; display:none;
  border:1px solid var(--accent); border-radius:var(--radius-m);
  background:color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
  padding:14px 16px;
}
.key-facts.visible{ display:block; }
.key-facts-title{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent); margin-bottom:10px;
}
.key-facts-list{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }
.key-fact{
  font-size:13.5px; line-height:1.4; color:var(--text);
  padding-left:14px; position:relative;
  animation:factIn .25s ease;
}
.key-fact::before{
  content:""; position:absolute; left:0; top:7px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
@keyframes factIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

.note{
  margin-top:20px; padding:12px 14px; border:1px dashed var(--border);
  border-radius:var(--radius-m); font-size:12px; color:var(--text-dim); line-height:1.5;
}
footer.foot{ margin-top:24px; text-align:center; font-size:12px; color:var(--text-dim); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }