/* The first page. Plain, one column, big targets: it is opened on a phone in a
   hallway. The bar, footer and chip are the shared shell's. */
:root{--ink:var(--jp-ink,#1A1C1E);--muted:var(--jp-ink-2,#55595E);--line:var(--jp-line,#D8DBDE);--bg:var(--jp-paper,#FCFCFB);
  --accent:var(--jp-blue,#0F6FD6);--accent-ink:var(--jp-blue-ink,#0B5CB4);--wash:var(--jp-blue-wash,#EEF5FE);--bad:#B3261E}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--jp-sans,system-ui,sans-serif)}
main{max-width:720px;margin:0 auto;padding:24px 16px 64px}
h1{font-size:26px;margin:0 0 4px;font-weight:800;letter-spacing:-.02em}
h2{font-size:13px;margin:28px 0 10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sub{color:var(--muted);margin:0 0 16px}
.thread{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.thread:empty{display:none}
.bubble{max-width:88%;padding:10px 13px;border:1px solid var(--line);background:#fff;overflow-wrap:anywhere}
.bubble.me{align-self:flex-end;background:var(--wash);border-color:transparent}
.bubble.him{align-self:flex-start}
.bubble .go{display:inline-block;margin-top:8px;padding:8px 14px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600}
.bubble .go:hover{background:var(--accent-ink)}
.state{margin:0 0 8px;font-size:14px;color:var(--accent-ink);font-weight:600}
.ask{display:flex;gap:8px;align-items:stretch}
.ask input{flex:1;min-width:0;font:16px/1.4 inherit;padding:10px 12px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink)}
.ask input:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
button{font:inherit;font-weight:600;padding:9px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0;cursor:pointer}
button:hover{border-color:var(--accent);color:var(--accent-ink)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
button[disabled]{opacity:.5;cursor:default}
.mic{width:48px;flex:none;font-size:20px;line-height:1;padding:0}
.mic.listening{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:10px 0 0;color:var(--muted)}
.small{font-size:13px}
label.inline{display:inline-flex;gap:6px;align-items:center}
select{font:14px inherit;padding:4px 6px;border:1px solid var(--line);border-radius:0;background:#fff}
.msg{padding:9px 11px;margin:10px 0 0;border-left:3px solid var(--bad);background:#FDF3F2;color:var(--bad);font-size:14px}
ul#tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tile{display:block;padding:14px 14px 12px;border:1px solid var(--line);border-top:3px solid var(--ink);background:#fff;color:var(--ink);text-decoration:none;min-height:100px}
.tile:hover{border-color:var(--accent);border-top-color:var(--accent)}
.tile b{display:block;font-size:17px;margin-bottom:4px}
.tile span{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.tile .hint{margin-top:8px;color:var(--accent-ink);font-weight:600}
.gate{max-width:34rem;margin:48px auto;padding:0 16px}
.gate .btn{display:inline-block;padding:11px 16px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600}