:root{color-scheme:dark;--base:#0b1715;--panel:#10201e;--deep:#0e1c19;--line:#2c4039;--text:#e7eee8;--dim:#a2b4a9;--mint:#99e6bc;--green:#244d3d;--red:#f4b5a6;font:16px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--base);color:var(--text)}[hidden]{display:none!important}button,input{font:inherit}button{border:1px solid var(--line);border-radius:9px;padding:.55rem .82rem;background:var(--panel);color:var(--text);cursor:pointer}button:hover{background:#20342d}button:disabled{opacity:.6;cursor:wait}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.primary{background:var(--mint);color:#10271b;border-color:transparent;font-weight:650}.primary:hover{background:#c2f1d6}.danger{color:var(--red)}input:not([type=file]){width:100%;padding:.72rem .78rem;border:1px solid var(--line);border-radius:9px;background:var(--base);color:var(--text);min-width:0}label{display:grid;gap:.36rem;margin:.8rem 0}p{margin:.35rem 0 1rem}.dim,small{color:var(--dim)}small{display:block;font-size:.78rem}h1,h2{line-height:1.08;margin:.35rem 0 .8rem}h2{font-size:1.4rem}.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--mint)}
.gate{min-height:100dvh;display:grid;grid-template-columns:minmax(230px,380px) minmax(260px,410px);gap:clamp(2rem,8vw,8rem);align-items:center;justify-content:center;padding:clamp(1.25rem,5vw,4rem);background:radial-gradient(ellipse at 18% 25%,#203e32 0,transparent 48%)}.intro img{display:block;margin:1.5rem 0 1rem}.intro h1{font-size:clamp(3.4rem,8vw,6.8rem);letter-spacing:-.085em;font-weight:750}.intro h1 span{color:var(--mint)}.intro p{font-size:clamp(1.05rem,2.4vw,1.8rem);color:#bfd3c4}.sign{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(1.05rem,4vw,2rem);box-shadow:0 18px 60px #0004}.sign form>p{color:var(--dim)}.sign form>button{width:100%;margin-top:.5rem}.switch{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.5rem}.switch button{font-size:.82rem;padding:.45rem .58rem}.switch .selected{background:var(--green);border-color:#47775f;color:var(--mint)}#gate-note{margin:.65rem 0 0;color:var(--mint);min-height:1.4rem}.error{color:var(--red)!important}
.desk{height:100dvh;display:grid;grid-template-columns:minmax(240px,300px) 1fr;overflow:hidden}.sidebar,.conversation{display:flex;flex-direction:column;min-height:0;min-width:0}.sidebar{background:var(--panel);border-right:1px solid var(--line)}.sidebar header,.conversation header{display:flex;align-items:center;gap:.8rem;min-height:68px;border-bottom:1px solid var(--line);padding:calc(.7rem + env(safe-area-inset-top)) 1rem .7rem}.sidebar header div,.conversation-title{flex:1;overflow:hidden;text-overflow:ellipsis}.sidebar header b{font-size:1.1rem}.side-label{padding:.8rem .95rem .1rem;margin:.25rem 0}nav{overflow:auto;flex:1;padding:.35rem .6rem}.room-row{display:block;width:100%;text-align:left;margin-bottom:.35rem;border-color:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-row.selected{background:var(--green);color:#e5faed;border-color:#497961}.sidebar footer{padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));display:flex;gap:.4rem}.conversation{background:radial-gradient(ellipse at bottom right,#142921,transparent 60%),var(--deep)}.conversation header{background:var(--panel)}#back{display:none;font-size:1.5rem;padding:.1rem .5rem}#timeline{flex:1;overflow:auto;display:flex;flex-direction:column;padding:1.2rem clamp(.75rem,4vw,3rem);gap:.65rem}.empty{margin:auto;text-align:center;color:var(--dim);max-width:23rem}.bubble{align-self:flex-start;border:1px solid var(--line);background:#1a3028;border-radius:13px 13px 13px 3px;max-width:min(84%,540px);padding:.55rem .8rem;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.mine{align-self:flex-end;background:#254d3b;border-color:#365e4c;border-radius:13px 13px 3px 13px}.bubble small{font-size:.7rem;margin-bottom:.15rem;color:#b9d1c4}.bubble a{color:#c7f5dc}.bubble img{display:block;max-width:100%;max-height:300px;object-fit:contain;border-radius:7px;margin-bottom:.4rem}.bubble button{display:block;margin-top:.4rem}#chat-note{margin:0;padding:0 1rem;color:var(--mint)}#composer{display:flex;gap:.5rem;padding:.65rem .85rem calc(.65rem + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}#composer input:not([type=file]){flex:1}.clip{display:grid;place-items:center;position:relative;overflow:hidden;width:2.7rem;flex-shrink:0;margin:0;border:1px solid var(--line);border-radius:9px;font-size:1.3rem;cursor:pointer}.clip input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.clip:focus-within{outline:2px solid var(--mint)}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:1.2rem;width:min(32rem,calc(100% - 1.5rem));max-height:calc(100dvh - 1.5rem);overflow:auto}dialog::backdrop{background:#030a07c9}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}.application{padding:.75rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.application button{margin:.4rem .4rem 0 0}.application code{display:block;color:var(--mint);user-select:all}#participants{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.45rem;margin:.6rem 0}#participants video{width:100%;border-radius:9px;background:var(--base)}
@media(max-width:650px){.gate{grid-template-columns:minmax(0,410px);gap:1.5rem;align-content:center}.intro img{display:none}.intro h1{font-size:3.5rem}.intro p{margin-bottom:0}.desk{display:block}.sidebar,.conversation{height:100%;border-right:none}.desk:not(.chat-open) .conversation,.desk.chat-open .sidebar{display:none}.conversation header{padding-inline:.55rem;gap:.45rem}.conversation header button:not(#back){font-size:.8rem;padding:.4rem .5rem}#back{display:block}}

:root {
  --surface-hover:#20342d;
  --accent:#99e6bc;
  --chat-glow:#142921;
  --intro-glow:#203e32;
  --bubble:#1a3028;
  --bubble-mine:#254d3b;
  --primary-hover:#c2f1d6;
}
:root[data-theme="light"] {
  color-scheme:light;
  --base:#edf5ef;
  --panel:#f8fcf9;
  --deep:#edf4ef;
  --line:#d3e2d8;
  --text:#162e24;
  --dim:#4c685b;
  --accent:#176743;
  --mint:#9ce4ba;
  --green:#d8efdf;
  --red:#a52e30;
  --surface-hover:#e7f2ea;
  --chat-glow:#d9ebe0;
  --intro-glow:#cce9d7;
  --bubble:#fcfffc;
  --bubble-mine:#d9efdf;
  --primary-hover:#b7efcc;
}
button:hover{background:var(--surface-hover)}
.primary:hover{background:var(--primary-hover)}
.eyebrow,.intro h1 span,#gate-note,#chat-note,.application code,.switch .selected{color:var(--accent)}
.intro p,.bubble small{color:var(--dim)}
.gate{background:radial-gradient(ellipse at 18% 25%,var(--intro-glow),transparent 58%)}
.conversation{background:radial-gradient(ellipse at bottom right,var(--chat-glow),transparent 60%),var(--deep)}
.bubble{background:var(--bubble)}
.bubble.mine{background:var(--bubble-mine);border-color:var(--line)}
.bubble a{color:var(--accent)}
.desk{grid-template-columns:minmax(300px,350px) minmax(0,1fr)}
.desk:not(.tab-chats){grid-template-columns:minmax(0,1fr)}
.desk:not(.tab-chats) .conversation{display:none}
.shell-head b{font-size:1.26rem}
.shell-head small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#new-room{width:42px;height:42px;padding:0;font-size:1.45rem;color:var(--accent);background:var(--green)}
.side-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain}
.section-panel{max-width:42rem;margin:auto;padding:.7rem .75rem 1rem}
.section-panel.personal{padding:1rem}
.search{margin:0 0 .55rem}
#room-list{padding:0}
.list-row{
  display:flex;align-items:center;gap:.65rem;width:100%;min-height:64px;
  text-align:left;margin:0 0 .2rem;padding:.45rem .55rem;border-color:transparent
}
.list-row.selected{background:var(--green);border-color:var(--line)}
.row-copy{flex:1;min-width:0}
.row-copy strong,.row-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-time{align-self:flex-start;padding-top:.28rem}
.avatar{
  flex:none;display:grid;place-items:center;position:relative;overflow:hidden;
  width:44px;height:44px;border-radius:50%;background:var(--green);color:var(--accent);font-weight:700
}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.list-empty,#contacts-note{text-align:center;margin:1.8rem auto 1rem;color:var(--dim)}
.settings-card{background:var(--deep);border:1px solid var(--line);border-radius:16px;padding:1rem;margin-bottom:.7rem}
.settings-card h2{font-size:1.15rem}
.settings-card select{width:100%;font:inherit;color:var(--text);background:var(--base);border:1px solid var(--line);border-radius:9px;padding:.64rem}
.settings-card [role="status"]{margin:.7rem 0 0;color:var(--accent)}
.account-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.account-actions [role="status"]{flex-basis:100%}
.profile-card{text-align:center}
.profile-avatar{width:82px;height:82px;font-size:1.7rem;margin:.25rem auto .8rem}
.avatar-picker{
  display:inline-grid;place-items:center;position:relative;overflow:hidden;min-height:44px;
  padding:.4rem .8rem;margin:0 0 .45rem;background:var(--green);color:var(--accent);
  border:1px solid var(--line);border-radius:9px;cursor:pointer
}
.avatar-picker:focus-within,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avatar-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tabbar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;gap:2px;
  padding:.3rem .35rem calc(.3rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--panel);overflow:visible
}
.tabbar button{
  display:grid;justify-items:center;gap:.2rem;min-height:54px;padding:.32rem .1rem;
  border:0;border-radius:10px;font-size:clamp(.66rem,2.8vw,.76rem);color:var(--dim);line-height:1.2
}
.tabbar button[aria-current="page"]{background:var(--green);color:var(--accent);font-weight:700}
.tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
[id$="-note"]:empty{margin:0}
#open-record{display:grid;place-items:center;width:2.75rem;flex:none;padding:.4rem;color:var(--accent)}
#open-record svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.record-modes{display:flex;gap:.4rem;margin:.9rem 0}
.record-modes button[aria-pressed="true"]{background:var(--green);color:var(--accent);font-weight:650}
#record-note{min-height:1.5rem;margin:.7rem 0;color:var(--dim)}
.bubble audio,#record-preview audio{display:block;width:min(100%,290px);margin:.3rem 0}
.bubble:has(audio){width:min(84%,19rem)}
.bubble video,.square-video{display:block;max-width:100%;max-height:22rem;background:var(--base);border-radius:12px;margin:.3rem 0}
.square-video,.bubble .square-video{width:min(100%,240px);aspect-ratio:1;object-fit:cover}
#record-camera.front-camera{transform:scaleX(-1)}
#open-record{touch-action:none;user-select:none;-webkit-touch-callout:none}
.contact-entry{display:flex;align-items:center;gap:.35rem}
.contact-entry>.list-row{flex:1;min-width:0}
.contact-entry>.contact-result{opacity:1;cursor:default}
.contact-entry>button:last-child{flex:none}
.message-meta{display:flex;align-items:center;justify-content:space-between;gap:.35rem}
.message-more{font-size:1rem;line-height:1;padding:.15rem .35rem;background:transparent;border:0;color:var(--dim)}
.message-label{margin-bottom:.25rem}
.bubble{min-width:0;touch-action:pan-y}
.bubble.media-bubble{width:fit-content;max-width:min(84%,25rem)}
.bubble:has(audio){width:min(84%,19rem)}
.bubble.square-bubble{width:min(84%,16rem)}
.bubble .square-frame{width:100%;aspect-ratio:1;overflow:hidden;border-radius:10px;background:var(--base)}
.bubble .square-frame video{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;margin:0;border-radius:0}
.message-quote{display:block;max-width:min(100%,22rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;border-left:3px solid var(--accent);padding:.3rem .5rem;margin:.2rem 0 .5rem}
#reply-bar{display:flex;justify-content:space-between;align-items:center;gap:.4rem;padding:.4rem .85rem;background:var(--panel);border-top:1px solid var(--line)}
#reply-bar div{min-width:0;border-left:3px solid var(--accent);padding-left:.5rem}
#reply-bar small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#message-actions{display:grid;gap:.35rem;margin:.8rem 0}
#message-actions button{text-align:left}
@media(min-width:651px){
  .desk:not(.tab-chats) .tabbar{width:min(42rem,100%);margin-inline:auto}
}