.auth-shell,.connect-shell{height:100%;display:grid;grid-template-columns:minmax(320px,42%) 1fr;background:linear-gradient(135deg,#0b141a 0%,#0b141a 55%,#101d22 100%)}
.brand-side{padding:56px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line);background:radial-gradient(circle at 20% 10%,#00a88415,transparent 36%)}
.brand-lockup{display:flex;align-items:center;gap:12px}.brand-copy h1{margin:0;font-size:22px}.brand-copy p{margin:3px 0 0;color:var(--muted);font-size:13px}.hero-copy{max-width:520px}.hero-copy h2{font-size:clamp(34px,4vw,54px);line-height:1.06;margin:12px 0 18px;letter-spacing:-.035em}.hero-copy p{font-size:17px;line-height:1.6;color:var(--soft)}.secure-note{color:var(--muted);font-size:12px}
.auth-main,.connect-main{display:grid;place-items:center;padding:40px}.auth-card,.connect-card{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.auth-card h2,.connect-card h2{margin:7px 0 8px;font-size:26px}.auth-card p,.connect-card p{color:var(--muted);line-height:1.5}.form-stack{display:grid;gap:12px;margin-top:22px}
.connect-grid{display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:center;width:min(760px,100%)}.steps{display:grid;gap:15px}.step{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start;color:var(--soft)}.step b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#00a8841d;color:#7ce4c8}.qr-frame{background:#fff;border-radius:16px;padding:14px;box-shadow:0 12px 30px #0005}.qr-frame img{width:100%;display:block}
.workspace{height:100%;display:grid;grid-template-columns:var(--rail) var(--list) minmax(0,1fr);background:var(--bg)}.rail{background:#202c33;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:10px}.rail .spacer{flex:1}.chatlist{background:var(--panel);border-right:1px solid var(--line);min-width:0;display:grid;grid-template-rows:auto auto auto 1fr}.list-head{height:64px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}.list-head h1{font-size:20px;margin:0}.search-wrap{padding:6px 12px 10px}.search-box{background:var(--panel2);border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 12px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);padding:10px 0}.filters{display:flex;gap:7px;padding:0 12px 10px;overflow-x:auto}.filter{border:1px solid var(--line);background:transparent;color:var(--soft);border-radius:18px;padding:7px 11px;white-space:nowrap;cursor:pointer;font-size:12px}.filter.active{background:#00a8841a;border-color:#00a88455;color:#7ce4c8}.conversation-list{overflow:auto}
.chatview{min-width:0;display:grid;grid-template-rows:64px 1fr 66px;background:#0b141a}.empty-chat{grid-row:1/-1;display:grid;place-items:center;text-align:center;color:var(--muted);background:radial-gradient(circle at center,#142128 0%,#0b141a 52%)}.empty-chat h2{color:var(--text);margin:10px 0 6px}.chat-head{background:var(--panel2);display:flex;align-items:center;padding:0 16px;gap:11px}.chat-head-main{min-width:0;flex:1}.chat-head-main strong,.chat-head-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-head-main span{font-size:12px;color:var(--muted);margin-top:3px}.messages{overflow:auto;padding:22px max(5%,24px);background-color:#0b141a;background-image:radial-gradient(#16232a 1px,transparent 1px);background-size:20px 20px}.composer{background:var(--panel2);padding:10px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center}.composer input{border:0;outline:0;background:#2a3942;color:var(--text);border-radius:9px;padding:12px 14px}.mobile-back{display:none}
@media(max-width:900px){:root{--list:340px}.rail{display:none}.workspace{grid-template-columns:var(--list) 1fr}.auth-shell,.connect-shell{grid-template-columns:1fr}.brand-side{display:none}.connect-grid{grid-template-columns:1fr;max-width:440px}.connect-card{width:min(500px,100%)}}
@media(max-width:680px){body{overflow:hidden}.workspace{display:block;position:relative}.chatlist,.chatview{position:absolute;inset:0}.chatview{transform:translateX(100%);transition:transform .18s ease}.workspace.chat-open .chatview{transform:translateX(0)}.workspace.chat-open .chatlist{visibility:hidden}.mobile-back{display:grid}.messages{padding:14px 12px}.auth-main,.connect-main{padding:20px}.auth-card,.connect-card{border-radius:15px;padding:22px}.connect-grid{gap:20px}.qr-frame{width:min(280px,78vw);margin:auto}}