/* Auto Remoto: the chat with the coordinator on a phone. Same tokens as Auto (its design system,
   dark only) and the desktop's timeline styles, laid out for one column and touch. */
:root{
  --bg-000:#1F1F1E;--bg-100:#191918;--bg-200:#2B2B29;--surface-raised:#272726;--user-bubble:#30302E;--code-bg:#161615;
  --text-000:#F2F1EE;--text-200:#B6B4AE;--text-400:#A3A19B;--border-100:#343432;--border-300:#75736D;
  --accent:#8DBBFF;--on-accent:#0E1A2E;--accent-soft:#1E2B40;--success:#6FCF9B;--warning:#E9B862;--danger:#FF8F80;
  --font-sans:Manrope,system-ui,sans-serif;--font-serif:Newsreader,Georgia,serif;--font-mono:"Cascadia Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  /* What the desktop timeline's styles read. */
  --muted:var(--text-200);--line:var(--border-100);--theme-line:var(--border-100);--theme-text:var(--text-000);--theme-muted:var(--text-200);--theme-border:var(--border-100);--theme-raised:rgba(255,255,255,.04);--chat-font-size:15px;--chat-column:100%;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg-000);color:var(--text-000);font:400 15px/24px var(--font-sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.d{font:400 13px/18px var(--font-sans);color:var(--text-200)}
.t{font:500 14px/20px var(--font-sans)}
.center{text-align:center}
.page-title{margin:0;font:400 24px/32px var(--font-serif)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes pulse{50%{opacity:.25}}
@keyframes reveal{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.avatar{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface-raised);border:1px solid var(--border-100);color:var(--accent)}
.avatar svg{width:34px;height:34px}
.avatar.big{width:88px;height:88px}.avatar.big svg{width:46px;height:46px}
.card{border:1px solid var(--border-100);border-radius:16px;background:var(--surface-raised)}

/* Pairing and not paired */
.pair{padding:env(safe-area-inset-top) 24px calc(32px + env(safe-area-inset-bottom))}
.pair-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.pair-card{width:100%;padding:16px;display:flex;flex-direction:column;gap:14px;text-align:left}
.pc-row{display:flex;align-items:center;gap:12px}
.pc-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--bg-100)}
.pc-icon svg{width:20px;height:20px;fill:none;stroke:var(--text-200);stroke-width:1.5;stroke-linecap:round}
.pair-code{padding-top:14px;border-top:1px solid var(--border-100)}
.code{margin-top:6px;font:500 28px/36px var(--font-mono);letter-spacing:.08em}
.pair-actions{display:flex;flex-direction:column;gap:12px}
.lead{max-width:300px}
.primary{height:48px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font:600 15px/20px var(--font-sans)}
.primary:disabled{opacity:.5}
.error{margin:0;text-align:center;font:500 13px/18px var(--font-sans);color:var(--danger)}
.secondary{height:48px;padding:0 16px;border:1px solid var(--border-100);border-radius:10px;background:transparent;font:500 15px/20px var(--font-sans)}
.secondary:disabled{opacity:.5}
/* The camera, inside the app, while it reads the code. */
.pair.scanning .intro{display:none}
.scanner{position:relative;width:100%;max-width:340px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bg-100);border:1px solid var(--border-100)}
.scanner video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;inset:14%;border:2px solid var(--accent);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.paste{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.paste-row{display:flex;gap:8px}
/* 16px keeps iOS from zooming in on the field. */
.paste input{flex:1;min-width:0;height:48px;padding:0 12px;border:1px solid var(--border-100);border-radius:10px;background:var(--bg-100);color:var(--text-000);font:400 16px/24px var(--font-sans);outline:0}
.paste input:focus{border-color:var(--border-300)}
.paste input::placeholder{color:var(--text-400)}

/* Chat */
.head{flex:none;display:flex;flex-direction:column;align-items:center;padding:16px 16px 8px}
.name-pill{margin-top:-10px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 14px;border-radius:999px;border:1px solid var(--border-100);background:var(--surface-raised);font:600 15px/20px var(--font-sans)}
.name-pill svg{width:14px;height:14px;fill:none;stroke:var(--text-200);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.status-pill{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-100);background:var(--bg-100);font:500 13px/18px var(--font-sans);color:var(--warning)}
.status-pill .dot,.state .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.chat.offline .avatar{color:var(--border-300)}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.column{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 16px 8px}
/* The desktop timeline, on a phone: the person's bubble a little wider, no room lost on the sides. */
.auto-timeline{font-size:15px;line-height:24px}
.auto-timeline .timeline-message{margin:0 0 24px}
.auto-timeline .timeline-message.user{max-width:85%;padding:10px 16px;border:0;border-radius:18px;background:var(--user-bubble)}
.auto-timeline .timeline-empty{margin:40px auto;font:400 24px/32px var(--font-serif);color:var(--text-000)}
.auto-timeline .timeline-tool-detail{font-family:var(--font-mono)}

/* Decisions: the desktop's question card. */
.decisions{display:flex;flex-direction:column;gap:12px}
.dc-card{padding:16px;border:1px solid var(--border-100);border-left:3px solid var(--warning);border-radius:16px;background:var(--surface-raised);display:flex;flex-direction:column;gap:12px;animation:reveal .16s ease-out}
.dc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dc-kind{font:600 12px/16px var(--font-sans);color:var(--warning)}
.dc-from{font:500 12px/16px var(--font-sans);color:var(--text-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-ctx{margin:0;font:400 13px/18px var(--font-sans);color:var(--text-200);white-space:pre-wrap;overflow-wrap:anywhere}
.dc-foot{display:flex;justify-content:flex-start}
.dc-dismiss{height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--text-200);font:500 13px/18px var(--font-sans)}
.dc-q{margin:0;font:500 15px/22px var(--font-sans);white-space:pre-wrap;overflow-wrap:anywhere}
.dc-options{display:flex;flex-direction:column;gap:6px}
.dc-option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;padding:10px 12px;text-align:left;border-radius:10px;border:1px solid var(--border-100);background:var(--bg-100);font:500 14px/20px var(--font-sans)}
.dc-option.rec{border-color:var(--accent);background:var(--accent-soft)}
.dc-option .l{display:inline-flex;align-items:center;gap:8px}
.dc-option .o{font-weight:400;font-size:13px;line-height:18px;color:var(--text-200)}
.dc-rec{padding:1px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 12px/16px var(--font-sans)}
.dc-option:disabled{opacity:.6}

/* Composer */
.dock{flex:none;padding:8px 12px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.hint{margin:0 4px;font:400 13px/18px var(--font-sans);color:var(--text-200)}
.composer{display:flex;align-items:flex-end;gap:6px;padding:7px 7px 7px 14px;border-radius:22px;border:1px solid var(--border-100);background:var(--surface-raised);box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.25)}
.composer:focus-within{border-color:var(--border-300)}
/* 16px keeps iOS from zooming in on the field. */
.composer textarea{flex:1;min-width:0;min-height:36px;max-height:160px;padding:6px 2px;resize:none;border:0;outline:0;background:transparent;font:400 16px/24px var(--font-sans)}
.composer textarea::placeholder{color:var(--text-400)}
.send,.stop{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.send{border:0;background:var(--accent)}
.send svg{width:18px;height:18px;fill:none;stroke:var(--on-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.send:disabled{opacity:.5;cursor:default}
.stop{border:1px solid var(--border-300);background:transparent}
.stop span{width:11px;height:11px;border-radius:2px;background:var(--text-000)}
.chat.offline .composer{opacity:.5;box-shadow:none}

/* Settings sheet */
.sheet-veil{position:fixed;inset:0;background:rgba(0,0,0,.56);animation:reveal .16s ease-out}
.sheet{position:fixed;left:0;right:0;bottom:0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;border-top:1px solid var(--border-100);background:var(--surface-raised);box-shadow:0 10px 32px rgba(0,0,0,.5);display:flex;flex-direction:column;animation:reveal .18s ease-out}
.grip{align-self:center;width:36px;height:4px;border-radius:999px;background:var(--border-300);margin-bottom:14px}
.sheet .page-title{margin-bottom:4px}
.row{display:flex;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--border-100)}
.row .copy{flex:1;min-width:0}
.state{display:inline-flex;align-items:center;gap:6px;font:500 13px/18px var(--font-sans);color:var(--success)}
.state.off{color:var(--warning)}
.chip{flex:none;max-width:170px;height:32px;padding:0 10px;border:1px solid var(--border-100);border-radius:8px;background:transparent;color:var(--text-200);font:500 13px/18px var(--font-sans)}
.chip option{background:var(--surface-raised);color:var(--text-000)}
.danger{margin-top:20px;height:44px;border:1px solid var(--border-100);border-radius:10px;background:transparent;color:var(--danger);font:500 14px/20px var(--font-sans)}

.toast{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));padding:10px 14px;border-radius:10px;border:1px solid var(--border-100);background:var(--surface-raised);font:500 13px/18px var(--font-sans);text-align:center;animation:reveal .16s ease-out}
.sprites{position:absolute}