:root{font-family:Inter,"Microsoft YaHei",sans-serif;color:#ecf3fb;background:#09111d;font-size:15px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}.app{display:grid;grid-template-columns:280px 1fr;height:100dvh}.sidebar{background:#0c1725;border-right:1px solid #26364b;padding:20px;overflow:auto}.brand{font-weight:800;font-size:21px;margin-bottom:8px}.muted{color:#94a9bf}.tiny{font-size:12px}.row{display:flex;gap:10px;align-items:center}.between{justify-content:space-between}.stack{display:grid;gap:12px}.rooms{display:grid;gap:6px;margin-top:20px}.room-item{width:100%;border:0;text-align:left;background:transparent;color:#e7f0fb;border-radius:13px;padding:12px}.room-item.active,.room-item:hover{background:#193047}.room-title{font-weight:700}.pill{font-size:11px;padding:4px 8px;border-radius:20px;background:#1b3e50;color:#76d8cc}.main{min-width:0;display:flex;flex-direction:column}.topbar{padding:17px 24px;border-bottom:1px solid #26364b;display:flex;justify-content:space-between;gap:15px;align-items:center;background:#0e1b2a}.title{font-size:18px;font-weight:750}.messages{flex:1;min-height:0;overflow:auto;overflow-anchor:none;padding:25px max(20px,calc((100% - 850px)/2));display:flex;flex-direction:column;gap:16px}.empty{margin:auto;text-align:center;color:#91a7bd;max-width:350px;line-height:1.7}.msg{display:flex;gap:10px;max-width:88%}.msg.mine{align-self:flex-end;flex-direction:row-reverse}.msg.system{align-self:center;max-width:100%;color:#8fa8bd;font-size:13px}.avatar{width:35px;height:35px;border-radius:12px;background:#18334b;display:grid;place-items:center;flex:none;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble{background:#16283a;padding:11px 15px;border-radius:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.mine .bubble{background:#236568}.sender{font-size:12px;color:#9eb3c9;margin:0 0 5px 3px}.divider{text-align:center;color:#8fa8bd;font-size:12px;margin:10px 0}.composer{padding:16px 24px 20px;border-top:1px solid #26364b;display:flex;gap:10px;background:#0e1b2a}.composer textarea{flex:1;min-height:48px;max-height:140px;resize:vertical}.btn{background:#35b7aa;border:0;border-radius:11px;color:#061b20;font-weight:700;padding:11px 16px}.btn.secondary{background:#193047;color:#d8e8f5}.btn.danger{background:#713f49;color:white}.field,textarea,select{background:#101f2e;color:#e9f3fb;border:1px solid #344a61;border-radius:10px;padding:11px;width:100%;outline:none}.field:focus,textarea:focus,select:focus{border-color:#47cfc1}.panel{background:#102031;border:1px solid #2c4055;border-radius:18px;padding:20px}.modal-wrap{position:fixed;inset:0;background:#02070dbb;display:grid;place-items:center;padding:20px;z-index:10}.modal{width:min(460px,100%);max-height:90dvh;overflow:auto}.form{display:grid;gap:12px}.label{display:grid;gap:6px;color:#bad0e4;font-size:13px}.notice{color:#ffbdad;font-size:13px;min-height:20px}.auth{min-height:100dvh;display:grid;place-items:center;padding:20px}.auth .panel{width:min(430px,100%)}.header-actions{display:flex;gap:8px;flex-wrap:wrap}.activity{color:#6bd5c5;font-size:12px;padding:0 24px 8px}.mobile-only{display:none}@media(max-width:700px){.app{display:block}.sidebar{position:absolute;inset:0;z-index:2;border:0}.sidebar.hidden{display:none}.main{height:100dvh}.main.hidden-on-mobile{display:none}.mobile-only{display:inline-block}.topbar{padding:12px 14px;align-items:flex-start}.header-actions .btn{padding:8px 10px;font-size:12px}.messages{padding:15px;gap:12px}.msg{max-width:95%}.composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.title{font-size:16px}}

.session-link{border:0;background:none;color:#69d2c4;font-size:11px;padding:3px 0;text-align:left}
.profile-avatar{width:64px;height:64px;border-radius:18px;background:#18334b;display:grid;place-items:center;font-size:30px;overflow:hidden}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.crop-tools{display:grid;gap:12px;justify-items:center}
.crop-tools[hidden]{display:none}
.crop-tools canvas{width:min(300px,100%);height:auto;aspect-ratio:1;border-radius:50%;border:2px solid #55d5c8;background:#152638;touch-action:none;cursor:grab}
.crop-tools canvas:active{cursor:grabbing}
.crop-tools .label{width:100%}
.room-avatar{display:inline-grid;width:28px;height:28px;vertical-align:middle;place-items:center;border-radius:9px;background:#18334b;overflow:hidden}
.room-avatar img{width:100%;height:100%;object-fit:cover}

/* Keep navigation in the viewport; only the room list and chat history scroll. */
#app:has(.app){height:100dvh;overflow:hidden}
.app{min-height:0;overflow:hidden}
.sidebar{height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.main{height:100dvh;min-height:0;overflow:hidden}
.topbar,.activity,.composer{flex-shrink:0}
.messages{overscroll-behavior:contain}
@media(max-width:700px){
  .sidebar{position:fixed;inset:0;height:100dvh;width:100%;overflow-y:auto}
}