*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f7f5f0;--surface:#fff;--surface-2:#f2efe8;--ink:#1a1a1a;--ink-2:#4a4742;--muted:#8a857c;--hair:#e0dcd3;--hair-strong:#c9c3b6;--accent:#b85c38;--accent-deep:#a04e2e;--accent-soft:#f2d9cb;--danger:#b23a3a;--success:#6b7a3e;--warn:#c99b3f;--serif:"Noto Serif SC","Songti SC","STSong","SimSun",Georgia,"Times New Roman",serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--mono:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}body,html{height:100%}body{color:var(--ink);background:var(--bg);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}.page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:24px}.card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:40px 32px 32px}.join{gap:18px}.join,.join-head{display:flex;flex-direction:column}.join-head{gap:10px;margin-bottom:4px}.logo{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);border:1px solid var(--hair)}.join h1,.logo{color:var(--ink)}.join h1{font-family:var(--serif);font-size:24px;font-weight:600}.join h1,.subtitle{letter-spacing:.02em}.subtitle{color:var(--muted);font-size:13px}.field{display:flex;flex-direction:column;gap:6px}.field-label,.foot{font-size:12px;color:var(--muted);letter-spacing:.06em}.error{color:var(--danger);font-size:13px;line-height:1.5}.room-page{height:100dvh;width:100vw;background:var(--bg)}.room-shell{width:100%;height:100dvh;flex-direction:column;border-left:1px solid var(--hair);border-right:1px solid var(--hair);max-width:1400px;margin:0 auto;overflow:hidden}.room-header,.room-shell{display:flex;background:var(--surface)}.room-header{align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-bottom:1px solid var(--hair)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--ink);background:var(--surface-2);border:1px solid var(--hair)}.brand-title{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.04em}.brand-sub{font-size:12px;color:var(--muted);margin-top:1px;letter-spacing:.02em}.banner{text-align:center;font-size:12px;color:var(--warn);background:rgba(201,155,63,.08);border-bottom:1px solid var(--hair);padding:7px 14px;letter-spacing:.04em}.room-body{flex:1 1;display:flex;min-height:0}.room-aside{width:232px;flex-shrink:0;border-right:1px solid var(--hair);flex-direction:column}.room-aside,.room-main{background:var(--bg);display:flex;min-height:0}.room-main{flex:1 1;flex-direction:column;min-width:0;padding:18px;gap:14px}.room-main.with-share{flex-direction:row}.room-main.with-share .chat-panel{width:360px;flex:none;flex-shrink:0}.room-error{padding:0 24px 12px}.member-panel{display:flex;flex-direction:column;min-height:0;height:100%}.panel-title{display:flex;align-items:center;gap:8px;padding:18px 20px 10px;font-family:var(--serif);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}.member-scroll{flex:1 1;min-height:0}.member-row{padding:9px 12px;border-radius:4px;border:1px solid transparent;margin:2px 10px}.member-row.me{background:var(--surface);border-color:var(--hair)}.member-name{flex:1 1;min-width:0;font-size:13px}.sharing-icon{color:var(--accent);flex-shrink:0}.muted-icon{color:var(--muted);flex-shrink:0}.dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--muted)}.dot.state-connected{background:var(--success)}.dot.state-connecting,.dot.state-new{background:var(--warn);animation:dot-pulse 1.4s ease-in-out infinite}.dot.state-closed,.dot.state-disconnected,.dot.state-failed{background:var(--danger)}@keyframes dot-pulse{50%{opacity:.3}}.conn-summary{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em}.conn-summary.warn{color:var(--warn)}.chat-panel{flex:1 1;display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--hair);border-radius:6px;overflow:hidden}.chat-scroll{flex:1 1;min-height:0}.chat-empty{height:100%;min-height:160px;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px}.bubble-row,.chat-empty{display:flex;flex-direction:column}.bubble-row{align-items:flex-start;max-width:78%;gap:3px}.bubble-row.self{align-self:flex-end;align-items:flex-end}.bubble-name{font-size:11px;color:var(--muted);padding:0 4px;letter-spacing:.04em}.bubble{padding:9px 13px;font-size:14px;line-height:1.55;border-radius:6px;color:var(--ink);background:var(--surface);border:1px solid var(--hair);word-break:break-word;white-space:pre-wrap}.bubble-row.self .bubble{color:#faf7f2;background:var(--ink);border-color:var(--ink)}.bubble p{margin:0}.bubble p+.bubble-img{margin-top:6px}.bubble-img{display:block;max-width:260px;max-height:200px;border-radius:4px;cursor:zoom-in;transition:opacity .15s}.bubble-img:hover{opacity:.85}.bubble-row.self .bubble-img{border:1px solid hsla(0,0%,100%,.15)}.preview-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--hair);background:var(--surface-2)}.preview-thumb{width:44px;height:44px;object-fit:cover;border-radius:4px;border:1px solid var(--hair)}.preview-hint{flex:1 1;font-size:13px;color:var(--muted)}.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,18,15,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out}.lightbox img{max-width:95vw;max-height:92dvh;object-fit:contain;border-radius:4px}.lightbox-close{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#faf7f2;padding:6px 12px;border:1px solid hsla(0,0%,100%,.18);border-radius:999px;pointer-events:none}.bubble-time{font-family:var(--mono);font-size:10px;color:var(--muted);padding:0 4px;letter-spacing:.02em}.chat-input{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--hair);background:var(--surface)}.share-view{position:relative;flex:1 1;min-width:0;min-height:0;border-radius:6px;overflow:hidden;border:1px solid var(--hair);background:#1a1a1a;cursor:zoom-in}.share-view video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.share-view.expanded{position:fixed;inset:0;z-index:100;border:none;border-radius:0;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;cursor:zoom-out}.share-view.expanded video{width:100%;height:100%;max-height:100dvh}.share-label{left:10px;bottom:10px}.share-label,.share-zoom{position:absolute;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#faf7f2;background:rgba(20,18,15,.7);padding:4px 10px;border-radius:999px;border:1px solid hsla(0,0%,100%,.08)}.share-zoom{right:10px;top:10px;pointer-events:none}.mantine-Button-root{font-weight:500;letter-spacing:.02em;border-radius:4px}.mantine-Button-root[data-variant=default]{background:var(--surface);color:var(--ink);border:1px solid var(--hair-strong)}.mantine-Button-root[data-variant=default]:hover{background:var(--surface-2);border-color:var(--ink-2)}.mantine-Button-root[data-variant=default][data-color=red]{color:var(--danger);border-color:rgba(178,58,58,.3)}.mantine-Button-root[data-variant=default][data-color=red]:hover{background:rgba(178,58,58,.06);border-color:var(--danger)}.mantine-Button-root[data-variant=default][data-color=yellow]{color:var(--accent);border-color:rgba(184,92,56,.3)}.mantine-Button-root[data-variant=default][data-color=yellow]:hover{background:rgba(184,92,56,.06);border-color:var(--accent)}.mantine-Button-root[data-variant=filled]{background:var(--ink);border-color:var(--ink);color:#faf7f2}.mantine-Button-root[data-variant=filled]:hover{background:var(--ink-2);border-color:var(--ink-2)}.mantine-Button-root[data-variant=filled][data-color=red]{background:var(--danger);border-color:var(--danger)}.mantine-Button-root[data-variant=filled][data-color=yellow]{background:var(--accent);border-color:var(--accent);color:#fff}.mantine-TextInput-input{background:var(--surface);color:var(--ink);border:1px solid var(--hair-strong);border-radius:4px;font-size:14px}.mantine-TextInput-input::placeholder{color:var(--muted)}.mantine-TextInput-input:focus,.mantine-TextInput-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.mantine-Badge-root{font-family:var(--mono);font-weight:500;letter-spacing:.04em;border-radius:4px}.mantine-Badge-root[data-variant=light]{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--hair)}.mantine-Badge-root[data-variant=light][data-color=yellow]{color:var(--warn);background:rgba(201,155,63,.1);border-color:rgba(201,155,63,.3)}.mantine-ActionIcon-root{border-radius:4px}.mantine-ActionIcon-root[data-variant=default]{background:var(--surface);border:1px solid var(--hair-strong);color:var(--ink)}.mantine-ActionIcon-root[data-variant=default]:hover{background:var(--surface-2);border-color:var(--ink-2)}.mantine-ActionIcon-root[data-variant=default][data-color=red]{color:var(--danger);border-color:rgba(178,58,58,.3)}.mantine-ActionIcon-root[data-variant=default][data-color=yellow]{color:var(--accent);border-color:rgba(184,92,56,.3)}.mantine-ActionIcon-root[data-variant=subtle]{color:var(--muted)}.mantine-ActionIcon-root[data-variant=subtle]:hover{background:var(--surface-2);color:var(--ink)}.mantine-Avatar-root{background:var(--surface-2)!important;border:1px solid var(--hair);color:var(--ink-2)!important;font-family:var(--serif);font-weight:500}.mantine-Tooltip-tooltip{background:var(--ink);color:#faf7f2;border:1px solid var(--ink);font-size:12px;border-radius:4px;padding:5px 9px}.mantine-ScrollArea-root{flex:1 1}.chat-msgs{width:100%;max-width:860px;margin:0 auto}@media (max-width:820px){.room-header{flex-wrap:wrap;padding:12px 16px;gap:10px}.room-body{flex-direction:column}.room-aside{width:100%;border-right:none;border-bottom:1px solid var(--hair);max-height:132px}.member-scroll{max-height:84px}.room-main.with-share{flex-direction:column}.room-main.with-share .chat-panel{width:100%;flex:1 1;min-height:0}}@media (max-width:600px){.room-header{padding:10px 12px}.brand-sub{display:none}.brand-mark{width:24px;height:24px}.brand-title{font-size:15px}.room-main{padding:10px;gap:10px}.bubble-row{max-width:88%}.card{padding:32px 22px 24px}.join h1{font-size:22px}}.file-panel{margin-top:1rem}.file-drop{border:2px dashed var(--ink-2,#999);border-radius:12px;padding:1.5rem;text-align:center;cursor:pointer;color:var(--ink-2,#666);display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;font-size:.9rem}.file-drop.drag-over,.file-drop:hover{border-color:var(--ink,#333);background:rgba(0,0,0,.03);color:var(--ink,#333)}.file-list{list-style:none;padding:0;margin:.75rem 0 0;max-height:300px;overflow-y:auto}.file-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:8px;font-size:.85rem;color:var(--ink,#333)}.file-item:hover{background:rgba(0,0,0,.04)}.file-name{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.75rem;min-width:60px;text-align:right}.file-btn,.file-size{color:var(--ink-2,#888)}.file-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;text-decoration:none}.file-btn:hover{background:rgba(0,0,0,.06);color:var(--ink,#333)}.file-btn.rm:hover{color:#e03131}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}