:root{--panel:#ffffff;--border:#d4e0da;--brand-font:'Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif;font-family:system-ui,-apple-system,sans-serif;color:#172f2c;background:#f3f7f5;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{margin:0}header{background:linear-gradient(135deg,#086f61 0%,#0a8a76 55%,#0aa37f 100%);color:white;padding:18px max(20px,calc((100vw - 1120px)/2));display:flex;align-items:center;gap:20px;flex-wrap:wrap}h1{font-size:26px;margin:0;font-family:var(--brand-font)}header span{flex:1}main{max-width:1120px;margin:auto;padding:16px 20px}h2{font-size:21px;margin:0 0 14px;font-family:var(--brand-font)}p{margin:12px 0}.notice{background:#e2eeea;border-left:4px solid #086f61;padding:12px;font-size:14px}#status{min-height:24px;color:#05584d}#status:not(:empty){background:#e2eeea;border:1px solid #086f61;border-radius:8px;padding:10px 12px;margin:0 0 12px}button,.button{min-height:44px;background:#086f61;color:white;border:1px solid #086f61;border-radius:8px;padding:10px 18px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}button:hover,.button:hover{background:#05584d}button:disabled{opacity:.6;cursor:wait}.secondary{background:white;color:#086f61}.secondary:hover{background:#e2eeea}input,textarea,select{font:inherit;width:100%;border:1px solid #7d928b;border-radius:6px;padding:10px;min-height:44px;margin:4px 0 14px;background:white;color:#172f2c}label{display:block;font-weight:600}small{display:block;color:#52665f;margin:-8px 0 14px}form{margin:0}#auth{max-width:460px;margin:24px auto;background:white;padding:24px;border:1px solid #d4e0da;border-radius:14px}.tabs{display:flex;gap:10px;margin-bottom:24px}.tabs button{flex:1}.tabs button[aria-pressed=false]{background:white;color:#086f61}#google{width:100%;text-align:center;margin-top:18px}#workspace{display:grid;grid-template-columns:300px 1fr;background:white;border:1px solid #d4e0da;border-radius:12px;overflow:hidden;min-height:570px}aside{padding:20px;background:#f8fbf9;border-right:1px solid #d4e0da}.sectionTitle{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px}.sectionTitle h2{margin:0}.sectionTitle button{padding:8px 12px}#chatList{list-style:none;padding:0;margin:0}#chatList button{display:block;width:100%;text-align:left;background:white;color:#172f2c;border-color:#d4e0da;margin-bottom:10px}#chatList button[aria-current=true]{border:2px solid #086f61;background:#e5f3ed}#chatList .preview{display:block;font-size:0.8125rem;color:#52665f;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#conversation{padding:22px;min-width:0}#chatInfo{font-size:14px;color:#52665f}#messages{list-style:none;margin:18px 0;padding:0;max-height:420px;overflow-y:auto;min-height:240px}#messages li{max-width:85%;padding:10px 14px;background:#eef3f0;border-radius:10px;margin-bottom:14px;overflow-wrap:anywhere}#messages li.mine{background:#dff3e9;margin-left:auto}#messages .sender{font-weight:700;font-size:14px}#messages .body{white-space:pre-wrap;margin:5px 0}#messages .meta{font-size:0.75rem;color:#4b6258}#messages img{display:block;max-width:100%;max-height:300px;border-radius:6px}.composerActions{display:flex;justify-content:space-between;align-items:center;gap:15px}.composerActions label{font-size:14px}.composerActions input{font-size:0.8125rem;border:none;padding:2px;max-width:260px}.composerActions button{flex-shrink:0}#composer>small{margin:12px 0 0}#composer{border-top:1px solid #d4e0da;padding-top:16px}dialog{border:1px solid #b8c9c1;border-radius:12px;max-width:440px;width:calc(100% - 32px);padding:24px;color:#172f2c}dialog::backdrop{background:#143f3366}fieldset{border:1px solid #b8c9c1;border-radius:6px;margin:12px 0}#people label{display:flex;gap:12px;align-items:center;padding:8px}#people input{width:22px;height:22px;min-height:22px;margin:0}.actions{display:flex;gap:10px}.skip{position:absolute;left:10px;top:-100px;background:white;padding:12px;color:#086f61;z-index:10}.skip:focus{top:10px}:focus-visible{outline:3px solid #de8300;outline-offset:3px}footer{text-align:center;padding:20px;font-size:0.8125rem;color:#52665f}[hidden]{display:none!important}@media(max-width:720px){header{padding:16px}header span{font-size:0.8125rem}main{padding:10px}#workspace{display:block}aside{border-right:none;border-bottom:1px solid #d4e0da;padding:16px}#chatList{display:flex;gap:10px;overflow:auto}#chatList li{min-width:160px;max-width:220px}#conversation{padding:16px}#messages{max-height:360px}.composerActions{align-items:flex-end}#auth{padding:20px}#messages li{max-width:93%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.deleteMessage{font-size:0.8125rem;min-height:44px;padding:6px 10px;margin-top:10px}#accountDialog .actions{flex-wrap:wrap}

/* Navigation-first web increment */
.appNav{display:flex;gap:8px;padding:10px;background:#fff;border:1px solid #d4e0da;border-radius:12px;margin-bottom:12px}.appNav button{flex:1;background:white;color:#086f61;border-color:transparent}.appNav button[aria-pressed=true]{background:#086f61;color:white}.chatFilters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}.chatFilters button{padding:6px 10px;min-height:44px;font-size:14px;background:#fff;color:#086f61;border-color:#b8c9c1}.chatFilters button[aria-pressed=true]{background:#086f61;color:white}.searchLabel{font-size:14px}.chatKind{display:block;font-size:0.75rem;color:#52665f}.chatName{font-weight:650}.featurePanel{min-height:400px;background:white;border:1px solid #d4e0da;border-radius:12px;padding:28px;text-align:center}.featurePanel p{max-width:500px;margin:14px auto}.emptyIcon{font-size:54px;color:#086f61}.featurePanel h3{font-size:22px}.settingsClose{margin-top:24px}#settingsDialog h3{font-size:17px;margin-top:24px}#settingsDialog p{font-size:14px}html[data-text-size=large] #messages .body{font-size:20px}html[data-text-size=small]{font-size:14px}html[data-text-size=large]{font-size:18px}.makerLink{display:inline-flex;align-items:center;min-height:44px}html[data-density=compact] #messages li{margin-bottom:7px;padding:8px 12px}html[data-density=compact] #chatList button{margin-bottom:5px}dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
@media(max-width:720px){#chatList{display:block}#chatList li{min-width:0;max-width:none}.featurePanel{min-height:320px;padding:22px}.appNav{position:sticky;top:0;z-index:2}.chatFilters{flex-wrap:nowrap}.chatFilters button{flex:1}header{gap:10px}header span{flex-basis:100%}.notice{font-size:0.8125rem}}

.creator{margin:2px 0 0;font-size:0.75rem;color:#fff}.brand{flex-shrink:0}

.brand{display:flex;align-items:center;gap:12px}.makerAvatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #ffffffcc;flex-shrink:0}

.makerLink{display:inline-flex;align-items:center;min-height:44px;padding:4px 10px;margin-left:6px;color:white;text-decoration:underline;text-underline-offset:3px;border-radius:6px}.makerLink:hover{background:#ffffff1a}.creator{display:flex;align-items:center;flex-wrap:wrap}.brand h1{line-height:1.1}

.passwordToggle{margin:-4px 0 16px;font-size:14px;min-height:44px;padding:8px 12px}#forgotSetup{background:#e2eeea;padding:12px;border-radius:6px}button:disabled{cursor:not-allowed}

#composerStatus:empty{display:none}#composerStatus{color:#8a3500;padding:10px;border:1px solid #b97945;border-radius:6px;background:#fff4e8}#composerStatus:focus{outline:3px solid #086f61;outline-offset:2px}

#messageActionsDialog .actions{flex-wrap:wrap}#messageActionsPreview,#forwardPreview{overflow-wrap:anywhere;max-height:180px;overflow:auto}.selectedMessage{outline:3px solid #086f61;outline-offset:2px}#selectionStatus:empty{display:none}

#editDialog .actions{flex-wrap:wrap}#editBody{width:100%;box-sizing:border-box}

#bulkDeleteDialog .actions{flex-wrap:wrap}#forwardPreview{white-space:pre-wrap}

#publicIntro{max-width:960px;margin:0 auto 24px;padding:24px;background:var(--panel);border:1px solid var(--border);border-radius:12px}#publicIntro p{line-height:1.6}

html[data-text-size=small] #messages .body{font-size:14px}html[data-font=serif] #messages .body{font-family:Georgia,serif}html[data-font=sans] #messages .body{font-family:Arial,sans-serif}html[data-font=mono] #messages .body{font-family:ui-monospace,monospace}#conversation{background-color:var(--chat-bg,#f8fbf9)}#conversation[data-wallpaper=dots]{background-image:radial-gradient(#869b8b44 1px,transparent 1px);background-size:16px 16px}#conversation[data-wallpaper=lines]{background-image:repeating-linear-gradient(45deg,transparent,transparent 14px,#869b8b22 14px,#869b8b22 15px)}#messages>li{background:var(--bubble-other,#eef3f0)}#messages>li.mine{background:var(--bubble-mine,#086f61)}#messages .body ul,#messages .body ol{padding-left:24px;margin:5px 0}#messages .body li{background:transparent;max-width:100%;border-radius:0;padding:0;margin:0;list-style:inherit}#messages .body blockquote{border-left:3px solid #607c70;margin:4px 0;padding:0 10px}#messages .body code{font-family:ui-monospace,monospace;background:#0000000d;border-radius:3px;padding:1px 3px}summary{cursor:pointer;min-height:44px;padding:10px 0}#openChatAppearance{margin-bottom:10px}
html[data-mode=dark]{--panel:#20352c;--border:#597063;color:#e6eeea;background:#14211d}html[data-mode=dark] #auth,html[data-mode=dark] #workspace,html[data-mode=dark] dialog,html[data-mode=dark] .featurePanel,html[data-mode=dark] .appNav,html[data-mode=dark] #chatList button{background:#20352c;color:#e6eeea;border-color:#597063}html[data-mode=dark] aside{background:#192c24;border-color:#597063}html[data-mode=dark] input,html[data-mode=dark] textarea,html[data-mode=dark] select,html[data-mode=dark] .secondary,html[data-mode=dark] .tabs button[aria-pressed=false],html[data-mode=dark] .appNav button,html[data-mode=dark] .chatFilters button{background:#233b30;color:#e6eeea;border-color:#789180}html[data-mode=dark] small,html[data-mode=dark] #chatInfo,html[data-mode=dark] #chatList .preview,html[data-mode=dark] .chatKind{color:#bacbc2}html[data-mode=dark] #conversation{background-color:#182d23}html[data-mode=dark] #messages>li{color:#172f2c}html[data-mode=dark] #messages>li.mine{color:var(--mine-fg,#ffffff)}html[data-mode=dark] #publicIntro{background:#20352c;color:#e6eeea}html[data-mode=dark] #forgotSetup{background:#29483a}html[data-mode=dark] #status{color:#e6eeea}html[data-mode=dark] #status:not(:empty){background:#29483a;border-color:#789180}@media(prefers-color-scheme:dark){html[data-mode=system]{--panel:#20352c;--border:#597063;color:#e6eeea;background:#14211d}html[data-mode=system] #auth,html[data-mode=system] #workspace,html[data-mode=system] dialog,html[data-mode=system] .featurePanel,html[data-mode=system] .appNav,html[data-mode=system] #chatList button{background:#20352c;color:#e6eeea;border-color:#597063}html[data-mode=system] aside{background:#192c24;border-color:#597063}html[data-mode=system] input,html[data-mode=system] textarea,html[data-mode=system] select,html[data-mode=system] .secondary,html[data-mode=system] .tabs button[aria-pressed=false],html[data-mode=system] .appNav button,html[data-mode=system] .chatFilters button{background:#233b30;color:#e6eeea;border-color:#789180}html[data-mode=system] small,html[data-mode=system] #chatInfo,html[data-mode=system] #chatList .preview,html[data-mode=system] .chatKind{color:#bacbc2}html[data-mode=system] #conversation{background-color:#182d23}html[data-mode=system] #messages>li{color:#172f2c}html[data-mode=system] #messages>li.mine{color:var(--mine-fg,#ffffff)}html[data-mode=system] #publicIntro{background:#20352c;color:#e6eeea}html[data-mode=system] #forgotSetup{background:#29483a}html[data-mode=system] #status{color:#e6eeea}html[data-mode=system] #status:not(:empty){background:#29483a;border-color:#789180}}
#conversation{background-size:cover;background-position:center;background-attachment:local}#conversation[data-wallpaper=dots]{background-size:16px 16px}#conversation[data-wallpaper=lines]{background-size:auto}#messages>li{color:#172f2c}#composer{background:#f8fbf9;color:#172f2c;border-radius:8px;padding:12px}#composer small{color:#52665f}#chatTitle,#chatInfo,#openChatAppearance{background:var(--chat-bg,#f8fbf9);color:#172f2c;border-radius:5px;padding:4px 8px}html[data-mode] #messages>li.mine,html[data-mode] #messages>li.mine .body,html[data-mode] #messages>li.mine .sender,html[data-mode] #messages>li.mine .meta{color:var(--mine-fg,#ffffff)}#messages>li.mine code{background:#80808044}html[data-mode] #chatInfo{color:#172f2c}input[type=color]{width:100%;height:48px}

.settingsNav{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.settingsNav button{flex:1 1 90px}.settingsNav button[aria-pressed=true]{background:#086f61;color:#fff;border-color:#086f61}#settingsDialog section{border-top:1px solid #ccdcda;padding-top:12px}#settingsDialog section p{line-height:1.6}#settingsDialog h4{margin-bottom:8px}#settingsUsername{width:100%;box-sizing:border-box}#settingsDialog{max-width:640px}.settingsClose{position:sticky;bottom:0;background:var(--panel);padding:12px 0;margin-top:12px}.settingsClose{position:static;background:transparent}#settingsDialog .settingsNav button[aria-pressed=false]{background:#fff;color:#086f61;border:1px solid #086f61}#settingsDialog .settingsNav button[aria-pressed=true]{background:#086f61;color:#fff;box-shadow:inset 0 -4px 0 #034a42}.settingsHeader{display:flex;justify-content:space-between;align-items:center;gap:12px}.settingsHeader h2{margin:0}#settingsDialog{max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box}.settingsHeader button{flex-shrink:0}
#testFactorSecret{display:block;overflow-wrap:anywhere;font-size:1rem;margin:12px 0}#testFactorCodes{overflow-wrap:anywhere;font-family:monospace}#testFactorCodes li{margin:8px 0}#testFactorDialog,#testFactorLoginDialog{max-height:90dvh;overflow-y:auto}
#testFactorRecovery label{display:flex;align-items:center;gap:10px;margin:16px 0 8px}#testFactorRecovery input[type=checkbox]{width:24px;height:24px;flex:none;margin:0}#testFactorDialog button,#testFactorLoginDialog button{margin:12px 12px 0 0}#testFactorFinish:disabled{opacity:.55}
#testFactorManageDialog{max-height:90dvh;overflow-y:auto}#testFactorManageDialog button{margin:12px 12px 0 0}#testFactorManageForm label.inline{display:flex;align-items:center;gap:10px;margin:16px 0 8px}#testFactorManageForm input[type=checkbox]{width:24px;height:24px;flex:none;margin:0}
#policiesDialog{max-height:90dvh;overflow-y:auto}#policiesNav{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}#policiesNav button[aria-pressed=true]{font-weight:700;text-decoration:underline}#policiesBody p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}#policiesClose{margin-top:12px}
#testFactorResetDialog{max-height:90dvh;overflow-y:auto}#testFactorResetDialog button{margin:12px 12px 0 0}#testFactorResetNote{margin:8px 0}

.adultCheck{display:flex;gap:12px;align-items:center;padding:8px 0;font-weight:600}.adultCheck input{width:24px;height:24px;flex:none}
#moreDialog,#chatInfoDialog,#broadcastDialog,#channelDialog{max-width:440px}#moreDialog .moreGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}#moreDialog .moreGrid button{width:100%}#infoMembers{list-style:none;padding:0;margin:12px 0}#infoMembers li{padding:10px 0;border-bottom:1px solid #d4e0da}#infoMembers .memberName{display:block;font-weight:650;overflow-wrap:anywhere}#infoMembers .memberActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}#infoMembers .memberActions button{flex:1 1 130px;margin:0}#chatInfoDialog .actions,#broadcastDialog .actions,#channelDialog .actions,#moreDialog .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}#chatInfoDialog button,#broadcastDialog button,#channelDialog button{margin-top:4px}#infoAddBtn,#infoRenameBtn{margin:0 0 18px}#invitesDialog ul{list-style:none;padding:0;margin:12px 0}#invitesDialog li,#infoPendingList li{padding:10px 0;border-bottom:1px solid #d4e0da}#invitesDialog .memberName,#infoPendingList .memberName{display:block;font-weight:650;overflow-wrap:anywhere}#invitesDialog .memberActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}#invitesDialog .memberActions button{flex:1 1 120px;margin:0}#infoOwner{border-top:1px solid #d4e0da;margin-top:12px;padding-top:4px}#infoDelBtn{margin:0 0 12px}#moreDialog .moreGrid{grid-template-columns:1fr 1fr}
#voiceRecorder{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}#voiceRecorder audio,#messages audio{max-width:100%;width:300px}#voiceStatus,#voiceError{flex-basis:100%;margin:0}#voiceError{color:#9e1c1c}#voiceRecorder [hidden]{display:none}
.voiceAutoSendLabel{display:flex;align-items:center;gap:6px;font-size:0.9rem;cursor:pointer}
.voiceSpeedSelect{margin-top:4px;font-size:0.85rem}

/* Fix 1: WhatsApp-style composer media set */
.iconBtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;padding:0;background:#fff;color:#086f61;border:1px solid #086f61;border-radius:50%;cursor:pointer;flex-shrink:0}
.iconBtn:hover{background:#e2eeea}
.iconBtn:disabled{opacity:.55;cursor:not-allowed}
.iconBtn .icon{width:24px;height:24px}
.attachWrap{position:relative;display:flex;align-items:center;gap:8px}
#attachMenu{position:absolute;bottom:calc(100% + 10px);left:0;z-index:5;display:flex;flex-direction:column;gap:4px;min-width:220px;background:#fff;border:1px solid #d4e0da;border-radius:12px;padding:8px;box-shadow:0 10px 28px #143f3344}
#attachMenu[hidden]{display:none}
#attachMenu button{justify-content:flex-start;text-align:left;background:#fff;color:#172f2c;border-color:transparent}
#attachMenu button:hover{background:#e2eeea;border-color:#b8c9c1}
.visuallyHidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.photoName{font-size:0.8125rem;color:#52665f;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#voiceRecorder{display:block;margin-top:12px}
.voiceBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.voiceBar[hidden]{display:none}
.voiceHint{font-size:14px;color:#52665f}
.recDot{width:12px;height:12px;border-radius:50%;background:#c0392b;flex-shrink:0;animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{50%{opacity:.3}}
#voiceTimer{font-variant-numeric:tabular-nums;font-weight:700;min-width:44px}
.voiceBubble{display:flex;align-items:center;gap:10px;margin:8px 0;max-width:340px}
.voiceBubble input[type=range]{flex:1;min-width:0;margin:0;padding:0;border:none;background:transparent;accent-color:#086f61}
#voiceSeek{flex:1;min-width:0;margin:0;padding:0;border:none;background:transparent;accent-color:#086f61}
.voiceTime{font-size:0.8125rem;font-variant-numeric:tabular-nums;flex-shrink:0}
#messages li.mine .voiceBubble input[type=range]{accent-color:#fff}
#messages li.mine .voiceTime{color:#fff}
html[data-mode=dark] .iconBtn{background:#233b30;color:#e6eeea;border-color:#789180}
html[data-mode=dark] .iconBtn:hover{background:#29483a}
html[data-mode=dark] #attachMenu{background:#20352c;border-color:#597063}
html[data-mode=dark] #attachMenu button{background:#20352c;color:#e6eeea}
html[data-mode=dark] #attachMenu button:hover{background:#29483a}
html[data-mode=dark] .photoName,html[data-mode=dark] .voiceHint{color:#bacbc2}
@media(prefers-color-scheme:dark){html[data-mode=system] .iconBtn{background:#233b30;color:#e6eeea;border-color:#789180}html[data-mode=system] .iconBtn:hover{background:#29483a}html[data-mode=system] #attachMenu{background:#20352c;border-color:#597063}html[data-mode=system] #attachMenu button{background:#20352c;color:#e6eeea}html[data-mode=system] #attachMenu button:hover{background:#29483a}html[data-mode=system] .photoName,html[data-mode=system] .voiceHint{color:#bacbc2}}

/* Fix 4: quieter per-message Actions button (still focusable + announced) */
#messages .deleteMessage{background:transparent;border-color:transparent;color:#52665f}
#messages .deleteMessage:hover{background:#e2eeea;border-color:#b8c9c1;color:#086f61}
#messages li.mine .deleteMessage{color:#cfe6de}
#messages li.mine .deleteMessage:hover{background:#ffffff22;border-color:transparent;color:#fff}
html[data-mode=dark] #messages .deleteMessage{color:#bacbc2}
@media(prefers-color-scheme:dark){html[data-mode=system] #messages .deleteMessage{color:#bacbc2}}

/* Fix 5: subtle motion on interactive elements */
button,.button,#chatList button,.appNav button,.chatFilters button,.iconBtn{transition:background-color .18s ease,border-color .18s ease,transform .15s ease}
button:active,.button:active{transform:scale(.97)}


/* Message reactions keep native details disclosure and labelled keyboard buttons. */
.reactionPanel{margin-top:.5rem;font-size:.85rem;max-width:100%}
.reactionPanel summary{cursor:pointer;padding:.35rem .65rem;border:1px solid currentColor;border-radius:1rem;overflow-wrap:anywhere;width:fit-content;max-width:100%;opacity:.9}
.reactionChoices{display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.45rem}
.reactionChoices button{min-width:44px;min-height:44px;font-size:.85rem;padding:.45rem .7rem;border-radius:999px}
.reactionChoices button[aria-pressed=true]{outline:3px solid currentColor;outline-offset:1px}
.reactionPanel summary:focus-visible,.reactionChoices button:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* Saylune quiet-premium layer. Keep chat colours, type and wallpaper user-owned. */
:root{
  --ui-ground:#f3f5f1;--ui-panel:#ffffff;--ui-raised:#f7f9f6;
  --ui-ink:#193a33;--ui-muted:#50675f;--ui-line:#cedbd3;
  --ui-accent:#086f61;--ui-soft:#e7f2ec;--ui-shadow:0 10px 32px #18382d09;
  --panel:var(--ui-panel);--border:var(--ui-line);
  color:var(--ui-ink);background:var(--ui-ground);line-height:1.55;
}
html[data-mode=dark]{
  --ui-ground:#101e1a;--ui-panel:#1b3028;--ui-raised:#20372e;
  --ui-ink:#edf4ee;--ui-muted:#bfcec4;--ui-line:#526b5e;
  --ui-accent:#91d9c1;--ui-soft:#294c3d;--ui-shadow:0 10px 32px #00000014;
}
@media(prefers-color-scheme:dark){html[data-mode=system]{
  --ui-ground:#101e1a;--ui-panel:#1b3028;--ui-raised:#20372e;
  --ui-ink:#edf4ee;--ui-muted:#bfcec4;--ui-line:#526b5e;
  --ui-accent:#91d9c1;--ui-soft:#294c3d;--ui-shadow:0 10px 32px #00000014;
}}
body{background:var(--ui-ground);color:var(--ui-ink)}
header{background:#075e53;border-bottom:1px solid #ffffff26;padding-block:18px;gap:16px}
.brand{gap:12px;min-width:0}
.brand h1{font-size:28px;letter-spacing:-.035em;display:flex;align-items:center;gap:7px}
.brand h1 img{margin-right:0!important;flex:none;border-radius:9px}
.makerAvatar{width:42px;height:42px;border-color:#ffffff80}
.creator{font-size:0.75rem;line-height:1.45;gap:4px}
.makerLink{margin-left:0;padding:2px 8px}
#identity{font-size:14px;overflow-wrap:anywhere}
header>button{background:#ffffff10;border-color:#ffffff70;font-size:14px;padding:9px 15px}
header>button:hover{background:#ffffff25;border-color:white}
main{max-width:1180px;padding:24px 24px 12px}
h1,h2,h3{letter-spacing:-.02em}
#status:empty{display:none}
#status:not(:empty){color:var(--ui-ink);background:var(--ui-soft);border-color:var(--ui-line);border-left:3px solid var(--ui-accent);padding:10px 14px;margin:0 0 16px;font-size:14px}
button,.button{border-radius:10px;font-weight:600;padding:10px 16px}
button:disabled,.button:disabled{transform:none}
input,textarea,select{border-radius:10px;border-color:var(--ui-line);background:var(--ui-panel);color:var(--ui-ink);padding:11px 12px;line-height:1.5}
input:hover,textarea:hover,select:hover{border-color:var(--ui-muted)}
textarea{resize:vertical;min-height:76px}
label{font-size:14px;line-height:1.5}
small{color:var(--ui-muted);line-height:1.55}
.secondary{background:var(--ui-panel);color:var(--ui-accent);border-color:var(--ui-line)}
.secondary:hover{background:var(--ui-soft);color:var(--ui-accent);border-color:var(--ui-accent)}
#auth{background:var(--ui-panel);border-color:var(--ui-line);border-radius:22px;padding:30px;box-shadow:var(--ui-shadow);margin:0;width:100%;max-width:480px}
#auth h2{font-size:25px;margin:18px 0 24px}
#auth form>button[type=submit],#auth #google{width:100%;text-align:center}
#auth .passwordToggle{margin-bottom:18px;padding:8px 12px;font-size:0.8125rem}
#auth #forgotPassword{margin-top:16px}
#auth #resetNote{font-size:0.8125rem;color:var(--ui-muted)}
#auth #loginBack,#auth #registerBack{font-size:0.8125rem;padding:7px 12px}
#auth #loginHelp{border-top:1px solid var(--ui-line);margin-top:20px;padding-top:6px;font-size:14px}
#publicIntro{background:transparent;border:0;padding:30px 22px 30px 0;margin:0;max-width:620px}
#publicIntro h2{font-size:clamp(30px,3.4vw,46px);line-height:1.18;max-width:13ch;letter-spacing:-.04em;margin-bottom:24px}
#publicIntro p{font-size:17px;line-height:1.75;max-width:45ch;color:var(--ui-muted)}
#publicIntro .privacyNote{font-size:14px;border-top:1px solid var(--ui-line);margin-top:28px;padding-top:20px;max-width:47ch;color:var(--ui-ink)}
main:has(>#auth:not([hidden])){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 64px;align-items:start;padding-top:54px;padding-bottom:32px}
main:has(>#auth:not([hidden]))>#status:not(:empty){grid-column:1/-1;margin:0}
main>noscript{grid-column:1/-1}
.appNav{padding:6px;gap:6px;border-color:var(--ui-line);background:var(--ui-panel);border-radius:14px;margin-bottom:16px;box-shadow:var(--ui-shadow)}
.appNav button{font-size:14px;color:var(--ui-muted);border-radius:9px}
.appNav button[aria-pressed=true]{background:#086f61;color:#fff}
#workspace{grid-template-columns:290px minmax(0,1fr);background:var(--ui-panel);border-color:var(--ui-line);border-radius:20px;box-shadow:var(--ui-shadow);min-height:620px}
aside{background:var(--ui-raised);border-color:var(--ui-line);padding:22px 18px}
.sectionTitle{gap:8px;flex-wrap:wrap;margin-bottom:22px}
.sectionTitle h2{font-size:20px;flex:1}
.sectionTitle button{font-size:0.8125rem;padding:8px 11px}
.chatFilters{gap:6px;margin-bottom:18px}
.chatFilters button{flex:1;background:var(--ui-panel);color:var(--ui-muted);border-color:var(--ui-line);border-radius:9px;font-size:0.8125rem;padding:8px}
.chatFilters button[aria-pressed=true]{background:#086f61;border-color:#086f61;color:white}
.searchLabel{font-size:0.8125rem}
#chatSearch{font-size:14px;margin:6px 0 18px}
#chatList button{background:var(--ui-panel);border-color:var(--ui-line);color:var(--ui-ink);padding:14px 12px;border-radius:12px}
#chatList button[aria-current=true]{background:var(--ui-soft);border:1px solid var(--ui-accent);box-shadow:inset 3px 0 var(--ui-accent)}
#chatList .preview,.chatKind{color:var(--ui-muted);font-size:0.75rem;line-height:1.6}
#chatList .chatName{font-size:15px}
#noChats{font-size:14px;color:var(--ui-muted)}
#conversation{padding:26px;min-width:0}
#chatTitle{font-size:23px;line-height:1.35;margin:0 0 10px;padding:0;background:transparent;overflow-wrap:anywhere}
#chatInfo{font-size:0.8125rem;margin:12px 0 0;padding:5px 9px;background:var(--ui-panel);color:var(--ui-muted);width:fit-content;border:1px solid var(--ui-line);border-radius:8px}
#chatInfo:empty{display:none}
#openChatAppearance,#openContactInfo,#openChatInfo{font-size:0.75rem;padding:7px 10px;background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-line)}
#messages{min-height:220px;max-height:480px;margin:24px 0;padding:4px 5px;scroll-padding:12px;scrollbar-width:thin}
#messages>li{width:fit-content;min-width:130px;max-width:88%;padding:12px 16px;border-radius:16px 16px 16px 4px;margin-bottom:14px;box-shadow:0 2px 3px #18382d07}
#messages>li.mine{border-radius:16px 16px 4px 16px}
#messages .sender{font-size:0.75rem;line-height:1.5;letter-spacing:.015em}
#messages .body{margin:7px 0;font-size:16px;line-height:1.65}
#messages .meta{font-size:0.6875rem;line-height:1.6}
#messages .deleteMessage{display:inline-block;vertical-align:top;margin:8px 6px 0 0;padding:8px 10px;min-height:44px;font-size:0.75rem;border-radius:8px}
.reactionPanel{display:inline-block;vertical-align:top;margin-top:8px;max-width:100%}
.reactionPanel summary{font-size:0.75rem;min-height:44px;padding:10px;border-radius:8px;opacity:1}
.reactionPanel[open]{display:block}
.reactionChoices{padding:10px 0 2px;gap:8px}
.reactionChoices button{border-radius:9px}
#messages li.mine .deleteMessage,#messages li.mine .voiceTime{color:var(--mine-fg,#fff)}
#messages li.mine .deleteMessage:hover{color:var(--mine-fg,#fff);background:#80808022}
#messages li.mine .voiceBubble input[type=range]{accent-color:var(--mine-fg,#fff)}
#composer{background:var(--ui-panel);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:14px;padding:16px;box-shadow:0 3px 14px #18382d05}
#composer>label{font-size:0.8125rem}
#message{margin:7px 0 8px;min-height:76px}
#composer summary{font-size:0.75rem;color:var(--ui-muted);padding:8px 0}
#composer .composerActions{gap:12px;margin-top:4px;align-items:center}
#composer .attachWrap{flex:1;min-width:0;flex-wrap:wrap}
#composer #send{min-width:84px}
#composer>small{font-size:0.75rem;color:var(--ui-muted);margin:12px 0 0}
.iconBtn{width:44px;height:44px;min-height:44px;border-radius:12px;background:var(--ui-raised);color:var(--ui-accent);border-color:var(--ui-line)}
.iconBtn:hover{background:var(--ui-soft);border-color:var(--ui-accent)}
#voiceIdleBar{gap:8px 10px}
#voiceRecorder{margin-top:12px;padding-top:12px;border-top:1px solid var(--ui-line)}
.voiceHint{font-size:0.8125rem;color:var(--ui-muted)}
.voiceAutoSendLabel{margin-left:auto;font-size:0.75rem;white-space:nowrap;min-height:44px;padding:6px 0;gap:8px}
.voiceAutoSendLabel input[type=checkbox]{width:22px;height:22px;min-height:22px;margin:0;accent-color:#086f61;flex:none}
#voiceStatus:empty,#voiceError:empty{display:none}
#voiceStatus,#voiceError{font-size:0.8125rem;margin:10px 0 0;overflow-wrap:anywhere}
#composerStatus{font-size:0.8125rem;background:var(--ui-soft);border-color:var(--ui-line);color:var(--ui-ink);margin:12px 0 0}
#voiceError{color:#a32121}
.photoName{color:var(--ui-muted);max-width:100%}
.voiceSpeedSelect{max-width:120px}
.voiceBubble{max-width:100%}
#attachMenu{background:var(--ui-panel);border-color:var(--ui-line);box-shadow:0 10px 32px #102f2826;max-width:min(280px,calc(100vw - 72px));min-width:min(220px,calc(100vw - 72px))}
#attachMenu button{color:var(--ui-ink);background:var(--ui-panel)}
#attachMenu button:hover{background:var(--ui-soft)}
dialog{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-line);border-radius:20px;padding:26px;box-shadow:0 24px 100px #0f282a33;max-height:calc(100dvh - 32px)}
dialog::backdrop{background:#102a2673}
dialog h2{font-size:23px}
dialog .actions{flex-wrap:wrap;gap:10px}
#settingsDialog{max-width:660px}
.settingsHeader{padding-bottom:14px;border-bottom:1px solid var(--ui-line)}
#settingsIdentity{color:var(--ui-muted);font-size:0.8125rem;margin:14px 0}
.settingsNav{gap:6px;margin:16px 0 22px}
#settingsDialog .settingsNav button{font-size:0.8125rem;padding:9px 12px;box-shadow:none}
#settingsDialog .settingsNav button[aria-pressed=false]{background:var(--ui-panel);color:var(--ui-muted);border-color:var(--ui-line)}
#settingsDialog section{border-color:var(--ui-line);padding-top:16px}
#settingsDialog section h3{margin:4px 0 20px;font-size:18px}
#settingsDialog h4{margin-top:24px}
.settingsClose{border-top:1px solid var(--ui-line);padding-top:18px;margin-top:24px}
#settingsDialog input,#settingsDialog textarea,#settingsDialog select,dialog input,dialog textarea,dialog select{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-control)}
.featurePanel{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-line);border-radius:20px;box-shadow:var(--ui-shadow);padding:40px 28px}
footer{font-size:0.75rem;color:var(--ui-muted);padding:24px 20px 30px}
:focus-visible{outline:3px solid #de8300;outline-offset:3px}
@media(min-width:721px){#chatList{max-height:580px;overflow-y:auto;padding:3px;scrollbar-width:thin}}
@media(max-width:900px){main:has(>#auth:not([hidden])){gap:28px}#workspace{grid-template-columns:255px minmax(0,1fr)}#conversation{padding:20px}.sectionTitle{gap:6px}.sectionTitle h2{flex-basis:100%;margin-bottom:4px}}
@media(max-width:720px){
  header{padding:14px 18px;gap:8px 12px;align-items:center}
  .brand{flex:1 1 100%}.brand h1{font-size:26px}.makerAvatar{width:38px;height:38px}
  .creator{font-size:0.6875rem}.makerLink{min-height:36px}
  #identity{font-size:0.75rem;flex:1 1 100%;margin:0}
  header>button{min-height:44px;padding:8px 14px}
  main{padding:16px 12px 8px}
  main:has(>#auth:not([hidden])){display:block;padding:24px 20px}
  #publicIntro{padding:8px 4px 24px;max-width:100%}
  #publicIntro h2{font-size:32px;max-width:16ch;margin-bottom:18px}
  #publicIntro p{font-size:15px;line-height:1.7;margin:12px 0}
  #publicIntro .privacyNote{font-size:0.8125rem;margin-top:20px;padding-top:16px}
  #auth{padding:24px 20px;max-width:none;border-radius:18px}
  #auth h2{font-size:23px}
  .appNav{position:static;top:auto;margin-bottom:12px;padding:5px;gap:3px;border-radius:12px}
  .appNav button{font-size:0.8125rem;padding:10px 8px}
  #workspace{display:block;border-radius:16px;min-height:0;overflow:visible}
  aside{padding:18px 16px;border-right:0;border-bottom:1px solid var(--ui-line);border-radius:16px 16px 0 0}
  .sectionTitle{margin-bottom:14px;gap:8px}.sectionTitle h2{flex:1 1 auto;margin:0}
  .chatFilters{margin-bottom:12px}.chatFilters button{font-size:0.75rem}
  #chatSearch{margin-bottom:12px}
  #chatList{max-height:220px;overflow-y:auto;padding:3px;scrollbar-width:thin}
  #chatList button{padding:10px 12px;margin-bottom:8px}
  #conversation{padding:20px 16px;border-radius:0 0 16px 16px}
  #chatTitle{font-size:21px}#chatInfo{font-size:0.75rem}
  #messages{margin:18px 0;max-height:460px;min-height:180px;padding:4px}
  #messages>li{max-width:94%;padding:11px 13px}
  #composer{padding:13px;border-radius:12px}
  #message{min-height:76px}
  .voiceAutoSendLabel{margin-left:0}
  #voiceIdleBar{gap:6px 9px}
  dialog{padding:22px 18px;border-radius:16px;width:calc(100% - 24px)}
  .settingsHeader h2{font-size:21px}
  .settingsNav button{flex:1 1 80px}
  .featurePanel{padding:28px 20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active,.button:active{transform:none}}
/* High-specificity legacy dark rules must use the same surface tokens. */
html[data-mode] .appNav,html[data-mode] #workspace,html[data-mode] #auth,html[data-mode] dialog,html[data-mode] .featurePanel{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-line)}
html[data-mode] aside{background:var(--ui-raised);color:var(--ui-ink);border-color:var(--ui-line)}
html[data-mode] .appNav button,html[data-mode] .secondary,html[data-mode] .tabs button[aria-pressed=false],html[data-mode] .chatFilters button{background:var(--ui-panel);color:var(--ui-accent);border-color:var(--ui-line)}
html[data-mode] .appNav button{border-color:transparent;color:var(--ui-muted)}
html[data-mode] .appNav button[aria-pressed=true],html[data-mode] .chatFilters button[aria-pressed=true]{background:#086f61;border-color:#086f61;color:#fff}
html[data-mode] .secondary:hover,html[data-mode] .tabs button[aria-pressed=false]:hover,html[data-mode] .chatFilters button:hover{background:var(--ui-soft);color:var(--ui-accent)}
html[data-mode] input,html[data-mode] textarea,html[data-mode] select{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-line)}
html[data-mode] input::placeholder,html[data-mode] textarea::placeholder{color:var(--ui-muted);opacity:1}
html[data-mode] #chatList button{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-line)}
html[data-mode] #chatList button[aria-current=true]{background:var(--ui-soft);border-color:var(--ui-accent)}
html[data-mode] #chatTitle{color:var(--ui-ink);background:var(--ui-panel);padding:5px 9px;border-radius:8px;width:fit-content;max-width:100%}
html[data-mode] #chatInfo{color:var(--ui-muted);background:var(--ui-panel)}
html[data-mode] .iconBtn{color:var(--ui-accent);background:var(--ui-raised);border-color:var(--ui-line)}
html[data-mode] .iconBtn:hover{background:var(--ui-soft)}
html[data-mode] #messages li.mine .deleteMessage,html[data-mode] #messages li.mine .voiceTime{color:var(--mine-fg,#fff)}
html[data-mode] #messages li.mine .voiceBubble .iconBtn{color:var(--mine-fg,#fff);background:transparent;border-color:currentColor}
html[data-mode] #messages li:not(.mine) .voiceBubble .iconBtn{background:#ffffff;color:#086f61;border-color:#7d928b}
html[data-mode] #attachMenu,html[data-mode] #attachMenu button{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-line)}
html[data-mode] #attachMenu button:hover{background:var(--ui-soft)}
html[data-mode] .photoName,html[data-mode] .voiceHint{color:var(--ui-muted)}
html[data-mode] #voiceError{color:#a32121}
html[data-mode=dark] #voiceError{color:#ffb9af}
@media(prefers-color-scheme:dark){html[data-mode=system] #voiceError{color:#ffb9af}}
html[data-mode] #publicIntro{background:transparent;color:var(--ui-ink)}
html[data-mode] #forgotSetup{background:var(--ui-soft);color:var(--ui-ink)}
/* Controls and focus have their own contrast tokens, not decorative hairlines. */
:root{--ui-control:#748c7e;--ui-focus:#a45500}
html[data-mode=dark]{--ui-control:#829d8e;--ui-focus:#ffbf69}
@media(prefers-color-scheme:dark){html[data-mode=system]{--ui-control:#829d8e;--ui-focus:#ffbf69}}
html[data-mode] input:not([type=range]):not([type=checkbox]):not([type=radio]),html[data-mode] textarea,html[data-mode] select,html[data-mode] dialog input:not([type=range]):not([type=checkbox]):not([type=radio]),html[data-mode] dialog textarea,html[data-mode] dialog select{border-color:var(--ui-control)}
:focus-visible,#composerStatus:focus,.reactionPanel summary:focus-visible,.reactionChoices button:focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
header :focus-visible{outline-color:#fff}
/* Message backgrounds are user-selected; black and white rings cover either. */
#messages :focus-visible{outline:3px solid #101e1a;outline-offset:3px;box-shadow:0 0 0 3px #ffffff}
.mobileChatsLink{display:none}
@media(max-width:720px){.mobileChatsLink{display:inline-flex;align-items:center;min-height:44px;margin:0 0 10px;padding:6px 10px;border:1px solid var(--ui-control);border-radius:8px;color:var(--ui-accent);background:var(--ui-panel);font-size:0.8125rem;font-weight:600;text-decoration:none}.mobileChatsLink:hover{background:var(--ui-soft)}#chatsHeading{scroll-margin-top:16px}}


@media(max-width:720px){body.chatOpen #workspace>aside{display:none}body:not(.chatOpen) #workspace>#conversation{display:none}.voiceHint{display:none}#composer{padding-top:8px}#composer>small{margin:6px 0 0}}