:root { font:14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#222630; background:#f4f5f8; color-scheme:light; --line:#e5e7ec; --muted:#747c89; --accent:#b9233b; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; overflow:hidden; }
body { height:100dvh; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
[hidden] { display:none!important; }
button,input,summary { font:inherit; }
button { min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:inherit; cursor:pointer; }
button:hover { background:#f1f3f7; }
button:disabled { opacity:.38; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#header { height:36px; min-height:36px; display:flex; align-items:center; gap:8px; padding:0 max(4px,env(safe-area-inset-right)) 0 max(4px,env(safe-area-inset-left)); background:#fff; border-bottom:1px solid var(--line); z-index:2; }
.brand { width:98px; height:32px; display:flex; flex-shrink:0; }
.brand img { width:100%; height:100%; object-fit:contain; display:block; }
.room { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--muted); }
.icon-button { width:36px; min-width:36px; height:36px; min-height:36px; padding:8px; border:0; background:transparent; font-size:24px; line-height:20px; }
.icon-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#a4a9b3; flex-shrink:0; }
.dot.connected { background:#26825e; }
.dot.failed { background:var(--accent); }
#quick-control { display:flex; align-items:center; gap:6px; white-space:nowrap; min-height:28px; padding:3px 8px; border:0; border-radius:6px; background:#f2f4f7; font-size:11px; }
body.human #quick-control { background:#e9f5ee; color:#1e704d; }
#workspace { flex:1; min-height:0; display:flex; }
#browser-pane { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
#navigation { height:48px; min-height:48px; display:flex; align-items:center; gap:3px; padding:2px max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:#f8f9fb; }
.nav-button { width:34px; min-width:34px; padding:3px; border:0; background:transparent; font-size:23px; }
#address-form { flex:1; min-width:0; }
#address { width:100%; min-width:0; height:36px; padding:6px 10px; border:1px solid #e0e4eb; border-radius:9px; background:#fff; font-size:16px; text-overflow:ellipsis; }
#screen { flex:1; min-height:0; overflow:hidden; position:relative; background:#fff; touch-action:none; overscroll-behavior:none; }
#browser-canvas { display:block; width:100%; height:100%; object-fit:contain; touch-action:none; outline:none; }
#notice { position:absolute; inset:48px 0 0; display:grid; place-items:center; padding:28px; background:#f7f8fa; text-align:center; }
#notice>div { max-width:320px; }
.notice-icon { width:48px; height:48px; margin:0 auto 20px; display:grid; place-items:center; font-size:24px; color:var(--accent); background:#fff; border:1px solid var(--line); border-radius:14px; }
h1 { font-size:20px; font-weight:550; letter-spacing:-.025em; margin:0 0 10px; }
#notice-text { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
#reconnect { margin-top:22px; }
dialog { position:fixed; inset:0 0 0 auto; margin:0; width:min(350px,100%); height:100dvh; max-height:100dvh; max-width:100%; border:0; border-left:1px solid var(--line); background:#f8f9fc; overflow-y:auto; padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) 18px; box-shadow:-10px 0 60px #151a2220; }
dialog::backdrop { background:#14203366; backdrop-filter:blur(2px); }
.menu-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px; }
.eyebrow { font-size:9px; letter-spacing:.12em; color:var(--muted); font-weight:650; }
h2 { margin:3px 0 0; font-size:18px; font-weight:600; overflow-wrap:anywhere; }
h3 { margin:0; font-size:12px; font-weight:650; }
#menu section { margin-bottom:20px; }
.control-card { padding:14px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 2px 5px #17203404; }
.access { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; font-size:12px; }
#status { font-weight:600; }
#clock { color:var(--muted); font-variant-numeric:tabular-nums; }
.primary { width:100%; background:#252b36; border-color:#252b36; color:#fff; font-weight:550; }
.primary:hover { background:#3d4554; }
body.human .primary { background:#eaf4ee; border-color:#cce4d5; color:#1d6a49; }
.hint { margin:9px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.section-heading { display:flex; justify-content:space-between; align-items:center; min-height:30px; margin-bottom:8px; }
.small { min-height:30px; min-width:34px; padding:3px 8px; border:0; background:transparent; font-size:18px; }
.item-list { display:grid; gap:6px; }
.tab-row { display:flex; gap:4px; align-items:center; border:1px solid var(--line); border-radius:9px; background:#fff; }
.tab-row.active { border-color:#b9c4d7; box-shadow:inset 3px 0 #485974; }
.tab-row>button:first-child { flex:1; min-width:0; text-align:left; border:0; background:transparent; overflow:hidden; }
.tab-row span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tab-row small { display:block; color:var(--muted); font-size:10px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; }
.tab-row>button:last-child { border:0; background:transparent; padding:4px 10px; }
#apps-list>button { text-align:left; font-size:12px; }
.live-badge { display:flex; align-items:center; gap:5px; font-size:9px; letter-spacing:.07em; color:#26825e; }
#events { list-style:none; margin:0; padding:0; max-height:280px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
#events li { padding:8px 0 8px 14px; border-left:1px solid #dfe4eb; margin-left:3px; position:relative; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
#events li:before { content:""; position:absolute; width:5px; height:5px; background:#acb6c5; border-radius:50%; left:-3px; top:14px; }
#events time { display:block; color:var(--muted); font-size:9px; margin-top:2px; font-variant-numeric:tabular-nums; }
#events .empty { color:var(--muted); }
.job { font-size:11px; padding:9px 10px; background:#ecf0f7; border-radius:7px; margin-bottom:8px; overflow-wrap:anywhere; }
summary { cursor:pointer; min-height:44px; font-size:12px; font-weight:550; padding-top:12px; }
summary span { float:right; font-size:10px; color:var(--muted); }
#session-details { border-top:1px solid var(--line); }
#session-details button { margin-top:8px; font-size:12px; }
#session-result label { display:block; font-size:11px; margin:12px 0 6px; }
#session-token { width:100%; padding:9px; border:1px solid var(--line); border-radius:6px; }
.settings { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:15px; }
.settings button { font-size:12px; }
.check { display:flex; align-items:center; gap:6px; font-size:11px; min-height:44px; }
.check input { width:16px; height:16px; accent-color:#252b36; }
#menu-error { color:var(--accent); font-size:12px; }
#menu-error:empty { display:none; }
#keyboard-bar { display:flex; gap:3px; padding:5px 6px max(5px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); z-index:5; }
#keyboard { flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:8px; font-size:16px; }
#keyboard-bar button { padding-inline:9px; }
#handoff { position:absolute; bottom:12px; left:12px; right:12px; display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #e5cdb7; border-radius:10px; background:#fff9f0; box-shadow:0 4px 25px #33220814; font-size:12px; }
#handoff span { flex:1; }
#toast { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); max-width:90vw; padding:10px 16px; background:#252b36; color:#fff; border-radius:9px; z-index:10; font-size:12px; }
@media(min-width:1050px) { dialog[open] { position:relative; inset:auto; height:100%; max-height:100%; width:320px; min-width:320px; box-shadow:none; } }
@media(max-width:350px) { .brand { width:82px; } #header { gap:4px; } .nav-button { width:30px; min-width:30px; } #quick-control { font-size:10px; padding-inline:6px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

/* Quiet chrome: clear groups, less card framing, generous input targets. */
:root { --line:#e9ebee; --muted:#737c88; }
#people-button { min-height:28px; padding:3px 7px; border:0; background:transparent; font-size:11px; color:var(--muted); white-space:nowrap; }
dialog { background:#fff; padding-inline:20px; }
.menu-heading { margin-bottom:24px; }
.control-card { padding:0 0 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; }
#menu section { margin-bottom:22px; }
.tab-row { border:0; background:transparent; border-radius:7px; }
.tab-row.active { background:#f0f3f6; box-shadow:none; }
.tab-row>button:first-child { font-size:12px; padding:9px 10px; }
.tab-row>button:last-child { color:var(--muted); }
.section-heading { margin-bottom:6px; }
#apps-list>button { background:transparent; border:0; border-radius:7px; }
#apps-list>button:hover { background:#f2f4f7; }
#events { max-height:180px; }
.participant { display:flex; justify-content:space-between; gap:8px; align-items:center; min-height:32px; font-size:11px; }
.participant small { color:var(--muted); font-size:10px; }
.participant[data-role=host] small,.participant[data-role=controller] small { color:#1d7552; }
.settings { display:block; padding-top:0; }
.settings details { width:100%; }
.toggle { justify-content:space-between; margin-top:12px; gap:16px; }
.toggle span { font-size:12px; }
.toggle small { display:block; font-size:10px; line-height:1.5; color:var(--muted); margin-top:4px; }
.toggle input { flex-shrink:0; width:30px; height:20px; }
#keyboard-bar { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.keyboard-heading { display:flex; justify-content:space-between; align-items:center; }
.keyboard-heading label { font-size:9px; letter-spacing:.12em; font-weight:600; color:var(--muted); }
.keyboard-heading label span { display:inline-block; margin-left:10px; font-size:10px; letter-spacing:0; font-weight:400; }
#keyboard-close { min-height:24px; height:24px; border:0; padding:0 8px; font-size:22px; color:var(--muted); }
#keyboard { width:100%; padding:12px; background:#f8f9fb; }
.keyboard-keys { display:flex; gap:12px; }
.keyboard-keys button { min-height:44px; background:#f8f9fb; font-size:12px; }
#key-backspace { margin-right:auto; }
#key-space { min-width:84px; }
#key-enter { min-width:80px; background:#252b36; border-color:#252b36; color:white; }
@media(max-width:350px){.room{max-width:70px}.keyboard-keys{gap:8px}#key-backspace span{display:none}#key-space{min-width:72px}.brand{width:64px}}