:root{--bg:#f5f6f8;--panel:#fff;--border:#e2e5ea;--text:#1c2024;--muted:#6b7280;--accent:#2563eb;--accent-text:#fff;--bubble:#eef1f5;--bubble-mine:#2563eb;--bubble-mine-text:#fff;--error:#c0392b;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;-webkit-text-size-adjust:100%;font-family:system-ui,Segoe UI,Microsoft YaHei,sans-serif;font-size:16px;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#14161a;--panel:#1b1e24;--border:#2c3138;--text:#e6e8eb;--muted:#9aa1ab;--accent:#3b82f6;--accent-text:#fff;--bubble:#262b33;--bubble-mine:#3b82f6;--bubble-mine-text:#fff;--error:#ff8a80}}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--text);overscroll-behavior:none;margin:0;overflow:hidden}#app{justify-content:center;height:100dvh;display:flex;overflow:hidden}.chat{width:100%;max-width:720px;padding:16px;padding-top:max(16px, env(safe-area-inset-top));padding-right:max(16px, env(safe-area-inset-right));padding-bottom:max(16px, env(safe-area-inset-bottom));padding-left:max(16px, env(safe-area-inset-left));flex-direction:column;gap:12px;min-height:0;display:flex;overflow:hidden}.join{overscroll-behavior:contain;background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:10px;width:100%;max-width:360px;max-height:100%;margin:auto;padding:24px;display:flex;overflow-y:auto}.join h1{margin:0;font-size:1.4rem}.hint{color:var(--muted);margin:0;font-size:.875rem}label{color:var(--muted);font-size:.875rem}input{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px}input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button{font:inherit;color:var(--accent-text);background:var(--accent);cursor:pointer;border:none;border-radius:8px;padding:10px 16px}button:disabled{opacity:.5;cursor:not-allowed}header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:8px;display:flex}.me{color:var(--muted);white-space:nowrap;font-size:.875rem}header .back{color:var(--muted);border:1px solid var(--border);background:0 0;border-radius:999px;padding:4px 10px;font-size:.8125rem}.members{flex-wrap:wrap;gap:6px;display:flex}.chip{max-width:12em;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;background:var(--bubble);border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:.8125rem;overflow:hidden}.chip.mine{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}button.chip{min-height:0;color:var(--text);background:var(--bubble);border:1px solid var(--border);border-radius:999px;font-size:.8125rem}button.chip:hover{border-color:var(--accent)}button.chip.active{color:var(--accent);background:var(--bubble);border-color:var(--accent)}button.chip .badge{min-width:1.1em;color:var(--accent-text);text-align:center;background:var(--error);border-radius:999px;margin-left:6px;padding:0 4px;font-size:.6875rem;line-height:1.1em;display:inline-block}.messages{overscroll-behavior:contain;flex-direction:column;flex:1;gap:10px;min-height:0;padding:4px;display:flex;overflow-y:auto}.empty{color:var(--muted);margin:auto;font-size:.875rem}article{flex-direction:column;align-self:flex-start;gap:2px;max-width:88%;display:flex}article.mine{align-self:flex-end;align-items:flex-end}.meta{color:var(--muted);gap:6px;font-size:.75rem;display:flex}.text{background:var(--bubble);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;border-radius:12px;margin:0;padding:8px 12px}article.mine .text{background:var(--bubble-mine);color:var(--bubble-mine-text)}.compose{align-items:center;gap:8px;display:flex}.compose input{flex:1;min-width:0}.count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.75rem}.error{color:var(--error);margin:0;font-size:.875rem}@media (width<=480px){.chat{padding:12px;padding-top:max(12px, env(safe-area-inset-top));padding-right:max(12px, env(safe-area-inset-right));padding-bottom:max(12px, env(safe-area-inset-bottom));padding-left:max(12px, env(safe-area-inset-left));gap:10px}.join{padding:20px}input,button{min-height:44px}button.chip,header .back{min-height:32px}article{max-width:92%}.compose{gap:6px}.count{font-size:.6875rem}}@media (height<=480px){.chat{padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(8px, env(safe-area-inset-bottom));gap:8px}}