:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#e9edf4;background:#0b111c;font-synthesis:none;--red:#ef344b;--muted:#8f9caf;--line:#263143;--panel:#121c2b;--gold:#d8bd77;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button,a,input,textarea{outline-offset:4px}button{border:1px solid var(--line);background:#1b293c;color:#edf1f7;border-radius:12px;padding:11px 16px;transition:background .15s}button:hover{background:#2a3b53}button.primary{background:var(--red);border-color:var(--red);font-weight:650;color:white}button.primary:hover{background:#cc2338}button.ghost{background:transparent}button.danger{background:#591f2b;border-color:#843145;color:#ffbec7}input,textarea{background:#0c1421;border:1px solid #354258;color:#fff;border-radius:12px;padding:13px;width:100%}input:focus,textarea:focus{outline:2px solid #c6a254;border-color:transparent}input::placeholder,textarea::placeholder{color:#7d8b9f}label{display:block;font-size:13px;font-weight:600;margin:20px 0 8px}h1,h2,h3,p{margin-top:0}h1{font-size:42px;letter-spacing:-1.8px;line-height:1.12}h2{letter-spacing:-.7px}p{line-height:1.65}.muted{color:var(--muted)}.small{font-size:12px}.eyebrow{text-transform:uppercase;letter-spacing:2.6px;font-size:11px;font-weight:700;color:var(--gold)}.brand{display:flex;align-items:center;gap:13px}.brand img{width:48px;height:48px;object-fit:contain;background:white;border-radius:13px;padding:4px}.brand strong{display:block;font-size:20px;letter-spacing:3px}.brand span{font-size:11px;letter-spacing:1px;color:var(--muted)}.auth{min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr;max-width:1600px;margin:auto}.story{padding:60px 9%;background:radial-gradient(ellipse at 10% 95%,#55202a 0,transparent 60%),linear-gradient(150deg,#17263b,#0e1726);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line)}.story-copy{padding:70px 0}.story h1{font-size:clamp(40px,4vw,64px);max-width:590px}.story h1 em{color:#f36a79;font-style:normal}.story-copy>p{max-width:400px;color:#b2bed1;font-size:17px}.pills{display:flex;gap:10px;flex-wrap:wrap}.pills span{border:1px solid #465166;border-radius:30px;padding:9px 13px;font-size:12px}.story footer{color:#98a8bd;font-size:12px}.auth-side{display:flex;align-items:center;justify-content:center;padding:40px}.auth-card{width:100%;max-width:390px}.auth-card h2{font-size:32px;margin-bottom:8px}.auth-card .primary{width:100%;margin-top:25px}.auth-card .note{margin-top:26px;border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:var(--muted)}.error{color:#ff9eab;min-height:20px;font-size:13px;margin-top:14px}.app{height:100dvh;display:grid;grid-template-columns:76px 310px 1fr}.rail{background:#0a101a;border-right:1px solid var(--line);padding:24px 12px;display:flex;flex-direction:column;gap:17px;align-items:center}.rail .brand img{width:43px;height:43px}.rail button{padding:12px;min-width:44px}.rail .selected{background:#652536;color:#ffb4bf;border-color:#893447}.rail .bottom{margin-top:auto}.sidebar{background:#101a28;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.side-head{padding:30px 22px 18px}.side-head h2{font-size:23px;margin:0}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.workspace-label{font-size:10px;text-transform:uppercase;letter-spacing:1.8px;color:#b7a674;margin-bottom:12px}.side-head input{margin-top:22px;font-size:13px}.side-sub{padding:0 22px 14px;font-size:11px;color:var(--muted)}.room-list{overflow-y:auto;flex:1;padding:0 12px}.room-button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:14px 10px;border:1px solid transparent;background:transparent;margin-bottom:5px;border-radius:12px}.room-button.active{background:#242a3b;border-color:#5c3445}.room-button strong{display:block;font-size:14px;margin-bottom:6px}.room-button .preview{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;color:var(--muted);max-width:190px}.avatar{display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;border-radius:14px;background:#23364f;color:#c8d8f3;font-size:14px;font-weight:650}.avatar.group{background:#542737;color:#ffc0c8}.me{padding:18px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center}.me strong{font-size:13px;display:block}.me small{color:var(--muted);font-size:11px}.conversation{display:flex;flex-direction:column;min-width:0;background:radial-gradient(ellipse at 70% 100%,#1b2331 0,transparent 60%),#0e1623}.chat-head{padding:23px 30px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#121c2be8}.chat-head h2{font-size:19px;margin:0 0 5px}.chat-head small{color:var(--muted)}.actions{display:flex;gap:8px}.messages{flex:1;min-height:0;overflow-y:auto;padding:26px 32px;display:flex;flex-direction:column;gap:15px}.welcome{margin:auto;text-align:center;max-width:440px;padding:25px}.welcome .emblem{width:84px;height:84px;background:#222b3b;border:1px solid #3c475c;border-radius:26px;display:grid;place-items:center;margin:0 auto 24px;font-size:32px;color:var(--gold)}.welcome h2{font-size:25px}.welcome p{font-size:14px;color:var(--muted)}.bubble{align-self:flex-start;max-width:78%;background:#1b2a3e;border:1px solid #2c3b50;padding:12px 16px;border-radius:16px 16px 16px 4px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55}.bubble.mine{align-self:flex-end;background:#602d3e;border-color:#804151;border-radius:16px 16px 4px 16px}.bubble .sender{display:block;font-size:11px;color:#c7b681;margin-bottom:5px}.bubble time{display:block;text-align:right;font-size:10px;color:#b2b8c8;margin-top:6px}.composer{padding:18px 28px 12px;border-top:1px solid var(--line);background:#101a28}.composer form{display:flex;align-items:flex-end;gap:12px}.composer textarea{resize:none;max-height:130px;min-height:50px;height:50px}.composer .small{margin:9px 0 0;color:var(--muted);text-align:center;font-size:10px}.call-banner{padding:12px 30px;background:#193a33;display:flex;justify-content:space-between;align-items:center;font-size:13px}.call-banner button{background:#235648;border-color:#38735e}.call-panel{padding:18px 25px;background:#09111c;border-bottom:1px solid var(--line);max-height:60dvh;overflow:auto}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}.tile{position:relative;background:#1d2d43;aspect-ratio:16/10;border-radius:13px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:100px}.tile video{width:100%;height:100%;object-fit:cover}.tile span{position:absolute;left:9px;bottom:8px;background:#0b1324cf;padding:5px 9px;border-radius:7px;font-size:11px}.call-controls{display:flex;justify-content:center;gap:8px}.connection{font-size:11px;color:var(--gold)}dialog{width:min(540px,94vw);max-height:88dvh;background:#152033;color:#e8edf5;border:1px solid #40506b;border-radius:20px;padding:28px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#030810b0;backdrop-filter:blur(6px)}dialog h2{margin:0}dialog form .primary{margin-top:22px;width:100%}.user-list{margin-top:20px;display:flex;flex-direction:column;gap:8px}.user-item{border:1px solid var(--line);padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.user-item strong{display:block;font-size:13px}.user-item small{font-size:11px;color:var(--muted)}.user-item button{padding:7px 10px;font-size:11px}.check{display:flex;gap:10px;align-items:center;font-weight:400;background:#1b293e;padding:12px;border-radius:10px;margin:8px 0}.check input{width:18px;height:18px}#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:#f0e2b9;color:#282018;padding:13px 22px;border-radius:12px;box-shadow:0 10px 35px #0007;z-index:20;max-width:90vw;font-size:13px}.loading{padding:50px;color:var(--muted)}.mobile-back{display:none}.offline{color:#ffa5b2}.older{align-self:center;font-size:11px;padding:7px 12px}.counter{font-size:12px;color:var(--gold)}[hidden]{display:none!important}
:root{--red:#cd2440}
.brand .brand-mark{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:14px;background:#cd2440;color:white;font-size:28px;font-weight:800;letter-spacing:-2px;border:1px solid #f77b8e}.rail .brand .brand-mark{width:43px;height:43px;font-size:26px}@media(max-width:650px){.rail .brand .brand-mark{width:36px;height:36px;font-size:23px}}
.attach-button{font-size:24px;height:50px;padding:6px 13px}.with-attachment{min-width:180px;white-space:normal}.attachment-image,.attachment-video{display:block;width:100%;max-width:360px;max-height:280px;object-fit:contain;background:#0b111c;border-radius:10px;margin:6px 0 10px}.attachment-image{cursor:zoom-in}.download-link{display:block;color:#fff0bf;text-decoration:underline;overflow-wrap:anywhere;margin:6px 0}.attachment-size,.media-note{display:block;color:#ced4df;font-size:11px}.photo-full{width:100%;max-height:65dvh;object-fit:contain}.upload-list{max-height:30dvh;overflow:auto;margin:20px 0}.upload-item{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:15px;justify-content:space-between;font-size:13px}.upload-item strong{overflow-wrap:anywhere;min-width:0}.upload-item span{white-space:nowrap;color:var(--muted)}#upload-progress{width:100%;height:12px;accent-color:var(--red)}#upload-status{font-size:13px;overflow-wrap:anywhere}.composer textarea{min-width:0}@media(max-width:650px){.composer form{gap:6px}.composer button{padding-left:10px;padding-right:10px}.with-attachment{max-width:95%}}
.composer button{white-space:nowrap;flex-shrink:0}.sidebar,.conversation{min-height:0}.chat-head,.composer{flex-shrink:0}.call-panel{display:flex;flex-direction:column;flex:0 1 auto;max-height:52dvh;min-height:200px;overflow:hidden}.call-panel>.row,.call-panel>.connection,.call-controls{flex-shrink:0}.call-panel>.connection{margin:8px 0 0}.video-grid{overflow:auto;min-height:0;flex:1;margin:10px 0;grid-auto-rows:130px}.tile{height:130px;max-height:130px;aspect-ratio:auto}.call-controls{padding-top:4px}
@media(min-width:1450px){.app{grid-template-columns:84px 350px 1fr}.messages{padding-left:7%;padding-right:7%}}
@media(max-width:900px){.app{grid-template-columns:64px 260px 1fr}.chat-head{padding:18px}.chat-head .actions button{font-size:12px;padding:9px}.messages{padding:18px}.composer{padding:14px}.rail{padding:20px 8px}.side-head{padding:25px 18px}.room-button .preview{max-width:150px}.auth{grid-template-columns:1fr 1fr}.story{padding:40px 30px}.story h1{font-size:40px}.auth-side{padding:30px}}
@media(max-width:650px){.auth{display:block}.story{padding:24px;border-right:0;border-bottom:1px solid var(--line)}.story-copy{padding:28px 0 0}.story h1{font-size:32px;max-width:350px;margin-bottom:12px}.story-copy>p,.story footer,.pills{display:none}.auth-side{padding:28px 24px}.auth-card{max-width:440px}.auth-card h2{font-size:25px}.app{grid-template-columns:58px 1fr}.conversation{display:none}.app.chat-open{display:block}.app.chat-open .rail,.app.chat-open .sidebar{display:none}.app.chat-open .conversation{display:flex;height:100dvh}.mobile-back{display:block;padding:6px 10px}.chat-head{gap:8px;padding:14px 12px}.chat-head h2{font-size:16px}.chat-head small{font-size:10px}.chat-head .avatar{display:none}.chat-head .actions{gap:5px}.chat-head .actions button{font-size:11px;padding:9px}.chat-head .row{gap:8px}.bubble{max-width:90%}.messages{padding:18px 13px}.call-panel{padding:14px}.call-banner{padding:10px 12px}.call-controls button{font-size:11px;padding:10px}.rail .brand img{width:36px;height:36px}.rail button{min-width:38px;padding:9px}.video-grid{grid-template-columns:repeat(2,1fr)}.composer{padding-bottom:max(12px,env(safe-area-inset-bottom))}.room-button .preview{max-width:220px}}
/* CANV / digital-rain visual system. Layout and application behavior preserved. */
:root{font-family:"Cascadia Code",Consolas,"Courier New",monospace;background:#020604;color:#e0f7e6;--red:#62f795;--muted:#91b49d;--line:#1b3c2a;--panel:#08140e;--gold:#75f6a1}
::selection{background:#52ec87;color:#021007}
body{background:#020604}
button{background:#0b1b12;border-color:#28543a;border-radius:6px;color:#caf3d7}
button:hover{background:#163c24;border-color:#61ed91}
button.primary{background:#68f49a;border-color:#68f49a;color:#041109;box-shadow:0 0 22px #26e57418}
button.primary:hover{background:#a0ffbc;color:#031008}
button.danger{background:#261517;border-color:#86434a;color:#ffb7bd}
input,textarea{background:#030b06;border-color:#2b533b;border-radius:5px;color:#e7ffef}
input::placeholder,textarea::placeholder{color:#8cae96}
input:focus,textarea:focus{outline:2px solid #68f49a;box-shadow:0 0 18px #3dff7a15}
:focus-visible{outline:2px solid #9dffbf;outline-offset:4px}
.brand .brand-mark{border-radius:5px;background:#0a2213;border:1px solid #65ff97;color:#8dffb3;box-shadow:0 0 23px #36f77822;text-shadow:0 0 14px #58ff8d66;font-family:Consolas,monospace;letter-spacing:-2px}
.brand strong{font-size:26px;letter-spacing:7px;color:#dbffe5}
.brand span{color:#98bba4}
.auth{max-width:none;grid-template-columns:1.12fr 1fr}
.story{position:relative;isolation:isolate;overflow:hidden;padding:48px 9% 75px;background:#020704;border-right:1px solid #285139}
.code-rain{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;opacity:.65}
.story::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#02070480,#02070450),linear-gradient(0deg,#020704 0%,#02070455 35%,#020704a8 80%,#020704cc 100%);pointer-events:none}
.story::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#0003 4px);pointer-events:none}
.story-copy{padding:65px 0}
.story .eyebrow{color:#b3ffcb;font-size:11px;letter-spacing:3px}
.story h1{font-size:clamp(40px,4.1vw,66px);line-height:1.12;letter-spacing:-2.8px;color:#ecfff2;text-shadow:0 2px 10px #000}
.story h1 em{color:#76ffa3;text-shadow:0 0 26px #53ff8a44}
.story-copy>p:not(.eyebrow){font-family:Segoe UI,Arial,sans-serif;color:#bddec7;font-size:17px}
.pills span{background:#041208d9;border:1px solid #376246;border-radius:3px;font-size:11px;color:#c0edce}
.story footer{font-size:10px;color:#a5c9b0;letter-spacing:2px}
.motion-toggle{position:absolute;bottom:23px;left:9%;font-size:10px;padding:7px 10px;background:#06160ccc;color:#b3dfc1}
.auth-side{background:radial-gradient(ellipse at 80% 5%,#15372055,transparent 55%),linear-gradient(#061009,#020604);position:relative}
.auth-side::before{content:"CANV / ACCESS TERMINAL";position:absolute;top:30px;left:40px;color:#82a58e;font-size:10px;letter-spacing:2px}
.auth-card{max-width:440px;padding:32px;border:1px solid #284d35;background:#061009ed;box-shadow:0 18px 90px #0008;border-radius:8px}
.auth-card .eyebrow{font-size:10px;letter-spacing:2px}
.auth-card h2{font-size:29px;letter-spacing:-1.5px}
.auth-card>p.muted{font-family:Segoe UI,Arial,sans-serif;font-size:14px}
.auth-card label{color:#bfe8cb;font-size:12px}
.auth-card .primary{letter-spacing:.3px;font-size:13px}
.auth-card .note{font-family:Segoe UI,Arial,sans-serif;line-height:1.6;color:#a2c3ac}
.rail{background:#030906;border-color:#1c3827}
.rail .selected{background:#143821;color:#90ffb5;border-color:#5add85;box-shadow:inset 3px 0 #76ffa3}
.sidebar{background:#07110b;border-color:#1c3827}
.workspace-label{color:#83d59e;font-size:10px;letter-spacing:1.6px}
.side-head h2{color:#e2f9e9;font-size:22px}
.side-sub{color:#91c9a3}
.room-button{border-radius:5px}
.room-button.active{background:#112b1a;border-color:#315b3f;box-shadow:inset 3px 0 #5ae68b}
.room-button strong{font-size:13px}
.room-button .preview{font-family:Segoe UI,Arial,sans-serif;color:#9cbaa7}
.avatar,.avatar.group{background:#0c2818;border:1px solid #2e6542;color:#95ffb8;border-radius:6px}
.me{background:#050d08}
.me strong{color:#d3f7de}.me small{color:#98bba3}
.conversation{background-color:#030a06;background-image:linear-gradient(#36c86a07 1px,transparent 1px),linear-gradient(90deg,#36c86a07 1px,transparent 1px),radial-gradient(ellipse at 75% 60%,#0b2714,transparent 65%);background-size:36px 36px,36px 36px,100% 100%}
.chat-head{background:#07110bf5;border-bottom-color:#214330}
.chat-head h2{font-size:18px;color:#dbffe6}
.chat-head small{color:#9fbdab}
.welcome .emblem{background:#0b2113;border:1px solid #49895e;color:#8bffae;border-radius:8px;box-shadow:0 0 45px #2ed46715;font-size:35px}
.welcome .eyebrow{color:#8de6a9;font-size:10px}
.welcome h2{font-size:23px;color:#d6fce1}
.welcome p:not(.eyebrow){font-family:Segoe UI,Arial,sans-serif;color:#99b7a3;font-size:14px}
.bubble{background:#0c1e13;border-color:#28573a;color:#e0f5e7;border-radius:9px 9px 9px 2px;font-family:Segoe UI,Arial,sans-serif}
.bubble.mine{background:#163d24;border-color:#3b7950;border-radius:9px 9px 2px 9px}
.bubble .sender{color:#a0f9bb;font-family:Consolas,monospace}
.bubble time{color:#accbb6}
.composer{background:#07120c;border-color:#285039}
.composer .small{color:#93b09d}
.composer textarea{font-family:Segoe UI,Arial,sans-serif}
.call-banner{background:#10341d;color:#ccfadd;border-bottom:1px solid #3d7751}
.call-banner button{background:#194f2c;color:#dbffe7;border-color:#55a16e}
.call-panel{background:#020a05;border-color:#28513a}.tile{background:#0e2919;border:1px solid #2c5b3e}.tile span{background:#020d07e8;color:#c9f3d7}
.connection,.counter{color:#9cf4b7}
dialog{background:#07130b;border:1px solid #4a8c60;color:#e1ffe9;border-radius:8px;box-shadow:0 0 90px #25cb4c12,0 30px 100px #000b}
dialog::backdrop{background:#000b}
dialog .eyebrow{color:#8dffae}
.check{background:#0c2515;border:1px solid #214c2f}
input[type=checkbox]{accent-color:#6bf89b}
.user-item{border-color:#2b4a35;border-radius:5px}.user-item small{color:#a2c1ad}
#toast{background:#b7f7ca;color:#05200e;border:1px solid #68ce8a;border-radius:5px}
.download-link{color:#a4ffbf}.attachment-size,.media-note{color:#b4d1bf}.attachment-image,.attachment-video{background:#020805}
.error,.offline{color:#ffafb7}#upload-progress{accent-color:#6bf89b}
*{scrollbar-color:#2d6541 #040c07;scrollbar-width:thin}
@media(max-width:900px){.story{padding:35px 30px 70px}.motion-toggle{left:30px}.auth-card{padding:25px}.auth-side{padding:30px 22px}.auth-side::before{left:22px;font-size:9px}.story h1{font-size:42px}}
@media(max-width:650px){.auth{display:block}.story{min-height:310px;padding:25px 24px 57px}.story-copy{padding:26px 0 0}.story h1{font-size:35px;letter-spacing:-1.5px;max-width:none}.story .brand strong{font-size:23px}.story .brand span{font-size:9px}.story .brand .brand-mark{width:42px;height:42px}.motion-toggle{left:24px;bottom:16px}.auth-side{padding:25px 18px 35px}.auth-side::before{display:none}.auth-card{padding:24px 20px;max-width:440px}.auth-card h2{font-size:25px}.auth-card label{margin-top:16px}.chat-head h2{font-size:15px}.chat-head .actions button{font-size:10px}.welcome h2{font-size:21px}.composer .small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.code-rain{opacity:.3}}

[hidden]{display:none!important}
.message-delete{display:block;margin-top:8px;padding:5px 9px;font-size:11px}.user-item button{margin:3px}.user-item>div:last-child{display:flex;flex-wrap:wrap;gap:4px}