html{background:#eef1ee}body{min-width:320px;min-height:100svh}:root{--canvas:#eef1ee;--surface:#fff;--surface-soft:#f7f9f7;--ink:#18211c;--muted:#68736c;--faint:#94a098;--line:#dce3de;--line-strong:#cbd5ce;--accent:#1f7a5c;--accent-deep:#175f49;--accent-soft:#e6f2ec;--accent-ink:#fff;--danger:#b3443d;--danger-soft:#fbebe9;--shadow-sm:0 1px 2px #18211c0f;--shadow-md:0 16px 45px #18211c17;color:var(--ink);background:var(--canvas);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Segoe UI,Microsoft YaHei,PingFang SC,Hiragino Sans GB,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{background:linear-gradient(#ffffff6b, #ffffff6b), radial-gradient(circle at 14% 8%, #1f7a5c14, transparent 30%), var(--canvas);min-height:100svh}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:2px;outline:2px solid #1f7a5c8c}button:disabled,textarea:disabled{cursor:not-allowed;opacity:.58}.setup-shell{place-items:center;min-height:100svh;padding:28px;display:grid}.setup-panel{border:1px solid var(--line);width:min(100%,430px);box-shadow:var(--shadow-md);background:#fffffff0;border-radius:14px;padding:32px}.setup-brand{border-bottom:1px solid var(--line);align-items:center;gap:14px;padding-bottom:24px;display:flex}.brand-mark,.room-mark{color:var(--accent);background:var(--accent-soft);flex:none;place-items:center;display:grid}.brand-mark{border-radius:12px;width:48px;height:48px}.room-mark{border-radius:9px;width:36px;height:36px}.setup-brand h1{letter-spacing:0;margin:0 0 4px;font-size:22px;line-height:1.2}.setup-brand p,.setup-error{color:var(--muted);margin:0;font-size:14px}.setup-form{gap:18px;padding-top:24px;display:grid}.setup-form label{gap:8px;display:grid}.setup-form label>span{color:var(--ink);align-items:baseline;gap:6px;font-size:14px;font-weight:650;display:flex}.setup-form label small{color:var(--faint);font-size:12px;font-weight:500}.setup-form input,.name-editor input{width:100%;height:46px;color:var(--ink);border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:0 13px;transition:border-color .16s,box-shadow .16s}.setup-form input:hover,.name-editor input:hover{border-color:#aebbb2}.setup-form input:focus,.name-editor input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #1f7a5c1a}.security-note{color:#315c4b;background:#f2f8f5;border:1px solid #cfe3d8;border-radius:9px;align-items:flex-start;gap:9px;padding:12px 13px;font-size:13px;line-height:1.55;display:flex}.security-note svg{flex:none;margin-top:1px}.primary-button{height:46px;color:var(--accent-ink);border:1px solid var(--accent);background:var(--accent);box-shadow:var(--shadow-sm);border-radius:9px;font-weight:700;transition:background .16s,transform .16s}.primary-button:hover{background:var(--accent-deep)}.primary-button:active{transform:translateY(1px)}.setup-error{color:var(--danger);background:var(--danger-soft);border:1px solid #efcfcb;border-radius:8px;margin-top:16px;padding:10px 12px}.chat-shell{border-right:1px solid var(--line);border-left:1px solid var(--line);background:var(--surface);grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,1000px);height:100svh;margin:0 auto;display:grid}.chat-header{z-index:5;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffffff0;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:0 20px;display:flex;position:relative}.room-identity,.header-actions,.connection-state,.presence,.profile-button{align-items:center;display:flex}.room-identity{gap:11px;min-width:0}.room-copy{gap:2px;min-width:0;display:grid}.room-copy strong{font-size:15px;line-height:1.3}.room-subline{min-width:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:5px;font-size:11px;line-height:1.4;display:flex;overflow:hidden}.room-subline svg{color:var(--accent);flex:none}.header-actions{flex:none;gap:8px}.connection-state{color:var(--muted);gap:6px;font-size:12px}.connection-state span{background:var(--faint);border-radius:50%;width:7px;height:7px}.connection-state.online span{background:var(--accent);box-shadow:0 0 0 3px #1f7a5c1f}.connection-state.connecting span{background:#c8862d}.presence{min-width:42px;height:34px;color:var(--muted);border:1px solid var(--line);background:var(--surface-soft);font-variant-numeric:tabular-nums;border-radius:8px;justify-content:center;gap:5px;padding:0 9px;font-size:12px}.icon-button,.profile-button,.settings-head button,.send-button,.settings-row,.name-editor button{background:0 0;border:0}.icon-button{width:36px;height:36px;color:var(--muted);border-radius:8px;place-items:center;transition:color .15s,background .15s;display:grid}.icon-button:hover{color:var(--ink);background:var(--surface-soft)}.settings-wrap{position:relative}.profile-button{max-width:176px;height:38px;color:var(--ink);border:1px solid #0000;border-radius:9px;gap:8px;padding:0 9px 0 5px;transition:border-color .15s,background .15s}.profile-button:hover{border-color:var(--line);background:var(--surface-soft)}.avatar,.message-avatar{color:var(--accent-deep);background:var(--accent-soft);border:1px solid #cfe3d8;border-radius:8px;flex:none;place-items:center;font-weight:700;display:grid}.avatar{width:29px;height:29px;font-size:12px}.profile-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650;overflow:hidden}.settings-menu{border:1px solid var(--line);background:var(--surface);width:248px;box-shadow:var(--shadow-md);border-radius:11px;position:absolute;top:calc(100% + 9px);right:0;overflow:hidden}.settings-head{color:var(--muted);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 13px;font-size:12px;font-weight:700;display:flex}.settings-head button{width:24px;height:24px;color:var(--muted);border-radius:6px;place-items:center;display:grid}.settings-head button:hover{color:var(--ink);background:var(--surface-soft)}.settings-row{width:100%;min-height:45px;color:var(--ink);text-align:left;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;padding:0 13px;font-size:13px;display:grid}.settings-row:hover{background:var(--surface-soft)}.settings-row small{max-width:80px;color:var(--faint);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.settings-row.danger{color:var(--danger);border-top:1px solid var(--line)}.settings-row.danger:hover{background:var(--danger-soft)}.name-editor{grid-template-columns:minmax(0,1fr) 36px;gap:7px;padding:10px 12px;display:grid}.name-editor input{height:36px;font-size:13px}.name-editor button{color:var(--accent-ink);background:var(--accent);border-radius:8px;place-items:center;display:grid}.message-stage{scroll-behavior:smooth;background:linear-gradient(#f7f9f7b8,#f7f9f7b8),repeating-linear-gradient(0deg,#0000 0 34px,#18211c05 34px 35px);min-height:0;overflow-y:auto}.message-list{width:min(100%,820px);margin:0 auto;padding:24px 22px 18px}.day-divider{color:var(--faint);align-items:center;gap:12px;margin:18px 0 20px;font-size:11px;display:flex}.day-divider:before,.day-divider:after{content:"";background:var(--line);flex:1;height:1px}.message-row{align-items:flex-start;gap:10px;margin:0 0 18px;display:flex}.message-row.mine{flex-direction:row-reverse}.message-avatar{width:34px;height:34px;margin-top:20px;font-size:13px}.message-content{gap:4px;max-width:min(78%,620px);display:grid}.message-row.mine .message-content{justify-items:end}.message-meta,.message-foot{align-items:center;gap:8px;font-size:11px;display:flex}.message-meta{padding:0 3px}.message-meta strong{font-size:12px;font-weight:700}.message-meta time,.message-foot{color:var(--faint)}.message-row.mine .message-meta{flex-direction:row-reverse}.message-bubble{border:1px solid var(--line);background:var(--surface);min-width:58px;box-shadow:var(--shadow-sm);border-radius:4px 11px 11px;padding:10px 12px}.message-row.mine .message-bubble{color:#f7fffb;border-color:var(--accent);background:var(--accent);border-radius:11px 4px 11px 11px}.message-bubble p{overflow-wrap:anywhere;white-space:pre-wrap;margin:0;font-size:14px;line-height:1.65}.message-bubble .media-image,.message-bubble .media-video{object-fit:contain;background:#0f1512;border-radius:8px;width:100%;max-width:340px;max-height:420px;display:block}.message-bubble .media-video{max-height:300px}.media-caption{margin-top:8px}.media-fallback{min-width:150px;color:var(--muted);margin:0;font-size:13px}.message-row.mine .media-fallback{color:#f7fffbd1}.message-foot{min-height:16px;padding:0 3px}.message-foot button{color:var(--muted);opacity:0;background:0 0;border:0;padding:0;font-size:11px;transition:color .15s,opacity .15s}.message-row:hover .message-foot button,.message-foot button:focus-visible{opacity:1}.message-foot button:hover{color:var(--danger)}.message-list.is-masked .message-bubble p{filter:blur(7px);-webkit-user-select:none;user-select:none}.empty-chat{height:100%;color:var(--muted);text-align:center;place-content:center;justify-items:center;padding:30px;display:grid}.empty-icon{width:48px;height:48px;color:var(--accent);background:var(--accent-soft);border:1px solid #cfe3d8;border-radius:12px;place-items:center;margin-bottom:13px;display:grid}.empty-chat strong{color:var(--ink);font-size:15px}.empty-chat p{margin:5px 0 0;font-size:13px}.composer-wrap{z-index:4;border-top:1px solid var(--line);background:#fffffff5;padding:12px 18px 10px;position:relative}.composer{border:1px solid var(--line-strong);background:var(--surface);border-radius:11px;grid-template-columns:38px minmax(0,1fr) 40px;align-items:end;gap:8px;width:min(100%,820px);margin:0 auto;padding:8px;transition:border-color .16s,box-shadow .16s;display:grid}.file-input{display:none}.attach-button{width:38px;height:38px;color:var(--muted);border:1px solid var(--line);background:var(--surface-soft);border-radius:9px;place-items:center;transition:color .15s,border-color .15s,background .15s;display:grid}.attach-button:hover:not(:disabled){color:var(--accent-deep);background:var(--accent-soft);border-color:#cfe3d8}.attach-button:disabled{cursor:not-allowed;opacity:.5}.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #1f7a5c14}.composer textarea{resize:none;width:100%;min-height:32px;max-height:148px;color:var(--ink);background:0 0;border:0;outline:0;padding:6px 7px 5px;font-size:14px;line-height:1.55}.composer textarea::placeholder{color:var(--faint)}.send-button{width:38px;height:38px;color:var(--accent-ink);background:var(--accent);border-radius:9px;place-items:center;transition:background .15s,transform .15s;display:grid}.send-button:hover{background:var(--accent-deep)}.send-button:active{transform:translateY(1px)}.composer-meta{width:min(100%,820px);color:var(--faint);justify-content:space-between;gap:16px;margin:6px auto 0;padding:0 4px;font-size:10px;display:flex}.error-toast{z-index:20;color:#7d302b;max-width:min(420px,100vw - 40px);box-shadow:var(--shadow-md);background:#fff8f7;border:1px solid #efcfcb;border-radius:9px;align-items:center;gap:10px;padding:11px 13px;font-size:13px;display:flex;position:fixed;bottom:20px;right:20px}@media (width<=720px){.chat-shell{border:0}.chat-header{min-height:58px;padding:0 12px}.room-subline,.connection-state,.profile-name,.profile-button>svg{display:none}.header-actions{gap:3px}.profile-button{width:38px;padding:4px}.presence{min-width:38px;padding:0 7px}.message-list{padding:18px 13px 12px}.message-content{max-width:84%}.message-avatar{display:none}.composer-wrap{padding:9px 10px calc(8px + env(safe-area-inset-bottom))}.composer-meta{justify-content:flex-end;padding:0 2px}.composer-meta span:first-child{display:none}}@media (width<=440px){.setup-shell{padding:16px}.setup-panel{padding:23px 20px}.settings-menu{right:-4px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}