.chat-shell{display:flex;flex-direction:column;height:calc(100dvh - 56px);overflow:hidden}.chat-shell.with-header{height:100dvh}.chat-lobby{max-width:1000px;margin:0 auto;padding:var(--space-4)}.chat-lobby-brand{display:flex;align-items:center;gap:var(--space-3);color:var(--text);padding:var(--space-2) 0 var(--space-5)}.chat-lobby-brand-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.chat-lobby-brand h1{font-size:var(--text-lg);font-weight:800}.chat-lobby-brand p{font-size:var(--text-xs);color:var(--text-muted)}.chat-rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3)}.chat-room-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.chat-room-card:hover{border-color:var(--accent);transform:translateY(-2px)}.chat-room-card .emo{font-size:28px}.chat-room-card h3{font-size:var(--text-sm);font-weight:700;margin-top:var(--space-1)}.chat-room-card .cnt{font-size:var(--text-xs);color:var(--success);margin-top:4px;font-weight:600}.chat-room-card .cnt:before{content:"● "}.chat-login-wrap{max-width:380px;margin:var(--space-10) auto;padding:0 var(--space-4)}.chat-login-back{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-4);cursor:pointer;transition:color var(--duration-fast)}.chat-login-back:hover{color:var(--accent)}.chat-login-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-md)}.chat-login-card h2{font-size:var(--text-base);font-weight:800;text-align:center;color:var(--accent);margin-bottom:var(--space-5)}.chat-field{margin-bottom:var(--space-3)}.chat-field label{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:4px;font-weight:600}.chat-field input{width:100%;padding:10px 12px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--canvas);color:var(--text);font-family:inherit;font-size:var(--text-sm);transition:border-color var(--duration-fast)}.chat-field input:focus{outline:none;border-color:var(--accent)}.chat-pass-wrap{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s var(--ease-out),opacity .25s var(--ease-out),margin .3s var(--ease-out);margin-top:0}.chat-pass-wrap.visible{max-height:120px;opacity:1;margin-top:var(--space-1)}.chat-hint{font-size:var(--text-xs);color:var(--danger);min-height:18px;margin-top:-6px;margin-bottom:var(--space-2);line-height:1.5}.chat-hint.info{color:var(--info)}.chat-btn{width:100%;padding:11px;border:none;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:var(--text-sm);cursor:pointer;font-family:inherit;margin-top:var(--space-2);transition:background var(--duration-fast)}.chat-btn:hover{background:var(--accent-hover)}.chat-btn:active{transform:scale(.98)}.chat-btn:disabled{opacity:.5;cursor:not-allowed}.chat-top{background:var(--surface-2);border-bottom:1px solid var(--border);padding:var(--space-2) var(--space-3);display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;min-height:44px}.chat-top-title{font-size:var(--text-sm);font-weight:700;flex:1;min-width:0}.chat-top-online{font-size:var(--text-xs);font-weight:600;color:var(--success);background:#788c5d1a;padding:2px 10px;border-radius:20px;white-space:nowrap}.chat-top-back{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;padding:2px 4px;line-height:1;display:flex;align-items:center}.chat-top-menu{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;padding:2px 6px;display:none;line-height:1}.chat-body{flex:1;display:flex;overflow:hidden;min-height:0}.chat-side{width:210px;background:var(--surface);border-inline-start:1px solid var(--border);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}.chat-side-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-subtle);padding:var(--space-3) var(--space-3) var(--space-1)}.chat-pw-prompt{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);background:var(--accent-light)}.chat-pw-prompt-text{font-size:10px;color:var(--accent);font-weight:600;margin-bottom:6px;line-height:1.5}.chat-pw-prompt-row{display:flex;gap:4px}.chat-pw-prompt-row input{flex:1;padding:6px 8px;font-size:11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit}.chat-pw-prompt-row input:focus{outline:none;border-color:var(--accent)}.chat-pw-set-btn{background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--radius-sm);width:28px;font-size:13px;cursor:pointer;font-weight:700;flex-shrink:0}.chat-pw-set-btn:disabled{opacity:.5;cursor:not-allowed}.chat-pw-prompt-msg{font-size:10px;margin-top:4px;min-height:14px}.chat-pw-prompt-msg.ok{color:var(--success)}.chat-pw-prompt-msg.err{color:var(--danger)}.chat-user-ban{display:none;background:none;border:none;color:var(--danger);font-size:11px;cursor:pointer;padding:0 4px;line-height:1;font-weight:700}.chat-user:hover .chat-user-ban{display:inline}.chat-unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:9px;font-weight:700;margin-right:4px;flex-shrink:0}.chat-subroom{padding:7px var(--space-3);font-size:var(--text-xs);cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text-muted);transition:background var(--duration-fast)}.chat-subroom:hover{background:var(--surface-2)}.chat-subroom.active{background:var(--accent-light);color:var(--accent);font-weight:700}.chat-user{padding:6px var(--space-3);font-size:var(--text-xs);display:flex;align-items:center;gap:6px;cursor:pointer;transition:background var(--duration-fast)}.chat-user:hover{background:var(--surface-2)}.chat-user-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}.chat-user-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-rank{font-size:9px;font-weight:700;padding:1px 6px;border-radius:6px;color:#fff;line-height:1.4}.chat-rank.admin{background:#c9960c}.chat-rank.mod{background:#6a2b8c}.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}.chat-tabs-row{display:flex;align-items:center;gap:6px;background:var(--canvas);border-bottom:1px solid var(--border);flex-shrink:0;padding:5px var(--space-2)}.chat-tabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0}.chat-tabs::-webkit-scrollbar{height:0}.chat-pm-input-wrap{flex-shrink:0}.chat-pm-input-wrap input{width:120px;padding:4px 8px;font-size:10px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);font-family:inherit}.chat-pm-input-wrap input:focus{outline:none;border-color:var(--accent)}.chat-tab{padding:5px 12px;font-size:11px;font-weight:600;border-radius:20px;white-space:nowrap;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);transition:all var(--duration-fast)}.chat-tab:hover{border-color:var(--accent);color:var(--text)}.chat-tab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.chat-msgs{flex:1;overflow-y:auto;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);background:var(--canvas)}.chat-msg{max-width:78%;font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);align-self:flex-start}.chat-msg .msg-who{font-size:10px;font-weight:700;color:var(--accent);margin-bottom:2px}.chat-msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.chat-msg.me .msg-who{color:#fffc}.chat-msg.sys{align-self:center;background:transparent;color:var(--text-subtle);font-size:11px;box-shadow:none;border:none;padding:var(--space-1) 0}.chat-composer{display:flex;align-items:center;gap:6px;padding:var(--space-2) var(--space-3);border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;position:relative}.chat-composer input{flex:1;padding:9px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--canvas);color:var(--text);font-family:inherit;font-size:var(--text-sm);transition:border-color var(--duration-fast)}.chat-composer input:focus{outline:none;border-color:var(--accent)}.chat-ico-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 6px;line-height:1}.chat-send{background:var(--accent);color:var(--on-accent);border:none;border-radius:50%;width:34px;height:34px;font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast)}.chat-send:hover{background:var(--accent-hover)}.chat-emoji-pop{position:absolute;bottom:52px;right:var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2);display:none;grid-template-columns:repeat(6,1fr);gap:2px;box-shadow:var(--shadow-pop);z-index:10}.chat-emoji-pop.open{display:grid}.chat-emoji-pop span{font-size:20px;cursor:pointer;text-align:center;padding:4px;border-radius:var(--radius-sm);transition:background var(--duration-fast)}.chat-emoji-pop span:hover{background:var(--surface-2)}@media(max-width:680px){.chat-top-menu{display:block}.chat-side{position:fixed;top:0;bottom:0;right:0;width:240px;z-index:30;transform:translate(100%);transition:transform .25s var(--ease-out);box-shadow:none}.chat-side.open{transform:translate(0);box-shadow:-4px 0 20px #00000026}.chat-side-overlay{position:fixed;inset:0;background:#0000004d;z-index:25;display:none}.chat-side-overlay.open{display:block}}