/* Two devices, one shared playback clock. */
.ai-head { text-align:center; }
.ai-head .t-lede { max-width:none; margin:18px auto 24px; }
.ai-modes { display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:var(--r-3); background:var(--panel); }
.ai-mode { padding:9px 18px; font-size:13px; border-radius:var(--r-2); color:var(--ink-2); }
.ai-mode[aria-selected="true"] { background:var(--raised); color:var(--ink); }
.ai-stage { position:relative; display:grid; grid-template-columns:minmax(0,340px) minmax(280px,400px) minmax(0,340px); justify-content:center; align-items:start; margin:48px auto 32px; }
.ai-col { min-width:0; position:relative; z-index:1; }
.ai-crop { height:390px; overflow:hidden; padding:0 4px; mask-image:linear-gradient(to bottom,var(--ink) 86%,transparent 100%); }
/* Device: a real handset reads as one object. Frame stays dark in both themes, like the hardware. */
.ai-phone { --frame:#0c0d0e; position:relative; width:100%; height:760px; padding:10px; border-radius:48px; background:var(--frame);
  box-shadow: inset 0 0 0 1px #4a4c50, inset 0 0 0 2px #1b1c1f, inset 0 0 0 3.5px #2c2e32; }
[data-theme="light"] .ai-phone { box-shadow: inset 0 0 0 1px #9a9890, inset 0 0 0 2px #2a2b2e, inset 0 0 0 3.5px #3a3c40; }
.ai-phone-inner { height:100%; }
.ai-screen { position:relative; height:100%; overflow:hidden; border-radius:38px; background:var(--panel); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.ai-btn { position:absolute; width:3px; border-radius:2px; background:#2c2e32; }
[data-theme="light"] .ai-btn { background:#5a5b58; }
.ai-btn--a { left:-3px; top:96px; height:22px; }
.ai-btn--b { left:-3px; top:136px; height:42px; }
.ai-btn--c { left:-3px; top:188px; height:42px; }
.ai-btn--p { right:-3px; top:150px; height:66px; }
.ai-status { height:50px; position:relative; display:flex; align-items:center; padding:2px 24px 0 30px; color:var(--ink); }
.ai-time { margin-right:auto; font:600 13px/1 var(--font-body); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.ai-island { position:absolute; left:50%; top:11px; width:94px; height:27px; transform:translateX(-50%); border-radius:20px; background:#000; }
.ai-lens { position:absolute; right:9px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#11151c; box-shadow: inset 0 0 0 2px #07090c, inset 0 0 0 3px #1a2130; }
.ai-sys { display:flex; align-items:center; gap:5px; }
.ai-sig { width:16px; height:11px; fill:currentColor; }
.ai-wifi { width:15px; height:11px; fill:currentColor; }
.ai-batt { position:relative; width:23px; height:11px; border:1px solid color-mix(in oklab, currentColor 45%, transparent); border-radius:3.5px; padding:1.5px; margin-left:1px; }
.ai-batt::after { content:""; position:absolute; right:-3.5px; top:3px; width:1.5px; height:3.5px; border-radius:0 1px 1px 0; background:color-mix(in oklab, currentColor 45%, transparent); }
.ai-batt span { display:block; width:78%; height:100%; border-radius:1.5px; background:currentColor; }
.ai-app-head { display:flex; align-items:center; gap:9px; min-height:46px; padding:8px 16px; border-bottom:1px solid var(--line); font-size:12px; }
.ai-app-head b { flex:1; min-width:0; font-weight:600; }
.ai-avatar { width:22px; color:var(--accent); }
.ai-avatar svg { width:100%; }
.ai-ico { display:inline-block; width:18px; height:18px; flex-shrink:0; background:currentColor; mask:var(--i) center / contain no-repeat; }
.ai-ico--brand { background:none; mask:none; object-fit:contain; }
.ai-msgs { padding:15px 16px; font-size:12px; line-height:1.5; }
.ai-message { margin:0 0 13px; min-height:36px; }
.ai-prompt { margin-left:20px; padding:10px 12px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-3); }
.ai-tool { display:flex; align-items:center; gap:7px; padding:8px; margin:0 0 13px; border:1px solid var(--line); border-radius:var(--r-2); font-size:10px; color:var(--ink-2); }
.ai-tool .ph { color:var(--accent); font-size:14px; }
.ai-badges { display:flex; justify-content:center; gap:12px; margin-top:-4px; position:relative; }
.ai-badge { width:68px; height:68px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-3); background:var(--panel); color:var(--ink-2); }
.ai-badge .ai-ico { width:28px; height:28px; }
.ai-hub { padding-top:48px; display:flex; align-items:center; flex-direction:column; position:relative; z-index:2; }
.ai-brand { display:flex; align-items:center; gap:7px; padding:0 10px; background:var(--bg); font:500 20px var(--font-display); letter-spacing:2px; height:36px; }
.ai-brand svg { width:26px; height:26px; color:var(--accent); }
.ai-actions { width:250px; max-width:100%; padding:5px 12px; margin:28px 0 0; list-style:none; border:1px solid var(--line); border-radius:var(--r-3); background:var(--panel); }
.ai-step { min-height:42px; display:flex; align-items:center; gap:10px; font-size:11px; color:var(--ink-2); }
.ai-step+.ai-step { border-top:1px solid var(--line); }
.ai-step>.ph { font-size:18px; }
.ai-step>.ai-ico { width:16px; height:16px; }
.ai-state { margin-left:auto; flex-shrink:0; width:12px; height:12px; border:1px solid var(--line-2); border-radius:6px; }
.ai-step[data-state="run"] { color:var(--ink); }
.ai-step[data-state="run"] .ai-state { border-color:var(--line-2); border-top-color:var(--accent); }
.ai-step[data-state="done"] .ai-state { width:7px; height:7px; margin-right:2px; border:0; border-radius:0; background:var(--accent); }
.ai-route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; fill:none; stroke:var(--accent); stroke-width:1.5; }
.ai-track { opacity:.16; }
.ai-line { stroke-dasharray:1; stroke-dashoffset:1; }
.ai-ctrl { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
#ai-toggle { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 12px; font-size:12px; color:var(--ink-2); }
#ai-toggle:disabled { opacity:.5; cursor:default; }
.ai-pills { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.ai-pill { position:relative; overflow:hidden; min-height:40px; padding:9px 14px; font-size:12px; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-3); }
.ai-pill[aria-pressed="true"] { color:var(--ink); border-color:var(--line-2); }
.ai-pill>span:last-child { position:relative; }
.ai-pill-bar { position:absolute; inset:0; background:var(--accent-wash); clip-path:inset(0 100% 0 0); }
.ai-note { margin:17px 0 10px; text-align:center; color:var(--ink-2); font-size:12px; }
.ai-foot { text-align:center; font-size:12px; color:var(--ink-2); }
.ai-foot a { text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px; }
.ai-app-sub { padding:10px 16px; font-size:10px; color:var(--ink-2); border-bottom:1px solid var(--line); }
.ai-result { font-size:11px; max-height:230px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.dc-day { display:flex; align-items:center; gap:10px; padding:12px 16px; color:var(--ink-2); }
.dc-day b { font:28px var(--font-display); color:var(--ink); }
.dc-day span:last-child { margin-left:auto; font-size:9px; }
.dc-agenda { padding:0 12px; }
.dc-agenda>div { display:flex; align-items:start; gap:12px; min-height:57px; padding:8px 0; border-top:1px solid var(--line); }
.dc-agenda time { padding-top:3px; color:var(--ink-2); font:9px var(--font-mono); }
.dc-agenda p { margin:0; padding:2px 8px; border-left:2px solid var(--line-2); }
.dc-agenda small { display:block; color:var(--ink-2); font-size:9px; }
.dc-new p { border-color:var(--accent); background:var(--accent-wash); }
.ds-t { width:100%; table-layout:fixed; border-collapse:collapse; font-size:9px; }
.ds-t th,.ds-t td { padding:9px 4px; text-align:left; border:1px solid var(--line); overflow-wrap:anywhere; }
.ds-t th { font-weight:500; color:var(--ink-2); background:var(--raised); }
.ds-t th:first-child { width:22px; }
.ds-t th:nth-child(2) { width:48px; }
.ds-t th:last-child { width:76px; }
.ds-t .r { text-align:right; font-variant-numeric:tabular-nums; }
.ds-t .new,.ds-t .tot { background:var(--accent-wash); }
.dn { padding:14px 16px; }
.dn .t-caption { font-size:9px; }
.dn h4 { font:500 19px/1.2 var(--font-display); margin:12px 0; }
.dn-props { display:grid; grid-template-columns:40px 1fr; gap:5px; font-size:9px; }
.dn-props dt { color:var(--ink-2); }
.dn-props dd { margin:0; }
.dn h5 { font-size:11px; margin:14px 0 6px; }
.dn p,.dn ul { margin:0; font-size:10px; }
.dn ul { padding-left:14px; }
.dp { padding:12px; }
.dp-art { padding:10px; margin-bottom:8px; border:1px solid var(--line); font:18px var(--font-display); }
.dp-art small { display:block; font:9px var(--font-body); color:var(--ink-2); margin-top:4px; }
.dp-row { display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
.dp-n { font-size:10px; }
.dp-n small { display:block; font-size:9px; color:var(--ink-2); }
.dp-c { display:none; }
.dp-row .chip { font:8px var(--font-body); border:0; padding:0; color:var(--accent); background:none; }
.dp-row .dot,.da .dot { display:none; }
.da { padding:12px; }
.da-row { display:grid; grid-template-columns:16px 1fr 25px; align-items:center; gap:7px; padding:9px 0; border-bottom:1px solid var(--line); font-size:10px; }
.da-row.h { display:none; }
.da-row .ai-ico { width:14px; height:14px; }
.da-bar { display:none; }
.da-amt { grid-column:2 / 4; color:var(--accent); font-size:9px; }
.da .chip { border:0; padding:0; background:none; font-size:9px; color:var(--ink-2); }
.da-roas { font:9px var(--font-mono); }
.da-sum { display:flex; flex-wrap:wrap; gap:12px; padding:12px 0; font-size:9px; }
.da-sum b { display:block; }
@media (hover:hover) and (pointer:fine) {
  .ai-mode:hover,.ai-pill:hover,#ai-toggle:hover,.ai-foot a:hover { color:var(--accent); }
}
@media (max-width:899px) {
  .ai-stage { grid-template-columns:minmax(0,340px); gap:30px; margin-top:32px; }
  .ai-hub { padding-top:0; }
  .ai-actions { margin-top:18px; }
  .ai-route { display:none; }
  .ai-head .t-lede { font-size:15px; }
  .ai-mode { padding:9px 13px; }
  .ai-ctrl { gap:6px; }
}
@media (max-width:359px) {
  .ai-msgs { padding:12px; font-size:11px; }
  .ai-mode { padding:9px 10px; font-size:12px; }
}