:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#233e36;background:#f4f4ee;font-synthesis:none;--green:#195b4b;--muted:#78867e;--line:#e5e9e2}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.45;cursor:wait}a{color:inherit}input,textarea{outline:none}input:focus,textarea:focus{border-color:#659f87!important}button:focus-visible,a:focus-visible{outline:3px solid #d3a75f;outline-offset:3px}[hidden]{display:none!important}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:38px;letter-spacing:-2px;text-decoration:none}.brand img{width:34px;height:34px}.brand span{font-size:14px;color:#c5ad70;margin:15px 0 0 -6px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#7d8b7a}.primary{background:var(--green);color:white;padding:15px 23px;border-radius:12px;font-weight:600;min-height:48px}.auth{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}.intro{background:#e8eee2;padding:46px 10%;display:flex;flex-direction:column;justify-content:space-between;min-height:100dvh}.intro h1{font-size:clamp(36px,4vw,62px);font-weight:500;letter-spacing:-2px;line-height:1.12;margin:20px 0}.intro p:not(.eyebrow){color:#6c8072;line-height:1.8}.intro small{color:#7c8d7e;font-size:11px}.sample{display:flex;flex-direction:column;align-items:start;gap:14px;margin:40px 0}.sample span{padding:17px 24px;border-radius:16px 16px 16px 3px;background:#fff9;transform:rotate(-3deg)}.sample span+span{margin-left:64px;background:var(--green);color:white;transform:rotate(3deg);border-radius:16px 16px 3px 16px}.auth-panel{display:grid;place-items:center;padding:40px}.auth-panel form{width:min(390px,100%)}h2{font-size:30px;letter-spacing:-1px;font-weight:550}.auth-panel h2{margin-bottom:8px}.auth-panel p{color:#718077;line-height:1.5}.tabs{display:flex;background:#e9ede5;border-radius:10px;padding:4px;margin:30px 0 24px}.tabs button{flex:1;padding:10px;font-size:13px;border-radius:7px}.tabs .selected{background:white;box-shadow:0 2px 6px #0001}label{display:block;font-size:13px;font-weight:600}label input,dialog input,dialog select{display:block;width:100%;padding:13px;border:1px solid #dce2d9;border-radius:9px;background:#fff9;margin:8px 0 20px}.auth-panel .primary{width:100%;margin:4px 0}.notice{font-size:11px;line-height:1.7;color:#7c8173;border-top:1px solid #dfe3d8;padding-top:20px;margin-top:24px}.notice strong{color:#71796a}#auth-error{color:#a33c32;font-size:13px}#app{height:100dvh;display:grid;grid-template-columns:340px 1fr;max-width:1800px;margin:auto;background:#f8f9f5}.sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.side-top{display:flex;align-items:center;justify-content:space-between;padding:27px 26px 20px}.icon{min-width:40px;min-height:40px;border-radius:10px;font-size:23px;display:inline-grid;place-items:center;color:#7b8b81}.icon:hover{background:#eaf0e8}.list-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 25px 18px}.list-heading h1{font-size:27px;margin:8px 0;font-weight:550;letter-spacing:-1px}.round{border-radius:50%;width:42px;height:42px;background:var(--green);color:white;font-size:26px;flex-shrink:0}.search{display:flex;margin:0 24px 26px;background:#f3f5f0;border-radius:10px;align-items:center;padding:0 12px;color:#859187}.search span{font-size:24px}.search input{min-width:0;margin:0;background:none;border:0;padding:13px 10px;font-weight:400;font-size:12px}.list-caption{display:flex;justify-content:space-between;margin:0 26px 15px;font-size:10px;letter-spacing:1.5px;color:#8a968c}.list-caption span{letter-spacing:0}#chats{overflow:auto;flex:1;padding:0 12px}.chat-row{width:100%;text-align:left;display:flex;gap:13px;padding:16px 12px;border-radius:12px;margin-bottom:5px;align-items:center}.chat-row:hover{background:#f6f8f3}.chat-row.selected{background:#eaf1e6}.avatar{border-radius:16px;background:#e8eddf;color:#62806c;display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;font-weight:600;font-size:17px}.chat-row:nth-child(3n) .avatar{background:#f2e8df;color:#ad8668}.chat-row>div{flex:1;min-width:0}.chat-row strong{font-size:13px}.chat-row p{font-size:12px;color:#8a928b;margin:7px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-row .badge{font-size:10px;background:#dce8d4;border-radius:6px;padding:4px;color:#547058}.side-footer{border-top:1px solid var(--line);margin:15px 24px 0;padding:20px 0;display:flex;gap:12px;align-items:center}.side-footer .avatar{width:37px;height:37px;border-radius:50%;font-size:13px}.side-footer strong{font-size:12px}.side-footer small{display:block;font-size:10px;color:#91988e;margin-top:5px}.status-dot{width:7px;height:7px;background:#8aaa76;border-radius:50%;margin-left:auto}.conversation{min-width:0;min-height:0;background:#f3f5ed}.conversation #welcome{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#f0f3e9,#f8f9f5)}.welcome-mark{font-size:65px;letter-spacing:-5px;width:108px;height:108px;display:grid;place-items:center;border-radius:32px;background:#e1e9d7;color:#517656;transform:rotate(-7deg);margin-bottom:30px;font-weight:700}#welcome h2{font-size:36px;line-height:1.3;margin:14px}#welcome>p:not(.eyebrow){color:#8a9588;line-height:1.7;font-size:14px}#welcome .primary{margin:18px}#welcome small{font-size:10px;color:#9ca395;margin-top:25px}#active-chat{height:100%;display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;gap:12px;min-height:89px;background:#fff;padding:16px 30px;border-bottom:1px solid var(--line)}#back{display:none}#chat-details{text-align:left;min-width:0}#chat-details strong{display:block;font-size:15px}#chat-details small{display:block;color:#8b988d;font-size:11px;margin-top:6px;max-width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#connection{margin-left:auto;font-size:10px;color:#88957f}.privacy-note{text-align:center;color:#969d8c;font-size:10px;padding:13px}.conversation #messages{overflow:auto;flex:1;padding:12px 7% 20px;scroll-behavior:smooth}#message-items{display:flex;flex-direction:column;gap:13px}.message-row{display:flex;flex-direction:column;align-items:flex-start;max-width:82%;align-self:flex-start;position:relative}.message-row.mine{align-items:flex-end;align-self:flex-end}.bubble{padding:13px 16px;background:white;border-radius:2px 15px 15px 15px;box-shadow:0 1px 2px #24331c05;max-width:100%;overflow-wrap:anywhere;font-size:14px;line-height:1.55}.mine .bubble{background:#dce9ce;border-radius:15px 2px 15px 15px}.bubble .sender{font-size:10px;color:#779164;font-weight:700;margin-bottom:5px}.message-text{white-space:pre-wrap}.bubble img,.bubble video{max-width:100%;max-height:300px;object-fit:contain;border-radius:9px;display:block}.bubble audio{max-width:100%;width:260px}.bubble .sticker{font-size:64px;line-height:1.3}.bubble .quote{border-left:3px solid #84a073;background:#00000005;padding:5px 8px;margin-bottom:8px;font-size:11px;color:#718565;white-space:pre-wrap}.message-meta{display:flex;gap:7px;justify-content:flex-end;align-items:center;font-size:9px;color:#8d9883;margin-top:6px}.message-menu{font-size:17px;line-height:14px;color:#87977c;min-width:27px}.reactions{font-size:12px;margin-top:4px;padding:2px 7px;border:1px solid #dce4d6;border-radius:12px;background:#fff}#composer{display:flex;align-items:center;gap:6px;background:white;margin:0 25px 23px;padding:10px;border:1px solid #e3e8db;border-radius:16px}#composer textarea{background:none;border:0;resize:none;flex:1;min-width:0;max-height:120px;padding:11px 6px;font-size:13px;line-height:1.5}.composer-tools{display:flex;gap:0}.composer-tools .icon{font-size:24px;min-width:33px}#voice{font-size:19px}#voice.recording{background:#f8ddd4;color:#b64434}#reply-bar,#attachment-bar{background:#e2ebd9;margin:0 26px;padding:10px 15px;border-radius:10px 10px 0 0;font-size:12px;display:flex;align-items:center;justify-content:space-between}#attachment-bar audio{max-width:70%;height:34px}#picker{background:white;padding:18px;margin:0 26px 10px;border:1px solid var(--line);border-radius:12px;max-height:260px;overflow:auto}#picker button.emoji-item{font-size:25px;padding:9px}#picker p{font-size:12px;color:#849179}#picker input,#search-bar input{padding:10px;border:1px solid var(--line);border-radius:8px;width:100%}#search-bar{padding:8px 26px;background:white}.empty{font-size:13px;color:#899580;padding:30px 15px;text-align:center;line-height:1.8}.day{text-align:center;color:#9da48f;font-size:10px;margin:13px}.file-link{display:block;color:#466344;padding:10px 0}dialog{border:1px solid var(--line);border-radius:20px;padding:25px;max-width:460px;width:calc(100% - 32px);max-height:90dvh;box-shadow:0 30px 80px #0002;background:#fcfdf9}dialog::backdrop{background:#17342866;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:23px;margin:0 0 15px}dialog p{font-size:13px;line-height:1.7;color:#7b8876}dialog .primary{width:100%}.action-list{display:grid;gap:7px}.action-list button{text-align:left;padding:13px;background:#eef2e9;border-radius:9px}.error{color:#a14c35!important}.danger{color:#a14c35}.member{padding:10px;border-bottom:1px solid var(--line);font-size:13px}.member small{display:block;color:#94a08c;margin-top:4px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#264e3e;color:white;border-radius:12px;padding:14px 22px;font-size:13px;z-index:10;box-shadow:0 5px 25px #0002;max-width:90%;width:max-content}#older{display:block;margin:0 auto 20px;color:#748b65;font-size:12px;padding:8px 15px;border-radius:20px;background:#e6ecdf}@media(min-width:1500px){#app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}@media(max-width:760px){.auth{display:block}.intro{min-height:auto;padding:25px}.intro>div,.intro>small{display:none}.auth-panel{padding:28px 25px}.auth-panel h2{font-size:28px}#app{grid-template-columns:1fr}.sidebar{height:100dvh}.conversation{display:none}#app.chat-open .sidebar{display:none}#app.chat-open .conversation{display:block;height:100dvh}#back{display:inline-grid}.chat-header{padding:12px 10px;gap:7px;min-height:75px}.chat-header .avatar{width:38px;height:38px;border-radius:13px}#connection{font-size:9px}.chat-header #chat-details{flex:1}#chat-details small{max-width:145px}.conversation #messages{padding:10px 14px 18px}.message-row{max-width:89%}#composer{margin:0 8px max(8px,env(safe-area-inset-bottom));padding:6px;gap:0;border-radius:13px}#composer .icon{min-width:32px}.composer-tools .icon{font-size:22px}#composer .round{width:36px;height:36px}#composer textarea{font-size:16px;padding:8px 3px}.privacy-note{font-size:9px}#reply-bar,#attachment-bar,#picker{margin-left:9px;margin-right:9px}.bubble{font-size:14px;padding:11px 13px}.side-top{padding-top:max(25px,env(safe-area-inset-top))}.side-footer{padding-bottom:max(20px,env(safe-area-inset-bottom))}#toast{bottom:85px}}

/* User-selected colors and density; retain accessible touch targets in compact mode. */
:root{--surface:#fff;--canvas:#f3f5ed;--ink:#233e36;--soft:#eaf1e6;--own:#dce9ce;--secondary:#5e7066}
:root[data-color=ocean]{--green:#215f8b;--soft:#e4eff9;--own:#d3e7f7;--canvas:#f0f5f9}
:root[data-color=berry]{--green:#82416e;--soft:#f4e8f0;--own:#ead6e5;--canvas:#f7f1f5}
:root[data-theme=dark]{color-scheme:dark;--surface:#202b28;--canvas:#15201d;--ink:#ecf2ed;--line:#40524a;--soft:#304039;--own:#315247;--secondary:#b4c5bb;--muted:#b4c5bb;--green:#75b79d}
:root[data-theme=dark][data-color=ocean]{--green:#81b7e0;--own:#2c465b;--soft:#273c4c}
:root[data-theme=dark][data-color=berry]{--green:#d39ac2;--own:#57364f;--soft:#432e3d}
#app,.sidebar,.chat-header,#composer,#picker,dialog,#search-bar{background:var(--surface);color:var(--ink)}
.conversation,.conversation #welcome{background:var(--canvas);color:var(--ink)}
.chat-row.selected,.search,.tabs,.action-list button,.settings-nav{background:var(--soft)}
.bubble{background:var(--surface);color:var(--ink)}.mine .bubble{background:var(--own)}
.avatar,#reply-bar,#attachment-bar,.welcome-mark{background:var(--soft);color:var(--green)}
.chat-row:nth-child(3n) .avatar{background:var(--soft);color:var(--green)}
label input,dialog input,dialog select,#picker input,#search-bar input{background:var(--canvas);color:var(--ink);border-color:var(--line)}
.primary,.round{background:var(--green)}:root[data-theme=dark] .primary,:root[data-theme=dark] .round{color:#11251d}
.chat-row:hover,.icon:hover{background:var(--soft)}
.chat-row p,.empty,dialog p,#chat-details small,.settings-footer,.person-result small,#connection{color:var(--secondary)}
.reactions{background:var(--surface);color:var(--ink)}
.find-people{font-size:12px;padding:10px 12px;min-height:44px;white-space:nowrap}.find-people-link{margin:0 24px 14px;padding:12px;text-align:left;border:1px solid var(--line);border-radius:10px;font-weight:600;color:var(--green)}
.settings-nav{display:flex;padding:4px;border-radius:12px;gap:4px;margin:8px 0 22px}.settings-nav button{flex:1;border-radius:9px;min-height:44px;font-size:13px}.settings-nav button[aria-pressed=true]{background:var(--green);color:white}:root[data-theme=dark] .settings-nav button[aria-pressed=true]{color:#11251d}
.settings-content h3{font-size:18px;margin:0 0 18px}.settings-footer{border-top:1px solid var(--line);padding-top:16px;margin-top:22px}.settings-footer button{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:10px}
.people-navigation{margin:0 0 20px}.new-group-option{padding:12px 16px;border-radius:10px;background:var(--soft);font-weight:600;color:var(--green)}
#people-form .primary{margin-top:-6px}#people-results{max-height:320px;overflow:auto;margin-top:12px}.person-result{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 4px;text-align:left;border-bottom:1px solid var(--line)}.person-result>span:nth-child(2){min-width:0;flex:1;overflow-wrap:anywhere}.person-result small{display:block;font-size:11px;margin-top:5px}.person-result strong{font-size:14px}.person-action{font-size:11px;color:var(--green)}.person-result:hover{background:var(--soft)}
.selected-person{display:block;max-width:100%;overflow-wrap:anywhere;background:var(--soft);padding:10px;border-radius:10px;margin-bottom:8px;text-align:left}#group-create{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
:root[data-density=compact] .chat-row{padding:9px 10px;min-height:54px}:root[data-density=compact] .chat-row .avatar{width:36px;height:36px;font-size:14px}:root[data-density=compact] #message-items{gap:8px}:root[data-density=compact] .bubble{padding:8px 12px}:root[data-density=compact] .side-top{padding-bottom:8px}:root[data-density=compact] .list-heading{padding-top:8px;padding-bottom:8px}
:root[data-theme=dark] .file-link,:root[data-theme=dark] .bubble .sender,:root[data-theme=dark] .bubble .quote{color:#c0d9cc}:root[data-theme=dark] .danger,:root[data-theme=dark] .error{color:#f6a99d!important}
@media(max-width:760px){.person-result .avatar{width:36px;height:36px}.person-action{max-width:55px}.list-heading{gap:8px}.settings-nav{gap:1px}}
.call-tools{display:flex;gap:2px}#call-panel{position:fixed;right:18px;bottom:18px;width:min(400px,calc(100vw - 24px));z-index:20;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 50px #0005}#call-panel video{width:100%;max-height:240px;background:#111;border-radius:10px}#call-panel #local-call{width:100px;max-height:75px;margin:8px 0}#remote-call.audio-only{height:50px}.call-actions{display:flex;flex-wrap:wrap;gap:8px}.call-actions button{min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px}#call-status{font-size:13px}@media(max-width:760px){.call-tools .icon{min-width:30px;font-size:20px}#call-panel{right:12px;bottom:12px}.chat-header:has(.call-tools:not([hidden])) #connection{display:none}}
/* Phone-first layout shared by the Android APK and small browser windows. */
@media(max-width:760px){
 html,body{overscroll-behavior:none}#app,.sidebar,#app.chat-open .conversation{height:var(--app-height,100dvh)}
 .auth{min-height:var(--app-height,100dvh)}.intro{padding:20px 24px 8px}.intro .brand{font-size:32px}.auth-panel{padding:8px 24px 24px}.auth-panel input{font-size:16px;min-height:48px}.tabs button{min-height:44px;font-size:14px}
 .side-top{padding:16px 20px 6px}.side-top .brand{font-size:32px}.list-heading{padding:10px 20px 16px}.list-heading .eyebrow{margin:6px 0}.list-heading h1{font-size:28px;margin:4px 0}.list-heading .primary{padding:12px 16px;min-height:48px}
 .find-people-link{margin:0 20px 12px;min-height:48px}.search{margin:0 20px 16px}.search input{font-size:16px;min-height:48px}.list-caption{margin:0 22px 10px}
 #chats{padding:0 8px}.chat-row,:root[data-density=compact] .chat-row{min-height:76px;padding:12px;gap:14px}.chat-row strong{font-size:16px}.chat-row p{font-size:13px;margin-top:5px}.side-footer{padding:12px 0;margin:8px 20px 0}.side-footer strong{font-size:14px}
 .icon,#composer .icon,.call-tools .icon,.message-menu{min-width:48px;min-height:48px}.message-menu{margin:-10px -8px -8px 0}.chat-header{min-height:64px;padding:6px;gap:4px;flex-shrink:0}.chat-header #connection{display:none}.chat-header .avatar{width:34px;height:34px}.chat-header #chat-details{padding:4px;overflow:hidden}.chat-header #chat-title{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-header #chat-members{font-size:11px;max-width:100%}
 .privacy-note{font-size:10px;padding:8px 10px;flex-shrink:0}.conversation #messages{padding:8px 12px 12px;overscroll-behavior:contain}.bubble{font-size:16px;line-height:1.45}.message-row{max-width:90%}.message-meta{font-size:10px;min-height:28px}
 #composer{display:grid;grid-template-columns:minmax(0,1fr) 48px 48px;grid-template-areas:'text voice send' 'tools tools tools';gap:0 4px;margin:0 8px max(8px,env(safe-area-inset-bottom));padding:4px 6px;border-radius:18px;flex-shrink:0}
 #composer textarea{grid-area:text;font-size:16px;min-height:48px;max-height:112px;padding:12px 8px;width:100%}#voice{grid-area:voice}#composer #send{grid-area:send;width:48px;height:48px;align-self:end}.composer-tools{grid-area:tools;border-top:1px solid var(--line);gap:8px;margin-top:4px}.composer-tools .icon{font-size:25px}.composer-tools #camera{margin-left:auto}
 dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:calc(var(--app-height,100dvh) - 12px);border-radius:24px 24px 0 0;padding:20px 20px max(20px,env(safe-area-inset-bottom));overflow-y:auto}.dialog-heading{position:sticky;top:-20px;background:var(--surface);z-index:1;padding-top:4px}.dialog-heading h2{font-size:22px;line-height:1.25;margin:0;flex:1}.dialog-heading .icon{flex-shrink:0}
 dialog input,dialog select{font-size:16px;min-height:48px}.settings-nav{margin-top:18px}.settings-nav button{font-size:14px;min-height:48px}.person-result strong{font-size:16px}.person-result small{font-size:12px}.person-result{min-height:76px}#people-results{max-height:42dvh}.new-group-option,.selected-person{min-height:48px}.action-list button{min-height:48px;font-size:16px}#toast{bottom:128px}#picker{max-height:35dvh;padding:8px}#picker button.emoji-item{min-width:48px;min-height:48px}
}
.secure-entry{display:block;margin:8px 20px;padding:14px;border-radius:12px;background:var(--green);color:white;text-decoration:none;text-align:center;min-height:48px}.secure-entry[hidden]{display:none}