:root {
  --bg:#f4f6f3; --paper:#ffffff; --ink:#153d33; --sub:#61736b;
  --line:#dbe4dd; --mint:#e1f3e7; --green:#113d32; --blue:#2457e6;
  --bub:#e5eee8; --field:#eef2ee; --warn:#fff1d6; --warnink:#7a4b0c;
  --red:#b42318; --ok:#1f8a5b; --logo:#6ee0b6; --logo-ink:#153d33; --on-green:#ffffff;
  color-scheme:light; font-family:ui-rounded,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; color:var(--ink); background:var(--bg);
}
@media(prefers-color-scheme:dark) {
  :root { --bg:#101c18; --paper:#192923; --ink:#e3f1e8; --sub:#9db2a7;
    --line:#2b3f37; --mint:#233f31; --green:#275d45; --blue:#91b0ff;
    --bub:#24382f; --field:#21332c; --warn:#3a2f17; --warnink:#f1d39c;
    --red:#ff9d90; --ok:#5fd19b; --on-green:#e3f1e8; color-scheme:dark; }
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button { min-height:44px; padding:11px 16px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); font-weight:700; cursor:pointer; }
button:hover { border-color:var(--sub); }
button:disabled { opacity:.55; cursor:default; }
:where(button,a,input,textarea,summary,select):focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
button.primary { background:var(--green); color:var(--on-green); border-color:var(--green); }
button.secondary { background:var(--paper); }
a { color:var(--ink); text-underline-offset:3px; }
svg { width:24px; height:24px; flex:none; vertical-align:middle; }
.icon-button { display:grid; place-items:center; width:44px; padding:9px; flex:none; background:transparent; border-color:transparent; }
.logo-mark { border-radius:23%; display:block; width:36px; height:36px; flex:none; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-size:23px; font-weight:800; }
body>header { display:flex; align-items:center; height:64px; padding:0 24px; background:var(--paper); border-bottom:1px solid var(--line); }
#screen-title,#connection-state { display:none; }
#nav { display:flex; gap:6px; margin-left:auto; }
#nav button { display:flex; align-items:center; gap:12px; border:0; background:transparent; }
#nav button[aria-current] { background:var(--mint); color:var(--ink); }
.nav-icon { position:relative; display:inline-flex; }
.nav-count { position:absolute; top:-8px; right:-10px; min-width:19px; height:19px; display:grid; place-items:center; padding:0 4px; border-radius:50%; background:var(--blue); color:var(--paper); font-size:11px; font-weight:800; }
main { min-width:0; min-height:calc(100dvh - 64px); }
h1,h2,h3 { font-weight:800; line-height:1.25; }
h1 { font-size:27px; margin:0 0 24px; letter-spacing:-.6px; }
h2 { font-size:20px; margin:0 0 16px; }
h3 { font-size:16px; margin:0 0 8px; }
p { line-height:1.5; }
small,.subtle,time { color:var(--sub); line-height:1.5; }
small { font-size:13px; }
.eyebrow,.section-label { color:var(--sub); font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }
.section-label { margin:24px 16px 10px; }
.card { padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--paper); margin-bottom:16px; }
.card p:last-child { margin-bottom:0; }
.warning { padding:18px; background:var(--warn); color:var(--warnink); border-radius:18px; line-height:1.5; }
.warning p { margin:8px 0 0; }
.connect-risk .check { margin-top:12px; color:inherit; }
.warning h2 { font-size:18px; }
.danger { color:var(--red); }
.badge { display:inline-block; background:var(--mint); color:var(--ink); font-size:12px; padding:7px 12px; border-radius:24px; margin:8px 0; }
form { display:grid; gap:16px; }
label { display:grid; gap:8px; font-weight:600; }
input,textarea,select { width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--sub); border-radius:14px; color:var(--ink); background:var(--paper); }
textarea { min-height:100px; resize:vertical; line-height:1.5; }
fieldset { border:1px solid var(--line); border-radius:14px; padding:14px; margin:0; min-width:0; }
.check { display:flex; align-items:flex-start; gap:10px; font-weight:400; line-height:1.5; }
.check input { width:22px; height:22px; min-height:22px; padding:0; margin:0; flex:none; accent-color:var(--green); }
.check span { min-width:0; }
.check strong,.check small { display:block; }
.check small { margin-top:4px; }
.switch { flex-direction:row-reverse; align-items:center; justify-content:space-between; }
.switch input { appearance:none; width:44px; height:26px; min-height:26px; border:1px solid var(--sub); border-radius:20px; background:var(--line); position:relative; cursor:pointer; }
.switch input::after { content:""; position:absolute; width:20px; height:20px; top:2px; left:2px; border-radius:50%; background:var(--on-green); border:1px solid var(--sub); }
.switch input:checked { background:var(--ok); border-color:var(--ok); }
.switch input:checked::after { left:20px; }
.switch input:disabled { opacity:.55; cursor:default; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.page-head h1 { margin:0; }
.narrow { max-width:520px; margin:40px auto; padding:0 20px 30px; }
.signin { max-width:450px; margin:56px auto; padding:0 20px; }
.signin-brand { text-align:center; margin-bottom:28px; }
.signin-brand .logo-mark { width:64px; height:64px; margin:0 auto 12px; }
.brand-name { margin:0; font-size:30px; font-weight:800; letter-spacing:-0.5px; color:var(--ink); }
.brand-slogan { margin:4px 0 0; color:var(--sub); font-size:16px; }
.signin .card { display:grid; gap:16px; padding:0; border:0; background:transparent; }
.signin h1 { font-size:30px; margin:0 0 4px; }
.signin p { margin:0; }
.signin button { width:100%; min-height:48px; }
.signin input { font-size:24px; letter-spacing:4px; }
.signin fieldset { border:0; padding:0; display:grid; gap:12px; }
.signin fieldset legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.signin fieldset label { display:grid; grid-template-columns:22px 1fr; gap:3px 12px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--paper); font-size:16px; }
.signin fieldset label:has(:checked) { background:var(--mint); border:2px solid var(--green); padding:15px; }
.signin fieldset input { width:21px; height:21px; min-height:21px; grid-row:span 2; margin:0; accent-color:var(--green); }
.signin fieldset small { grid-column:2; font-weight:400; }
.signin [data-action="login-back"],.text-link { background:transparent; border:0; }
.inline-error { color:var(--warnink); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.inline-error:empty { display:none; }
#login-camera { width:100%; height:100%; object-fit:cover; border-radius:16px; }
.login-qr { display:grid; gap:12px; }
.qr-frame { width:180px; height:180px; justify-self:center; display:grid; place-items:center; border-radius:20px; background:var(--paper); color:var(--ink); overflow:hidden; }
.qr-guide { width:140px; height:140px; }
.login-or { display:flex; align-items:center; gap:10px; color:var(--sub); font-size:13px; }
.login-or::before,.login-or::after { content:""; flex:1; height:1px; background:var(--line); }
.login-code { display:grid; gap:8px; }
.login-code input { font-family:ui-monospace,Menlo,monospace; text-transform:none; }
.login-code small { color:var(--sub); }
.login-code button { margin-top:4px; }
@media (min-width:768px) {
  .signin .login-qr { order:3; }
  .signin .login-or { order:2; }
  .signin .login-code { order:1; }
  .signin [data-action="login-back"] { order:4; }
  .signin .inline-error { order:5; }
}
@media (max-width:767px) {
  .signin-start { display:flex; flex-direction:column; min-height:calc(100dvh - 64px); margin:0 auto; padding-bottom:32px; box-sizing:border-box; }
  .signin-start .signin-brand { margin:auto 0; }
}
.verification h1 { margin-bottom:20px; }
.verification input { letter-spacing:5px; font-size:25px; }
.workspace { display:grid; grid-template-columns:330px minmax(0,1fr); min-height:100dvh; }
.list { min-width:0; padding:20px 12px; border-right:1px solid var(--line); background:var(--paper); }
.list .page-head { padding:0 4px; }
.chat-row { display:flex; width:100%; gap:12px; align-items:center; text-align:left; border:0; background:transparent; padding:14px 10px; border-radius:18px; }
.chat-row[aria-current] { background:var(--mint); }
.avatar { width:46px; height:46px; flex:none; border-radius:50%; background:var(--bub); color:var(--ink); display:grid; place-items:center; font-size:20px; font-weight:800; }
.chat-copy { min-width:0; flex:1; }
.chat-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.chat-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:400; margin-top:3px; }
.is-unread .chat-copy small { font-weight:700; color:var(--ink); }
.chat-meta { display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex:none; font-size:12px; }
.unread { width:9px; height:9px; background:var(--blue); border-radius:50%; }
.list-note { font-size:13px; padding:8px 8px 0; }
.poll-status { font-size:13px; color:var(--sub); line-height:1.5; overflow-wrap:anywhere; margin-top:16px; }
.poll-status p { margin:4px 0; }
.list .poll-status { padding:8px; }
.story-strip { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 16px; }
.story-strip button { border:0; padding:2px; display:grid; justify-items:center; gap:6px; min-width:54px; font-weight:400; font-size:12px; background:transparent; }
.story-ring { display:grid; padding:3px; border:1px solid var(--line); border-radius:50%; }
.story-ring.fresh { border:2.5px solid var(--blue); padding:2px; }
.story-strip .avatar { width:45px; height:45px; }
.conversation { display:flex; flex-direction:column; min-width:0; min-height:100dvh; }
.conversation-top { display:flex; gap:12px; align-items:center; height:68px; flex:none; padding:10px 20px; background:var(--paper); border-bottom:1px solid var(--line); }
.conversation-top>div { flex:1; min-width:0; }
.conversation-top h2 { font-size:19px; margin:0; overflow-wrap:anywhere; }
.messages { display:flex; flex:1; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:10px; padding:24px 20px; min-height:240px; }
.bubble { max-width:85%; border-radius:22px 22px 22px 5px; padding:12px 16px; background:var(--bub); color:var(--ink); line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap; }
.bubble.outgoing { align-self:flex-end; border-radius:22px 22px 5px 22px; background:var(--green); color:var(--on-green); }
.bubble time { display:block; color:inherit; font-size:11px; text-align:right; margin-top:4px; }
.draft-card { padding:16px 20px; background:var(--paper); border-top:1px solid var(--line); gap:12px; }
.draft-card.has-draft { background:var(--mint); margin:0 16px 16px; border-radius:20px; border:0; }
.draft-card .check { font-size:13px; }
.draft-card label[for="draft-text"] { font-size:13px; }
.draft-title { margin:0; }
.draft-tools { display:flex; flex-wrap:wrap; gap:8px; }
.draft-tools button,.draft-tools a { font-size:13px; padding:10px 12px; border-radius:24px; }
.draft-tools a { display:flex; align-items:center; background:var(--paper); border:1px solid var(--line); text-decoration:none; min-height:44px; font-weight:700; }
.draft-guidance summary { cursor:pointer; min-height:44px; align-content:center; color:var(--sub); border:1px solid var(--line); border-radius:24px; padding:10px 16px; }
.draft-guidance label { margin-top:12px; font-size:14px; }
.actions { display:flex; gap:10px; }
.actions>* { flex:1; }
.send-policy { font-size:12px; }
.empty { align-content:center; padding:30px; text-align:center; }
.spark { font-size:38px; color:var(--ink); }
.back { border:0; background:transparent; padding-left:0; }
.mobile-back { display:none; }
.chat-settings { background:var(--paper); border-left:1px solid var(--line); min-width:0; }
.tools-heading { height:68px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); }
.tools-heading h2 { font-size:18px; margin:0; }
.person-summary { padding:20px 16px; text-align:center; background:var(--bg); }
.person-summary .avatar { width:76px; height:76px; font-size:32px; margin:0 auto 12px; }
.chat-settings>label { padding:16px; }
.setting-row { padding:16px; border-bottom:1px solid var(--line); background:var(--paper); }
.setting-row p { margin:8px 0; }
.chat-settings .setting-row button { width:100%; border:0; text-align:left; padding:0; }
.chat-settings .summary-action { display:flex; align-items:center; gap:12px; }
.summary-action>span { flex:1; min-width:0; }
.summary-action strong,.summary-action small { display:block; }
.summary-action small { color:var(--sub); font-weight:400; margin-top:4px; line-height:1.4; }
.fixed-policy { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.fixed-policy span { color:var(--sub); text-align:right; }
.feature-screen { max-width:1080px; margin:auto; padding:28px 28px 40px; }
.notice-row { display:flex; gap:14px; align-items:center; padding:20px 0; }
.notice-row>div { min-width:0; }
.notice-row h2 { font-size:16px; font-weight:600; margin:0 0 6px; }
.notice-row time { font-size:13px; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.story-person { min-width:0; overflow-wrap:anywhere; padding:16px; border:1px solid var(--line); background:var(--mint); }
.story-person.fresh { border:2.5px solid var(--blue); padding:14.5px; }
.story-person.is-open { grid-column:1/-1; }
.story-person:not(.is-open) { min-height:220px; display:flex; flex-direction:column; }
.story-person-head { display:flex; gap:10px; align-items:center; }
.story-person-head>div { min-width:0; }
.story-person-head h2 { font-size:17px; margin:0; }
.story-person-head p { margin:3px 0; font-size:13px; }
.story-meta { margin-top:auto; font-size:13px; }
.story-person>p.subtle { font-size:12px; }
.story-person>button { font-size:13px; }
.story-items { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px; }
.story-item { min-width:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--paper); align-self:start; }
.story-item-meta { display:flex; justify-content:space-between; gap:10px; padding:12px; font-size:13px; }
.story-preview,.stories-screen .story-video { display:block; width:100%; height:260px; object-fit:contain; background:var(--bub); }
.story-media-status { padding:16px; min-height:100px; font-size:14px; }
.story-instagram { display:flex; align-items:center; min-height:48px; padding:12px; font-size:14px; font-weight:600; }
.story-play { margin:12px; }
.story-video-note { padding:0 12px; font-size:14px; color:var(--sub); }
.settings { min-width:0; }
.settings-layout { display:grid; grid-template-columns:380px minmax(0,1fr); min-height:100dvh; }
.settings-menu { border-right:1px solid var(--line); padding:28px 20px; }
.settings-menu h2 { font-size:12px; text-transform:uppercase; color:var(--sub); letter-spacing:1.3px; margin:24px 8px 8px; }
.settings-menu>button,.menu-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:16px 12px; border-radius:0; border:0; border-bottom:1px solid var(--line); background:var(--paper); text-align:left; }
.settings-menu>button>span:first-child { flex:1; min-width:0; }
.settings-menu strong { font-size:15px; display:block; }
.settings-menu small { display:block; font-weight:400; margin-top:4px; }
.settings-menu>button>span:not(:first-child),.menu-row>span:last-child { font-weight:400; font-size:13px; color:var(--sub); }
.settings-menu svg { width:20px; }
.settings-menu .account-summary { background:var(--mint); border:1px solid var(--line); border-radius:20px; }
.account-summary .avatar { flex:none!important; width:42px; height:42px; background:var(--paper); }
.risk-label { color:var(--warnink); background:var(--warn); border-radius:7px; padding:3px 6px; width:fit-content; font-size:11px; }
.menu-row button { flex:none; font-size:13px; }
.settings-foot { font-size:12px; padding:12px 8px; }
.settings-content { padding:28px; min-width:0; }
.settings-content>.back { display:none; }
.settings-rows { border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:16px; }
.settings-rows .setting-row:last-child { border-bottom:0; }
.chip { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--mint); color:var(--ink); font-size:11px; letter-spacing:0; text-transform:none; vertical-align:1px; }
.chip.risk { background:var(--warn); color:var(--warnink); }
.setting-row.sub { padding-left:40px; }
.setting-inline { padding:0 16px 16px 40px; border-bottom:1px solid var(--line); background:var(--paper); display:grid; gap:12px; }
.setting-inline fieldset { margin:0; }
.setting-row:has(+.setting-inline) { border-bottom:0; }
.setting-inline label,.setting-inline legend { font-size:13px; color:var(--sub); }
.setting-inline .check { color:var(--ink); }
.setting-link { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.setting-link strong { flex:1; }
.setting-link span { color:var(--sub); font-size:13px; }
.setting-link .link-copy,.status-card .link-copy,.phone-state .link-copy,.seen-row .link-copy { flex:1; min-width:0; display:grid; gap:2px; color:var(--ink); font-size:inherit; }
.link-copy small { color:var(--sub); font-size:13px; font-weight:400; }
.setting-link.danger-link strong { color:var(--red); }
.status-card { display:flex; align-items:center; gap:12px; }
.status-card .avatar { flex:none; width:42px; height:42px; background:var(--mint); }
.state-pill { flex:none; padding:3px 10px; border-radius:999px; background:var(--mint); color:var(--ink); font-size:12px; font-weight:800; }
.state-pill.off { background:var(--warn); color:var(--warnink); }
.phone-state { display:block; }
#phone-card #pairing:not(:empty) { padding:0 16px 16px; background:var(--paper); }
.style-cards { display:grid; gap:8px; }
.style-card { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--paper); cursor:pointer; }
.style-card:has(input:checked) { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.style-card input { flex:none; width:20px; height:20px; min-height:0; margin:2px 0 0; padding:0; accent-color:var(--green); }
.style-card span { flex:1; display:grid; gap:2px; text-align:left; }
.style-card small { color:var(--sub); font-size:13px; font-weight:400; }
.style-own { display:grid; gap:6px; margin-top:12px; font-size:13px; color:var(--sub); }
.style-own small { justify-self:end; font-size:12px; }
.account-settings>h2 { margin-bottom:24px; }
.account-settings .section-label { margin-left:4px; }
.account-settings #phone-card>.card { margin:0; }
.pair-qr { background:var(--on-green); padding:8px; width:min(100%,280px); margin:20px auto 12px; border-radius:16px; }
.pair-qr svg { width:100%; height:auto; display:block; }
.pair-code { font:700 clamp(18px,5vw,28px) monospace; letter-spacing:2px; overflow-wrap:anywhere; }
.retained-image,audio { max-width:100%; height:auto; }
dialog { background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:24px; width:min(480px,calc(100% - 32px)); max-height:90dvh; padding:24px; }
dialog::backdrop { background:var(--bg); opacity:.85; }
.confirm-text { padding:18px; background:var(--mint); border-radius:18px; white-space:pre-wrap; overflow-wrap:anywhere; }
dialog .actions { margin-top:20px; }
#notice,#busy-status { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); z-index:20; padding:14px 20px; border-radius:18px; color:var(--on-green); background:var(--green); margin:0; }
#notice:empty { display:none; }
#busy-status:not([hidden]) { display:flex; align-items:center; gap:10px; }
.spinner { width:18px; height:18px; border:2px solid var(--sub); border-top-color:var(--on-green); border-radius:50%; animation:busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .spinner { animation:none; } }
footer { padding:24px; color:var(--sub); font-size:12px; display:flex; justify-content:space-between; gap:12px; }
.signed-in footer { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:901px) {
  .signed-in>header { position:fixed; inset:0 auto 0 0; width:220px; height:100dvh; border-right:1px solid var(--line); border-bottom:0; padding:18px 12px; display:flex; flex-direction:column; align-items:stretch; z-index:3; }
  .signed-in .brand { padding:0 8px; }
  .signed-in #nav { display:flex; flex-direction:column; gap:8px; margin:34px 0 0; }
  .signed-in #nav button { padding:14px; text-align:left; font-size:15px; }
  .signed-in #nav .nav-count { right:-7px; }
  .signed-in #connection-state:not(:empty) { display:block; margin:auto 0 0; font-size:12px; line-height:1.5; background:var(--mint); padding:12px; border-radius:18px; }
  .signed-in main { margin-left:220px; }
  .workspace.has-tools { grid-template-columns:250px minmax(0,1fr) 300px; }
  .has-tools .list .chat-meta time { display:none; }
  .has-tools .story-strip { display:none; }
  .has-tools .person-summary { display:none; }
}
@media(max-width:900px) {
  .signed-in>header { height:56px; padding:0 16px; gap:10px; }
  .signed-in .brand>span:last-child { display:none; }
  .signed-in #screen-title { display:block; font-size:21px; font-weight:800; margin:0; }
  .signed-in #nav { position:fixed; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); height:calc(64px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--paper); border-top:1px solid var(--line); z-index:10; margin:0; gap:0; }
  .signed-in #nav button { display:flex; flex-direction:column; justify-content:center; gap:5px; border-radius:0; padding:7px 0; color:var(--sub); font-size:12px; font-weight:700; min-width:0; }
  .signed-in #nav button[aria-current] { background:transparent; color:var(--ink); }
  .nav-count { top:-7px; right:-9px; }
  .signed-in main { padding-bottom:64px; min-height:calc(100dvh - 56px); }
  .page-head h1 { display:none; }
  .workspace { display:block; min-height:calc(100dvh - 120px); }
  .list { padding:0 12px 24px; background:var(--bg); border:0; }
  .list .page-head { justify-content:flex-end; height:0; padding:0; margin:0; }
  .list .page-head button { position:absolute; right:10px; top:6px; }
  .list .story-strip { padding-top:14px; }
  .chat-row { padding:14px 4px; }
  .avatar { width:46px; height:46px; }
  .chat-row small { max-width:100%; }
  .workspace.has-chat .list,.workspace.has-chat>.empty { display:none; }
  .workspace:not(.has-chat) .conversation { display:none; }
  .conversation-open>header .brand,.conversation-open>header #screen-title { display:none; }
  .conversation-open>header { padding:0; height:0; border:0; }
  .conversation { min-height:calc(100dvh - 64px); }
  .conversation-top { height:56px; padding:6px 12px 6px 4px; gap:8px; }
  .conversation-top .avatar { width:38px; height:38px; font-size:18px; }
  .conversation-top h2 { font-size:17px; }
  .conversation-top small { font-size:12px; }
  .mobile-back { display:grid; margin:0; }
  .messages { padding:24px 16px 12px; min-height:260px; }
  .bubble { max-width:92%; padding:11px 14px; font-size:15px; }
  .draft-card { padding:12px; }
  .draft-card.has-draft { margin:0 10px 12px; padding:14px; }
  .draft-tools { gap:6px; }
  .draft-tools button,.draft-tools a { font-size:12px; padding:9px 10px; }
  .draft-card .actions button { min-height:46px; }
  .draft-card .check { font-size:12px; }
  .tools-open .workspace { display:flex; flex-direction:column; }
  .tools-open .chat-settings { order:-1; border:0; }
  .tools-open .tools-heading { height:56px; }
  .tools-open .tools-heading h2 { margin:auto; }
  .tools-open .chat-settings { min-height:calc(100dvh - 64px); }
  .tools-open .person-summary { padding:18px; }
  .chat-settings .section-label { padding:0; }
  .chat-settings .setting-row { padding:14px 16px; }
  .feature-screen { padding:16px 12px 30px; }
  .feature-screen>.page-head { justify-content:flex-end; margin:0; height:0; }
  .feature-screen>.page-head button { position:absolute; right:10px; top:6px; }
  .feature-screen .story-strip { margin:-4px 0 10px; }
  .story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .story-person { padding:10px; border-radius:18px; }
  .story-person.fresh { padding:8.5px; }
  .story-person:not(.is-open) { min-height:220px; }
  .story-person-head { display:block; }
  .story-person-head .avatar { width:32px; height:32px; margin-bottom:30px; font-size:16px; }
  .story-person-head h2 { font-size:14px; }
  .story-person-head p { font-size:11px; }
  .story-person:not(.is-open) .story-person-head p { overflow-wrap:anywhere; }
  .story-person>button { padding:8px 2px; font-size:11px; }
  .story-person.is-open .story-person-head { display:flex; }
  .story-person.is-open .avatar { margin:0; }
  .story-person.is-open .story-person-head h2 { font-size:17px; }
  .story-meta { font-size:11px; }
  .stories-screen> .card { padding:14px; }
  .settings-layout { display:block; min-height:calc(100dvh - 120px); }
  .settings-menu { padding:12px 0; border:0; }
  .settings-menu>h1 { display:none; }
  .settings-menu .account-summary { margin:0 12px; width:calc(100% - 24px); padding:16px; }
  .settings-menu>button,.menu-row { padding:14px 16px; }
  .settings-menu h2 { margin:20px 16px 8px; }
  .settings-menu .risk-label { max-width:210px; }
  .settings-menu>button>span:not(:first-child) { font-size:12px; flex:none; }
  .settings-menu>button svg { width:16px; }
  .settings-content { padding:0 12px 24px; }
  .settings-content>.back { display:block; margin-bottom:10px; }
  .settings-layout[data-view="overview"] .settings-content { display:none; }
  .settings-layout:not([data-view="overview"]) .settings-menu { display:none; }
  .settings-content h2 { font-size:22px; }
  .settings-content .warning { margin-bottom:12px; }
  .settings-rows { margin:12px -12px 0; border-radius:0; border-inline:0; }
  .setting-row { padding:14px 16px; }
  .check small { font-size:12px; }
  .settings-foot { padding:8px 16px; }
  .fixed-policy { padding:18px 16px; }
  .signin { margin:44px auto; }
  .signin h1 { font-size:27px; }
  .signin-brand { margin-bottom:28px; }
  .narrow { margin:24px auto; padding-inline:16px; }
  .narrow h1 { font-size:28px; }
  footer { display:block; padding:24px 20px; }
  footer span { display:block; margin-top:8px; }
  #notice,#busy-status { bottom:80px; font-size:13px; }
}
@media(max-width:900px) {
  .settings-detail>header .brand { display:none; }
  .settings-detail>header #screen-title { padding-left:44px; font-size:20px; }
  .settings-detail .settings-content { padding-top:20px; }
  .settings-detail .settings-content>.back { position:absolute; top:6px; left:12px; width:44px; height:44px; margin:0; padding:0; font-size:0; }
  .settings-detail .settings-content>.back::before { content:"‹"; font-size:34px; line-height:1; }
  .settings-detail .settings-content>section>h2,.settings-detail #feature-form>section>h2 { display:none; }
}
/* Secondary text on mint needs ink to retain AA contrast in the light palette. */
.draft-card.has-draft small,.draft-card.has-draft .eyebrow,.draft-card.has-draft summary,
.story-person small,.story-person .subtle,.story-person .story-meta,.story-person .story-username,
.account-summary small,.phone-state .subtle { color:var(--ink); }
body:not(.signed-in)>header,body:not(.signed-in)>footer { display:none; }
body:not(.signed-in) main { min-height:100dvh; }
.pending-preview { border-radius:14px; padding:14px; background:var(--paper); color:var(--ink); }
@media(min-width:901px) {
  .signin { margin:12vh auto 0; padding:32px; max-width:440px; background:var(--paper); border:1px solid var(--line); border-radius:28px; }
}
@media(max-width:900px) {
  .pending-preview { display:none; }
  .tools-open .chat-settings .person-summary { padding:12px; }
}
.settings-menu>button.account-summary>span { color:var(--ink); }
.avatar.fresh { outline:2.5px solid var(--blue); outline-offset:3px; }
.account-card-head { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.account-card-head p { margin:4px 0 0; font-size:13px; }
.account-card-head h3 { margin:0; }
.account-card-head .avatar { background:var(--paper); border-radius:16px; }
.logout-card { display:flex; align-items:center; gap:12px; }
.logout-card>div { flex:1; min-width:0; }
.logout-card p { font-size:13px; margin:4px 0 0; }
.logout-card button { flex:none; }
.chat-settings .section-label { margin:0; padding:12px 16px; background:var(--bg); }
@media(min-width:901px) {
  .signed-in #nav button { position:relative; padding-right:40px; }
  .signed-in #nav .nav-icon { position:static; }
  .signed-in #nav .nav-count { right:12px; top:50%; transform:translateY(-50%); }
}
@media(max-width:900px) {
  .workspace>.empty { display:none; }
  .settings-menu>button,.menu-row { padding:12px 16px; }
  .settings-menu h2 { margin:16px 16px 6px; }
  .settings-menu small { font-size:12px; }
  .settings-menu .account-summary { background:var(--paper); }
  .settings-menu>button[data-settings="assistant"] small { max-width:260px; }
  .settings-content .section-label { margin-top:18px; margin-bottom:8px; }
  .account-settings .card { padding:16px; }
  .account-settings .card>p { font-size:13px; margin:8px 0 12px; }
  .account-settings .card h3 { margin-bottom:6px; }
  .experiment-settings .setting-row { padding:10px 16px; }
  .experiment-settings .warning { padding:16px; font-size:14px; }
  .chat-settings .person-summary .avatar { width:64px; height:64px; margin-bottom:8px; }
  .chat-settings .person-summary h3 { margin-bottom:4px; }
  .chat-settings .setting-row { padding:12px 16px; }
  .chat-settings .fixed-policy { padding:16px; }
  .chat-settings>label { padding:12px 16px; }
}
.story-strip .avatar { width:52px; height:52px; }
.story-strip { gap:8px; }
@media(min-width:901px) {
  .workspace { grid-template-columns:360px minmax(0,1fr); }
  .workspace.has-tools { grid-template-columns:300px minmax(0,1fr) 340px; }
  .settings-layout { grid-template-columns:420px minmax(0,1fr); }
  #connection-state:not(:empty)::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:6px; }
}
.poll-status summary { cursor:pointer; min-height:44px; align-content:center; }
.poll-status[open] { padding-bottom:12px; }
.story-person { position:relative; }
.story-count { position:absolute; right:10px; top:10px; padding:3px 7px; background:var(--paper); border-radius:20px; font-weight:800; font-size:12px; }
.story-state { color:var(--ink); font-size:11px; margin-bottom:8px; }
.story-state summary { cursor:pointer; min-height:44px; align-content:center; }
.story-state p { margin:0 0 8px; }
.story-person:not(.is-open) .story-person-head p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-person:not(.is-open) .story-meta { margin:8px 0 0; }
.story-person:not(.is-open) .story-person-head .avatar { margin-bottom:20px; }
.stories-screen>.card { padding:0; border:0; background:transparent; }
.person-summary .story-shortcut { display:block; margin:12px auto 0; }
.story-shortcut { font-size:13px; }
@media(max-width:900px) {
  .conversation-top .story-shortcut { display:none; }
}

/* Local search, content-free notices and the story viewer, both themes. */
.chat-search{margin:0 12px 12px}.search-head{display:flex;align-items:center;gap:8px}.search-field{display:flex;align-items:center;min-width:0;flex:1;background:var(--field);border-radius:14px}.search-field input{background:transparent;border:0;margin:0;min-width:0;width:100%;padding:14px 12px}.search-field input::-webkit-search-cancel-button{display:none}.search-field button{border:0;background:transparent;padding:8px}.search-field svg{width:20px;height:20px}.search-head>button{border:0;background:transparent;padding:8px}.chat-search:not(.active) [data-search-cancel],.chat-search:not(.active) [data-search-clear],.chat-search:not(.active) #search-results{display:none}.search-result{display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:0;background:transparent;width:100%;padding:14px 0}.search-result>span:last-child{min-width:0;flex:1}.search-result time{float:right;font-size:12px;color:var(--sub)}.search-snippet{display:block;color:var(--sub);line-height:1.6;overflow-wrap:anywhere;margin-top:4px}.search-result mark{background:var(--warn);color:var(--warnink);border-radius:4px}.search-note{font-size:13px;line-height:1.6;margin-top:24px}.search-hit{outline:3px solid var(--ok);outline-offset:3px}.chat-search.active~*{display:none}.notice-row h3{font-size:15px;font-weight:600;margin:0 0 5px;line-height:1.5}.notice-row>div{flex:1;min-width:0}.notice-row time{color:var(--sub);font-size:13px}.notice-row.connection-notice .avatar{background:var(--warn);color:var(--warnink)}.notice-row>button{flex-shrink:0}.notice-foot{line-height:1.6;margin-top:24px}.notice-group{margin:12px 0 24px}
body.viewer-open{overflow:hidden}.story-viewer{position:fixed;inset:0;margin:auto;padding:0;border:0;max-width:none;max-height:none;width:fit-content;height:fit-content;overflow:visible;background:transparent;color:var(--ink)}.story-viewer::backdrop{background:rgb(0 0 0 / .8)}.story-viewer .viewer-panel{position:relative;display:flex;flex-direction:column;width:min(50.625vh,calc(100vw - 160px));height:90vh;height:90dvh;max-width:560px;background:var(--paper);border-radius:20px;overflow:hidden}.story-progress{display:flex;gap:4px;padding:12px 12px 0}.story-progress span{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden}.story-progress i{display:block;height:100%;width:0;background:var(--ok)}.story-progress .done i{width:100%}.viewer-head{position:relative!important;display:flex!important;align-items:center;gap:10px;padding:12px!important;width:auto!important;height:auto!important;background:var(--paper)!important;border:0!important}.viewer-head .avatar{width:36px;height:36px;flex-shrink:0}.viewer-head time{color:var(--sub);font-size:13px}.viewer-head .icon-button{margin-left:auto;flex-shrink:0}.viewer-media{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--field)}.viewer-media img,.viewer-media video{width:100%;height:100%;max-height:none;object-fit:contain;margin:0;border:0;border-radius:0}.viewer-media p{padding:24px;text-align:center;line-height:1.6}.viewer-media .story-play{position:absolute;bottom:16px;background:var(--paper);box-shadow:0 2px 12px #0003}.viewer-media:has(img)>p{position:absolute;bottom:0;background:var(--paper)}.viewer-panel footer{display:block;padding:12px;background:var(--paper)}.viewer-panel input{border-radius:24px;margin:0 0 10px;font-size:14px;width:100%;background:var(--field)}.viewer-actions{display:flex;gap:8px;align-items:center}.viewer-actions button,.viewer-actions a{font-size:13px;flex:1;text-align:center;padding:12px 8px}.viewer-panel footer small{display:block;margin:10px 2px 0;font-size:11px;color:var(--sub);line-height:1.5}.viewer-arrow{position:absolute;top:45%;border-radius:50%;width:48px;height:48px;background:var(--paper);padding:12px}.viewer-arrow svg{width:24px;height:24px}.viewer-arrow.previous{left:-64px}.viewer-arrow.next{right:-64px}
@media(max-width:700px){body.search-open{overflow:hidden}.chat-search.active{position:fixed;inset:0;z-index:20;margin:0;padding:12px 16px;background:var(--bg);overflow:auto}.chat-search.active .search-head{position:sticky;top:-12px;padding:4px 0 12px;background:var(--paper);margin:0 -16px;padding-left:16px;padding-right:16px}.story-viewer{inset:0;margin:0;width:100vw;height:100dvh}.story-viewer .viewer-panel{width:100vw;max-width:none;height:100dvh;border-radius:0}.viewer-arrow{display:none}.viewer-panel footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}.viewer-head{padding-top:max(12px,env(safe-area-inset-top))!important}}

.search-username{display:block;color:var(--sub);font-weight:400;margin-top:4px;overflow-wrap:anywhere}
@media(max-width:700px){.notice-row:has([data-reconnect]){display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px 14px;align-items:start}.notice-row:has([data-reconnect])>button{grid-column:2;justify-self:start}.notice-row:has([data-reconnect])>div{width:100%}}

.story-video-touch{display:none}.viewer-media .story-play{z-index:2}
@media(max-width:700px){.viewer-media video{pointer-events:none}.story-video-touch{display:grid;grid-template-columns:repeat(3,1fr);position:absolute;inset:0;z-index:1}.story-video-touch button{width:100%;height:100%;min-width:0;padding:0;border:0;border-radius:0;background:transparent;touch-action:manipulation}.story-video-touch button:focus-visible{outline-offset:-4px}}
/* Both entry points share a horizontal, sectioned story strip. */
.story-strip { align-items:stretch; overflow-x:auto; padding:12px 4px 18px; gap:24px; }
.story-section { flex:none; min-width:0; }
.story-section>h2 { font-size:13px; margin:0 0 12px; color:var(--sub); }
.story-section-people { display:flex; gap:12px; align-items:stretch; }
.story-chip { position:relative; width:92px; flex:none; }
.story-strip .story-chip>button { width:92px; }
.story-menu { position:relative; white-space:normal; }
.story-menu summary { cursor:pointer; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; }
.story-menu[open] { min-width:180px; }
.story-menu>div { padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.story-strip .story-menu button { width:100%; min-width:160px; white-space:normal; }
.story-strip .story-person { width:220px; flex:none; margin:0; }
.story-strip .story-person>button { width:100%; }
.story-setting-person { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.story-settings h3 { margin-top:24px; }

/* Local conveniences share the existing settings and composer surfaces. */
.poll-status summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; list-style:none; }
.poll-status summary::-webkit-details-marker { display:none; }
.poll-status summary::after { content:"⌄"; font-size:16px; line-height:1; transition:transform .15s; }
.poll-status[open] summary::after { transform:rotate(90deg); }
.poll-status .poll-count::before { content:"· "; }
.poll-status summary p { flex-basis:100%; margin:0; }
.chat-layout-actions { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; }
.reply-picker { margin-bottom:12px; }
.reply-picker summary { cursor:pointer; min-height:44px; align-content:center; font-weight:600; }
.reply-picker button { display:block; width:100%; text-align:left; margin:8px 0; overflow-wrap:anywhere; white-space:normal; }
.reply-form textarea { min-height:96px; }
.reply-note { display:block; margin:8px 0; }
.hidden-chats .setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.avatar { position:relative; }
.avatar-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
/* Chat composer: two small choices on one row, consent asked once in a dialog. */
.draft-card:not(.has-draft) { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; }
.draft-card:not(.has-draft)>* { flex:1 1 100%; }
.draft-card .reply-picker summary { color:var(--sub); font-weight:400; border:1px solid var(--line); border-radius:24px; padding:10px 16px; }
.draft-card summary { text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:900px) {
  .list .chat-search:not(.active) { margin-top:12px; }
  .signed-in.conversation-open #nav { display:none; }
  .signed-in.conversation-open main { padding-bottom:0; }
  .conversation-open .conversation { min-height:100dvh; }
}
/* Empty states say what will appear and where to turn it on. */
.empty-state { display:grid; justify-items:center; gap:8px; text-align:center; padding:32px 16px 12px; }
.empty-state h2 { margin:0; font-size:18px; }
.empty-state p { margin:0; max-width:34ch; }
.empty-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--mint); color:var(--ink); font-size:24px; }
.empty-icon svg { width:24px; height:24px; }
.notice-empty+.notice-foot,.story-intro-note { text-align:center; font-size:12px; }
.inline-link { padding:0; min-height:0; background:transparent; border:0; color:var(--ink); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
.settings-menu button small.menu-preview { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
/* Three tabs: Chats is home; notifications sit behind the bell in its header. */
.head-actions { display:flex; align-items:center; gap:4px; }
.read-count { font-size:12px; font-weight:700; color:var(--sub); border:1px solid var(--line); border-radius:999px; padding:4px 10px; white-space:nowrap; }
.draft-label { font-size:11px; font-weight:800; color:var(--ink); background:var(--mint); border-radius:8px; padding:2px 7px; white-space:nowrap; }
.summary-card { margin:4px 0 12px; padding:14px 16px; }
.summary-card h2 { margin:0 0 4px; font-size:14px; }
.summary-card p { margin:0; font-size:14px; }
.story-all { border:0; padding:2px; display:grid; justify-items:center; gap:6px; min-width:54px; font-weight:400; font-size:12px; background:transparent; align-self:end; }
.story-all .story-ring { width:45px; height:45px; place-items:center; border-style:dashed; font-size:18px; color:var(--sub); box-sizing:border-box; }
.story-intro { display:grid; justify-items:center; gap:10px; text-align:center; max-width:520px; margin:8px auto 0; padding:24px 18px; box-sizing:border-box; }
.story-intro h2 { margin:0; font-size:18px; }
.story-intro p { margin:0; max-width:34ch; }
.story-intro>.primary { width:100%; }
.stories-screen>.story-intro { padding:24px 18px; border:1px solid var(--line); background:var(--paper); }
.stories-screen .poll-status summary { justify-content:center; }
.story-risk { font-size:12px; color:var(--warnink); line-height:1.4; }
.story-intro-note,.story-off-note { text-align:center; font-size:12px; margin:12px 0 0; }
@media(max-width:900px) {
  .list .page-head .head-actions,.feature-screen>.page-head .head-actions { position:absolute; right:10px; top:6px; }
  .list .page-head .head-actions button,.feature-screen>.page-head .head-actions button { position:static; }
}
.story-rings { display:flex; gap:10px; margin-bottom:6px; }
.story-rings i { width:44px; height:44px; border-radius:50%; border:2px dashed var(--line); }
.story-strip.compact { gap:14px; scrollbar-width:none; }
.story-strip.compact::-webkit-scrollbar { display:none; }
.story-strip.compact .story-chip { width:auto; min-width:58px; }
.story-tabs { display:flex; gap:2px; margin:4px 0 14px; padding:3px; background:var(--field); border-radius:12px; max-width:420px; }
.story-tabs button { flex:1; min-height:38px; border:0; border-radius:9px; background:transparent; color:var(--sub); font-weight:700; padding:6px 8px; }
.story-tabs button[aria-selected="true"] { background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgb(0 0 0 / .08); }
.story-tab-count { font-size:12px; color:var(--sub); font-weight:600; }
.story-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.story-tile { position:relative; aspect-ratio:9/14; border-radius:12px; overflow:hidden; background:var(--field); border:1px solid var(--line); }
.story-tile-open { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 6px; border:0; border-radius:0; background:transparent; color:var(--ink); }
.story-tile-open .avatar { width:52px; height:52px; }
.story-tile-open strong { font-size:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-tile-open small { font-size:12px; color:var(--sub); }
.story-tile .story-menu { position:absolute; top:4px; right:4px; }
.story-tile.saved { padding:0; display:block; width:100%; }
.story-tile.saved img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; border:0; border-radius:0; }
.story-tile.saved em { position:absolute; left:6px; right:6px; bottom:6px; font-style:normal; font-size:11px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgb(0 0 0 / .6); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-tile.saved:not(:has(img)) em { color:var(--ink); text-shadow:none; }
.story-tile.saved s { position:absolute; top:6px; right:6px; text-decoration:none; font-size:10px; background:rgb(0 0 0 / .45); color:#fff; border-radius:6px; padding:2px 5px; }
.story-saved-note { margin-top:12px; font-size:12px; }
.viewer-head .viewer-save { margin-left:auto; flex-shrink:0; font-size:13px; padding:8px 12px; }
.viewer-head .viewer-save:not([hidden])+.icon-button { margin-left:0; }
.viewer-head .viewer-save[aria-pressed="true"] { background:var(--mint); color:var(--ink); }
.saved-viewer .viewer-arrow:disabled { opacity:.35; }
.story-tile:not(.saved) { overflow:visible; }
.story-tile .story-menu[open] { min-width:0; }
.story-tile .story-menu summary { min-width:36px; min-height:36px; }
.story-tile .story-menu>div { position:absolute; right:0; top:38px; z-index:3; min-width:180px; box-shadow:0 6px 20px rgb(0 0 0 / .14); }
.story-tile .story-menu button { width:100%; white-space:normal; }
@media (min-width:901px){ .story-tiles { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); max-width:960px; } }

/* Experimental details stay within the conversation and modal on narrow screens. */
.presence-status{display:block;max-width:42ch;white-space:normal;color:var(--sub);font-size:.78rem}
.deletion-summary{padding:.65rem 1rem;border-bottom:1px solid var(--line);font-size:.8rem}
.deletion-summary p{margin:.6rem 0}
.deletion-info{display:grid;gap:.25rem;margin-top:.65rem;padding-top:.5rem;border-top:1px solid currentColor;font-size:.8rem}
.deletion-info small{line-height:1.5}
.profile-comparison{max-width:650px;overflow-wrap:anywhere}
.comparison-row{padding:.5rem 0;border-bottom:1px solid var(--line)}
.comparison-row h3{font-size:.9rem;margin:.4rem 0}
.comparison-values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.comparison-values h4{font-size:.8rem;color:var(--sub);margin:.4rem 0}
.comparison-values>div{min-width:0}
.comparison-photo{width:96px;height:96px;object-fit:cover;border-radius:50%}
@media(max-width:420px){.comparison-values{grid-template-columns:1fr}.profile-comparison{font-size:.85rem}.comparison-photo{width:64px;height:64px}}

/* One row per phone: what it is, when it was used, and its own remove button. */
.device-row { display:flex; align-items:center; gap:12px; }
.device-row .link-copy strong { overflow-wrap:anywhere; }
.device-row .row-action { flex:none; min-height:36px; padding:6px 12px; font-size:13px; }
.phone-state .setting-row>p[role=status] { margin:8px 0 0; font-size:13px; }
.setting-link:disabled { opacity:.5; cursor:default; }

/* Chat settings: three named quick actions under the person, then plain rows. */
.quick-actions { display:flex; justify-content:center; gap:8px; padding:4px 16px 16px; background:var(--bg); }
.quick-action { flex:0 1 104px; display:grid; justify-items:center; gap:6px; min-height:64px; padding:10px 6px; border:1px solid var(--line); border-radius:16px; background:var(--paper); color:var(--ink); font-size:12px; font-weight:700; line-height:1.25; text-align:center; }
.quick-action svg { width:20px; height:20px; }
.quick-action.on { background:var(--mint); border-color:var(--green); }
.chat-settings .setting-row.seen-row { display:flex; align-items:center; gap:12px; }
.chat-settings .setting-row .row-action { flex:none; width:auto; min-height:36px; padding:6px 12px; border:1px solid var(--line); border-radius:12px; text-align:center; font-size:13px; }
.row-warning { margin:0; border-radius:0; padding:10px 16px; font-size:13px; }
.chat-settings .settings-foot { text-align:center; padding:14px 16px 20px; }
.person-summary { padding-bottom:12px; }
@media(max-width:900px) { .tools-open .conversation { display:none; } }

/* Chat list status: freshness under the title, a warning only when updates stop. */
.list-updated { margin:-12px 4px 12px; font-size:13px; color:var(--sub); }
.list-alert { margin:0 0 12px; padding:12px 14px; border-radius:14px; font-size:14px; }
.list-alert p { margin:4px 0 0; }
@media(max-width:900px){ .list-updated { margin:10px 12px 0; } .list-alert { margin:10px 12px 0; } }

/* Review 3–10: compact composer and predictable keyboard order. */
dialog:not([open]) { display:none!important; }
#nav [data-unavailable] { opacity:.5; }
@media(min-width:901px) { .signed-in #nav { position:fixed; top:100px; left:18px; width:184px; z-index:11; } }
body:not(.signed-in)>#nav { display:none; }
.draft-card,.draft-card.has-draft,.draft-card:not(.has-draft) { display:flex; flex-direction:column; gap:8px; }
.draft-card>* { width:100%; flex:none!important; }
.draft-card .composer-options { order:0; }
.composer-options>summary { text-align:left; min-height:44px; align-content:center; cursor:pointer; }
.composer-options .reply-picker,.composer-options .draft-guidance { margin:0 0 6px; }
.draft-card label[for="draft-text"] { order:1; }
.draft-card textarea { order:2; min-height:82px; height:82px; resize:vertical; }
.draft-card .composer-meta { order:3; }
.draft-card .composer-meta:empty { display:none; }
.draft-card .reply-note { order:3; }
.draft-card .draft-tools { order:4; position:relative; width:44px; height:44px; z-index:2; margin-bottom:-52px; }
.draft-tools>summary { min-height:44px; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:22px; list-style:none; }
.draft-tools>div { position:absolute; bottom:48px; left:0; width:235px; display:grid; gap:4px; padding:8px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 24px #0002; }
.draft-tools:not([open])>div { display:none; }
.draft-card .actions { order:5; display:flex; justify-content:flex-end; gap:8px; padding-left:52px; }
.draft-card .actions button { flex:0 1 auto; white-space:nowrap; font-size:14px; padding:10px 12px; }
.draft-card .send-policy { order:6; font-size:12px; }
.draft-tools button,.draft-tools a { font-size:14px; }
.day-divider { text-align:center; align-self:center; font-size:13px; color:var(--sub); margin:12px 0; }
.send-status { text-align:right; font-size:13px; margin:4px 20px; }
.connect-accept { min-height:44px; padding:8px 0; }
.field-error { color:var(--red); margin:0; font-size:14px; }
.field-error:empty { display:none; }
.chat-row[aria-current] small,.chat-row[aria-current] time { color:var(--ink); }
.settings-menu [aria-current] { background:var(--mint); }
.account-summary { text-align:left; }
.setting-inline fieldset { border:0; padding:8px 0; margin:0; }
.setting-inline .check { min-height:44px; }
.setting-inline input[type="checkbox"] { accent-color:var(--green); }
.brand { min-height:44px; }
#notice { z-index:50; }
@media(prefers-color-scheme:dark) { .draft-card .primary { border:2px solid var(--logo); } }
@media(max-width:900px) { .settings-detail .settings-content h1 { font-size:22px; } .draft-card.has-draft { padding:10px; } .draft-card .send-policy { line-height:1.35; } }

.conversation-top h1 { font-size:20px; margin:0; }
.page-head h2,.menu-title { font-size:24px; margin:0; }
@media(max-width:900px) {
  .page-head h1 { display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .notices-screen>.page-head { height:44px; justify-content:flex-start; margin-bottom:8px; }
  .notices-screen>.page-head>[data-action="chats"] { position:static; }
  .conversation-top h1 { font-size:17px; overflow-wrap:anywhere; }
}
.draft-tools>summary { width:44px; }

.connect-submit { display:flex; align-items:center; gap:12px; }
.connect-submit small { flex:1; min-width:0; font-size:12px; line-height:1.4; }
.connect-submit button { flex:none; }

/* QA 11-04: one composer style, left-aligned disclosures, Gönder stays in view. */
.draft-card,.draft-card:not(.has-draft) { background:var(--mint); margin:0 16px 16px; border-radius:20px; border:0; }
.draft-card .reply-picker>summary,.draft-card .draft-guidance>summary { text-align:left; }
.draft-card.has-draft .composer-options[open] { max-height:38vh; overflow:auto; overscroll-behavior:contain; }
@media(max-width:900px) { .draft-card,.draft-card:not(.has-draft) { margin:0 10px 12px; } }
/* Narrow desktop: the chat settings panel replaces the list instead of squeezing the chat. */
@media(min-width:901px) and (max-width:1279px) {
  .workspace.has-tools { grid-template-columns:minmax(0,1fr) 320px; }
  .workspace.has-tools>.list { display:none; }
}
.draft-counter { font-variant-numeric:tabular-nums; color:var(--sub); text-align:right; }
.draft-counter[data-over] { color:var(--red); }
#busy-status { pointer-events:none; }
.reply-form .actions button { white-space:nowrap; }
.poll-status[open] summary::after { transform:rotate(180deg); }

.invitation-person {display:grid;gap:12px;align-items:start;padding:20px 0;}
.invitation-person strong,.invitation-settings a {overflow-wrap:anywhere;}
.invitation-person button {min-height:44px;justify-self:start;}