:root{--bg-base: #11111b;--bg-primary: #11111b;--bg-secondary: #1e1e2e;--bg-tertiary: #2d2d41;--bg-input: #1e1e2e;--bg-server-bar: #0c0c14;--text-primary: #cdd6f4;--text-secondary: #a6adc8;--text-muted: #585b70;--accent: #89b4fa;--accent-green: #a6e3a1;--accent-yellow: #f9e2af;--accent-red: #f38ba8;--accent-purple: #cba6f7;--border: rgba(255, 255, 255, .08)}*{margin:0;padding:0;box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text;font-size:16px;font-family:inherit}button{font-family:inherit}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}@media(min-width:768px){*::-webkit-scrollbar-thumb{background:transparent}*:hover::-webkit-scrollbar-thumb{background:#ffffff1a}}.msg-input:empty:before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}.msg-input{-webkit-user-modify:read-write-plaintext-only}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.bg-citadel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;contain:strict}.bg-citadel:before,.bg-citadel:after{content:"";position:absolute;border-radius:50%;will-change:transform,opacity}.bg-citadel:before{width:600px;height:600px;top:20%;left:30%;background:radial-gradient(circle,rgba(137,180,250,.15) 0%,transparent 70%);animation:citadel-float 15s ease-in-out infinite}.bg-citadel:after{width:500px;height:500px;bottom:20%;right:20%;background:radial-gradient(circle,rgba(203,166,247,.12) 0%,transparent 70%);animation:citadel-float 18s ease-in-out infinite reverse}@keyframes citadel-float{0%,to{opacity:.3;transform:translate(0) scale(1)}33%{opacity:.5;transform:translate(40px,-30px) scale(1.1)}66%{opacity:.35;transform:translate(-20px,40px) scale(.95)}}.hover-bg:hover{background:#ffffff0a}.active-scale:active{transform:scale(.95)}.msg-row{position:relative}.msg-row:hover{background:#ffffff05}.msg-row .hover-ts{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--text-muted);opacity:0;transition:opacity .15s;pointer-events:none}.msg-row:hover .hover-ts{opacity:1}.ctx-menu{position:fixed;z-index:300;min-width:180px;border-radius:8px;padding:4px 0;box-shadow:0 8px 24px #0006;background:var(--bg-primary);border:1px solid var(--border)}.ctx-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:8px 12px;border:none;background:none;color:var(--text-primary);font-size:13px;cursor:pointer;text-align:left;font-family:inherit}.ctx-menu button:hover{background:#ffffff0f}.ctx-menu .ctx-danger{color:var(--accent-red)}.msg-link{color:var(--accent);text-decoration:none}.msg-link:hover{text-decoration:underline}.msg-img{max-width:100%;max-height:288px;border-radius:8px;margin-top:6px;cursor:pointer}.reaction-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:13px;border:1px solid var(--border);background:#ffffff0a;cursor:pointer;transition:all .15s}.reaction-pill:hover{background:#ffffff14}.reaction-pill.mine{border-color:var(--accent);background:#89b4fa1f}.reaction-pill .count{font-size:11px;color:var(--text-secondary)}@keyframes bounce-dot{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-4px)}}@keyframes name-pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes name-glow{0%,to{text-shadow:0 0 4px currentColor}50%{text-shadow:0 0 12px currentColor,0 0 20px currentColor}}@keyframes name-rainbow{0%{color:#f38ba8}16%{color:#fab387}33%{color:#f9e2af}50%{color:#a6e3a1}66%{color:#89b4fa}83%{color:#cba6f7}to{color:#f38ba8}}@keyframes name-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.name-anim-pulse{animation:name-pulse 2s ease-in-out infinite}.name-anim-glow{animation:name-glow 2s ease-in-out infinite}.name-anim-rainbow{animation:name-rainbow 3s linear infinite}.name-anim-bounce{animation:name-bounce 1s ease-in-out infinite}#root{padding-top:env(safe-area-inset-top);background:var(--bg-primary)}.chat-scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative}.msg-row.msg-new{animation:msg-in .18s ease-out}@keyframes msg-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.msg-row.msg-pending{opacity:.55}.msg-row.msg-failed{background:#f38ba80f}.msg-fail{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--accent-red)}.msg-fail button{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;font-weight:600;padding:0}.msg-mention{background:#f9e2af0f;box-shadow:inset 2px 0 0 var(--accent-yellow)}.day-divider{display:flex;align-items:center;gap:12px;margin:16px 16px 8px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.day-divider:before,.day-divider:after{content:"";flex:1;height:1px;background:var(--border)}.channel-intro{padding:32px 16px 8px}.channel-intro .icon{width:56px;height:56px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--text-secondary);margin-bottom:12px}.channel-intro h2{font-size:22px;font-weight:700;margin-bottom:4px}.channel-intro p{font-size:13px;color:var(--text-muted)}.skeleton-row{display:flex;gap:12px;padding:10px 16px}.skeleton{background:linear-gradient(90deg,#ffffff0a 25%,#ffffff17 37%,#ffffff0a 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px}@keyframes shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}.jump-pill{position:absolute;left:50%;bottom:12px;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;background:var(--accent);color:#11111b;box-shadow:0 4px 16px #00000059;animation:msg-in .16s ease-out}.jump-pill.quiet{background:var(--bg-tertiary);color:var(--text-primary)}.conn-banner{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;font-size:12px;font-weight:600;background:#f9e2af1f;color:var(--accent-yellow);border-bottom:1px solid rgba(249,226,175,.2)}.conn-banner button{background:none;border:1px solid currentColor;color:inherit;border-radius:6px;padding:2px 8px;font:inherit;cursor:pointer}.older-loader{display:flex;justify-content:center;padding:10px;color:var(--text-muted);font-size:12px;gap:8px;align-items:center}.relay-dot{position:absolute;right:2px;bottom:2px;width:12px;height:12px;border-radius:50%;border:3px solid var(--bg-server-bar)}@media(prefers-reduced-motion:reduce){.msg-row.msg-new,.jump-pill,.skeleton{animation:none}}.toaster{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 56px);transform:translate(-50%);z-index:400;display:flex;flex-direction:column;gap:6px;width:min(92vw,420px);pointer-events:none}.toast{padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.4;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);box-shadow:0 8px 24px #0006;animation:msg-in .16s ease-out}.toast-error{border-color:#f38ba866;color:var(--accent-red)}.toast-success{border-color:#a6e3a166;color:var(--accent-green)}.update-banner{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 12px;font-size:13px;font-weight:600;background:#89b4fa24;color:var(--accent);border-bottom:1px solid rgba(137,180,250,.25)}.update-banner button{border:none;border-radius:6px;padding:3px 10px;font:inherit;cursor:pointer;background:var(--accent);color:#11111b}.update-banner button.dismiss{background:none;color:var(--text-muted);padding:3px 4px}.admin-badge{font-size:9px;font-weight:800;letter-spacing:.06em;padding:1px 5px;border-radius:4px;background:#f38ba826;color:var(--accent-red);align-self:center}
