/* Phone and tablet page. Colours, accents and text size follow the desktop's Settings → Appearance. */
:root{--bg:#181818;--text:#ececec;--muted:#a3a3a3;--side:#191c1f;--border:#303030;--hover:#303030;--row-sel:#2f2d2b;--bubble:#303030;--code:#262626;--composer:#2a2a2a;--dialog:#212121;--input:#303030;--input-border:#4a4a4a;--primary-bg:#e6e6e6;--primary-fg:#181818;--send-bg:#d0d0d0;--send-fg:#202020;--link:#9cc4ff;--card:#1f2630;--card-border:#3a4a5e;--info:#20252b;--info-border:#3b4654;--ok:#3fb97f;--bad:#e06c5f;--error:#ffb7ab;--shadow:0 12px 40px rgba(0,0,0,.45);color-scheme:dark}
:root{--accent:#7aa7ff;--accent2:#a78bfa;--accent-soft:rgba(122,167,255,.14);--accent-line:rgba(122,167,255,.35);--grad:linear-gradient(135deg,#5ec8ff,#a78bfa)}
[data-accent=violet]{--accent:#b39cff;--accent2:#e48bd8;--accent-soft:rgba(179,156,255,.15);--accent-line:rgba(179,156,255,.38);--grad:linear-gradient(135deg,#9d7bff,#e48bd8)}
[data-accent=green]{--accent:#4fd1a1;--accent2:#5ec8ff;--accent-soft:rgba(79,209,161,.14);--accent-line:rgba(79,209,161,.35);--grad:linear-gradient(135deg,#3fcf8e,#5ec8ff)}
[data-accent=orange]{--accent:#ffa45c;--accent2:#ff6f91;--accent-soft:rgba(255,164,92,.15);--accent-line:rgba(255,164,92,.38);--grad:linear-gradient(135deg,#ffb35c,#ff6f91)}
/* Before sign-in the page follows the device; afterwards it follows the desktop's choice. */
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#ffffff;--text:#1f1f1f;--muted:#555555;--side:#f7f7f8;--border:#e3e3e3;--hover:#e9e9eb;--row-sel:#e1e5ea;--bubble:#f0f0f0;--code:#f4f4f5;--composer:#f4f4f4;--dialog:#fff;--input:#f6f6f6;--input-border:#ccc;--primary-bg:#1f1f1f;--primary-fg:#fff;--send-bg:#1f1f1f;--send-fg:#fff;--link:#1a5fb4;--card:#f2f7ff;--card-border:#b9d1f0;--info:#f5f7fa;--info-border:#d5dde7;--error:#a3261b;--shadow:0 12px 40px rgba(0,0,0,.15);--accent:#2f6fdf;--accent-soft:rgba(47,111,223,.10);--accent-line:rgba(47,111,223,.3);color-scheme:light}}
:root[data-theme=light]{--bg:#ffffff;--text:#1f1f1f;--muted:#555555;--side:#f7f7f8;--border:#e3e3e3;--hover:#e9e9eb;--row-sel:#e1e5ea;--bubble:#f0f0f0;--code:#f4f4f5;--composer:#f4f4f4;--dialog:#fff;--input:#f6f6f6;--input-border:#ccc;--primary-bg:#1f1f1f;--primary-fg:#fff;--send-bg:#1f1f1f;--send-fg:#fff;--link:#1a5fb4;--card:#f2f7ff;--card-border:#b9d1f0;--info:#f5f7fa;--info-border:#d5dde7;--error:#a3261b;--shadow:0 12px 40px rgba(0,0,0,.15);--accent:#2f6fdf;--accent-soft:rgba(47,111,223,.10);--accent-line:rgba(47,111,223,.3);color-scheme:light}
[data-theme=light][data-accent=violet]{--accent:#7a4fe0;--accent-soft:rgba(122,79,224,.10)}
[data-theme=light][data-accent=green]{--accent:#0f9d6b;--accent-soft:rgba(15,157,107,.10)}
[data-theme=light][data-accent=orange]{--accent:#d9681f;--accent-soft:rgba(217,104,31,.10)}
:root{font:calc(15px * var(--scale,1))/1.5 'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0 auto;max-width:860px;padding:0 14px env(safe-area-inset-bottom);background:var(--bg)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--input-border);border-radius:12px;background:var(--input);padding:9px 14px;min-height:42px;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.45;cursor:default}
button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
button.ghost:active,button.icon:active{background:var(--hover)}
button.icon{background:transparent;border:0;width:42px;padding:0;display:grid;place-items:center;color:var(--text);border-radius:12px}
button.primary,#pair{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg);font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{background:var(--input);border:1px solid var(--input-border);border-radius:12px;padding:10px 12px;min-height:44px}
a{color:var(--link)}
.sr,.attach input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
[hidden]{display:none!important}

/* Header */
header{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:4px;min-height:56px;padding-top:env(safe-area-inset-top);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);margin:0 -14px;padding-inline:6px 6px}
#brand{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;padding-left:4px}
#brand #title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{width:24px;height:24px;border-radius:7px;flex:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}

/* Chat */
#status{font-size:12px;color:var(--muted);overflow-wrap:anywhere;padding:6px 4px 0;text-align:center}
#status:empty{display:none}
#app{display:flex;flex-direction:column;min-height:calc(100dvh - 57px - env(safe-area-inset-top))}
#messages{padding:14px 0 18px;min-height:30vh;flex:1}
#messages>p{font-size:12px;color:var(--muted);text-align:center}
.message{margin:0 0 22px;overflow-wrap:anywhere;line-height:1.6}
.message.user{margin:18px 0 22px auto;border-radius:22px;padding:9px 16px;width:fit-content;max-width:86%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--bubble)),color-mix(in srgb,var(--accent2) 14%,var(--bubble)));border:1px solid var(--accent-line)}
.message.assistant{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start}
.message.assistant .av{width:26px;height:26px;border-radius:8px;margin-top:2px}
.message.app{display:flex;gap:10px;align-items:flex-start;background:var(--info);border:1px solid var(--info-border);border-radius:12px;padding:10px 14px;font-size:14px}
.message.enter{animation:rise .3s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.role{display:none}
.message.app .role{display:block;font-size:12px;color:var(--muted);font-weight:600}
.text{white-space:pre-wrap}
.cloudtag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);background:var(--hover);border-radius:10px;padding:2px 9px 2px 7px;margin-bottom:6px}
.cloudtag svg{width:13px;height:13px}
.pic{display:block;padding:0;border:0;background:none;min-height:0;margin-top:10px;border-radius:14px;overflow:hidden}
.pic img,.message img:not(.av){display:block;max-width:100%;max-height:520px;border-radius:14px}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:0 0 12px}.md ul,.md ol{margin:0 0 12px;padding-left:24px}.md li{margin:3px 0}
.md h1,.md h2,.md h3,.md h4{line-height:1.3;margin:18px 0 8px}.md h1{font-size:1.3em}.md h2{font-size:1.2em}.md h3{font-size:1.07em}
.md code{font-family:Consolas,ui-monospace,monospace;font-size:.87em;background:var(--code);border-radius:5px;padding:1px 5px}
.md pre{background:var(--code);border-radius:12px;padding:12px 14px;overflow-x:auto;margin:0 0 12px}.md pre code{padding:0;background:none;white-space:pre}
.md table{border-collapse:collapse;display:block;overflow-x:auto;margin:0 0 12px;font-size:.93em}.md th,.md td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top}.md th{background:var(--hover)}
.md blockquote{margin:0 0 12px;padding-left:12px;border-left:3px solid var(--accent-line);color:var(--muted)}
.message a,.sc .nx b{color:var(--accent)}
details{margin-top:8px;font-size:13px;color:var(--muted)}
details summary{display:inline-block;cursor:pointer;background:var(--hover);border-radius:12px;padding:3px 11px;font-size:12px;list-style:none}
details summary::-webkit-details-marker{display:none}
details pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 Consolas,ui-monospace,monospace;background:var(--code);border-radius:10px;padding:10px}
details.cardtext{margin-top:4px}details.cardtext summary{font-size:12px}
.actions{display:flex;gap:2px;margin-top:6px;opacity:.6}.actions.newest{opacity:1}
.act{background:transparent;border:0;min-height:34px;width:36px;padding:0;display:grid;place-items:center;color:var(--muted);border-radius:10px}
.act:active{background:var(--hover);color:var(--text)}.act svg{width:17px;height:17px}.act.on{color:var(--accent)}
.mic{width:38px;height:38px;min-height:38px;padding:0;border-radius:50%;display:grid;place-items:center;background:transparent;border:0;color:var(--muted);flex:none;margin-bottom:1px}
.mic.rec{background:#e5484d;color:#fff;animation:pulse 1.2s infinite}.mic.wait{color:var(--accent);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.working{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.93em;min-height:26px}
.md+.working{margin-top:8px;font-size:.85em}
.dots{display:inline-flex;gap:4px;vertical-align:middle}.dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:bounce 1.2s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* Start screen */
.welcome{text-align:center;padding:5vh 0 10px;animation:rise .35s ease-out both}
.logo-big{width:64px;height:64px;border-radius:18px;box-shadow:0 0 40px var(--accent-soft)}
.welcome h1{font-size:1.65em;margin:14px 0 4px;font-weight:650;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome .sub{color:var(--muted);margin:0 0 20px}
.starters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
.starter{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--border);min-height:108px}
.starter:active{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.starter .ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);margin-bottom:6px}
.starter .ic svg{width:18px;height:18px}.starter b{font-size:.95em}.starter small{color:var(--muted);font-size:.8em;line-height:1.35}

/* Composer */
#draft{position:sticky;bottom:0;background:var(--bg);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
#attached{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:0 6px}
#attached:has(#clear[hidden]){display:none}
#filename{overflow-wrap:anywhere}
#clear{min-height:30px;padding:2px 8px;font-size:12px}
.composer{display:flex;align-items:flex-end;gap:6px;background:var(--composer);border:1px solid var(--border);border-radius:26px;padding:5px 6px;transition:border-color .15s}
.composer:focus-within{border-color:var(--accent-line)}
.composer textarea{flex:1;min-width:0;border:0;background:transparent;resize:none;max-height:35vh;min-height:40px;scrollbar-width:none;padding:9px 4px;line-height:1.45;outline:none}
.attach{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;cursor:pointer;color:var(--muted);flex:none;margin-bottom:1px}
.attach:active{background:var(--hover)}
button.round{width:38px;height:38px;min-height:38px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--send-bg);color:var(--send-fg);border:0;flex:none;margin-bottom:1px}
button.round svg{width:19px;height:19px}
button.round#send{background:var(--grad);color:#fff}
#stop svg{fill:currentColor;stroke:none}
.note{display:block;text-align:center;font-size:11px;color:var(--muted);margin-top:6px}
#error{color:var(--error);white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;padding:0 4px}
#error:empty{display:none}
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,10px);background:var(--primary-bg);color:var(--primary-fg);padding:8px 16px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:20}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Sign-in */
.card{max-width:460px;margin:36px auto;padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--dialog)}
.card h1{font-size:22px;margin:0 0 8px}.card p{color:var(--muted);margin:0 0 16px}
.card label{display:block;margin:12px 0;font-size:14px}
.card input:not([type=checkbox]){display:block;width:100%;margin-top:6px}
.card label.check{display:flex;align-items:center;gap:10px}
.card input[type=checkbox]{width:22px;height:22px;min-height:22px;margin:0;accent-color:var(--accent)}
.card button{width:100%;margin-top:8px}
#have-code{width:100%;margin-top:6px}#family-setup .hint{font-size:13px;color:var(--muted);margin-top:14px}#family-setup .hint a{color:var(--accent)}

/* Sheets: chat list (left), More (right), Pictures (full) */
dialog{border:1px solid var(--border);background:var(--dialog);color:var(--text);padding:16px;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.55)}
.sheet{position:fixed;margin:0;top:0;bottom:0;height:100dvh;max-height:100dvh;width:min(86vw,360px);max-width:none;border-radius:0;box-shadow:var(--shadow);padding:calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
.sheet.left{left:0;right:auto;border-width:0 1px 0 0;background:var(--side);animation:inl .22s ease-out}
.sheet.right{right:0;left:auto;width:min(94vw,520px);border-width:0 0 0 1px;animation:inr .22s ease-out}
.sheet.full{inset:0;width:100vw;border:0;animation:fade .2s ease-out}
@keyframes inl{from{transform:translateX(-100%)}to{transform:none}}@keyframes inr{from{transform:translateX(100%)}to{transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-head,.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:calc(-10px - env(safe-area-inset-top));background:inherit;z-index:1;padding:4px 0 8px}
.sheet-head h2,.menu-heading h2{font-size:19px;margin:0;flex:1}
.brandline{display:flex;align-items:center;gap:8px;font-size:17px}
.side-btn{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;text-align:left;padding:10px 8px;border-radius:12px;font-weight:600}
.side-btn:active,.chatrow:active{background:var(--hover)}
.find{display:flex;align-items:center;gap:8px;background:var(--input);border:1px solid var(--border);border-radius:12px;padding:0 10px;margin:8px 0 6px;color:var(--muted)}
.find svg{width:17px;height:17px}.find input{border:0;background:transparent;padding:8px 0;min-height:40px;flex:1;min-width:0;outline:none;color:var(--text)}
#chatlist h4{font-size:12px;color:var(--muted);font-weight:600;margin:16px 8px 4px}
#chatlist p{color:var(--muted);font-size:14px;padding:8px}
.chatrow{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;text-align:left;padding:9px 8px;border-radius:12px;min-height:44px}
.chatrow svg{width:17px;height:17px;color:var(--muted)}.chatrow span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatrow.sel{background:var(--row-sel);box-shadow:inset 3px 0 0 var(--accent)}.chatrow.sel svg{color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.grid p{color:var(--muted);grid-column:1/-1}
.tile{padding:0;border:1px solid var(--border);background:var(--card);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-align:left}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.tile span{font-size:12px;color:var(--muted);padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer{border:0;padding:0;margin:auto;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(0,0,0,.92);display:none;flex-direction:column;align-items:center;justify-content:center}
.viewer[open]{display:flex}
.viewer img{max-width:100%;max-height:78dvh;object-fit:contain;border-radius:10px}
.viewer-bar{display:flex;gap:8px;margin-top:14px}
.vbtn{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;padding:9px 16px;min-height:40px;text-decoration:none;font-size:14px;display:inline-flex;align-items:center}
.viewer-tip{color:rgba(255,255,255,.6);font-size:12px;margin:10px 0 0}

/* More menu */
#sections{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
#sections button{border-radius:999px;min-height:36px;padding:5px 13px;font-size:13px;background:transparent}
#sections button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
#logout{font-size:13px;min-height:36px;padding:6px 10px}
#menu-content{overflow-wrap:anywhere}
#menu-content h3{font-size:16px;margin:16px 0 8px}
#menu-content p{color:var(--muted);font-size:14px}
#menu-content pre{white-space:pre-wrap;font:12px/1.5 Consolas,ui-monospace,monospace;background:var(--code);border-radius:10px;padding:10px}
#menu-content article{padding:12px 0;border-bottom:1px solid var(--border)}
#menu-content article p{color:var(--text)}
.conversation-link{display:block;width:100%;text-align:left;margin:6px 0;background:transparent;border-color:var(--border)}
#menu-content label{display:block;margin:14px 0}
#menu-content input:not([type=checkbox]){display:block;width:100%;margin-top:6px}
#menu-content input[type=checkbox]{width:22px;height:22px;min-height:22px;vertical-align:middle;margin-right:10px;accent-color:var(--accent)}
#menu-content form{display:flex;flex-direction:column;gap:8px}#menu-content article button{margin:6px 6px 0 0}#menu-content select{width:100%}

.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px}.ws-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card);color:var(--text);text-decoration:none}.ws-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.ws-card b{padding:8px 10px 0;font-size:14px}.ws-card small{padding:0 10px 9px;color:var(--muted)}
/* Answer cards (same as the desktop) */
.acard{border:1px solid var(--card-border);border-radius:16px;overflow:hidden;margin:2px 0 8px;background:var(--card)}
.wx{display:flex;gap:14px;align-items:center;padding:14px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--card)),color-mix(in srgb,var(--accent2) 9%,var(--card)))}
.wx .big{font-size:40px;line-height:1}.wx .t{font-size:30px;font-weight:650;line-height:1.1}.wx .t small{font-size:15px;color:var(--muted);font-weight:400}.wx .meta{color:var(--muted);font-size:13px}
.badge{display:inline-block;margin-top:6px;font-size:12px;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.days{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border);overflow-x:auto}.day{flex:1;min-width:58px;text-align:center;padding:6px 2px;border-radius:10px;background:var(--hover);font-size:12px}.day .e{font-size:20px;display:block}
.sc .hd{padding:8px 14px;font-size:12px;color:var(--muted);background:var(--hover);display:flex;justify-content:space-between}
.sc .tm{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border)}.sc .tm .n{font-size:20px;font-weight:700}.sc .tm.win .n{color:var(--ok)}
.sc .nx{padding:10px 14px;border-top:1px solid var(--border);font-size:13px}
.rm{display:flex;gap:12px;align-items:center;padding:12px 14px}.rm .e{font-size:26px}.rm .when{color:var(--muted);font-size:13px}
.countdown{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}

/* Tablets */
@media(min-width:700px){body{padding-inline:24px}header{margin-inline:-24px;padding-inline:12px}.starters{grid-template-columns:repeat(3,minmax(0,1fr))}.welcome{padding-top:9vh}.message.user{max-width:75%}}
@media(max-width:400px){body{padding-inline:10px}header{margin-inline:-10px}.starter{min-height:100px;padding:12px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Setup page (plain-web first stop) */
.setup-page .setup{padding:0 16px}.setup-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:18px}.setup-brand img{border-radius:10px}
.setup ol{margin:0 0 16px;padding-left:22px;line-height:1.5}.setup li{margin:10px 0}.setup li i{color:var(--muted)}.setup #status{margin:0 0 12px}a.button{display:block;text-align:center;padding:12px;border-radius:12px;text-decoration:none;margin-top:8px}
a.button.primary{background:var(--primary-bg);color:var(--primary-fg);font-weight:600}.setup .ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.rbtns{display:flex;justify-content:flex-end;gap:8px;padding:0 12px 10px}.rbtns button{border:1px solid var(--card-border);border-radius:10px;padding:6px 14px;background:transparent;color:var(--text)}
.chatrow.fresh span::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle}
.docchip{display:inline-block;font-size:13px;border:1px solid var(--card-border);border-radius:10px;padding:3px 8px;margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}