/* Many buttons/panels in this file set their own `display` (flex, grid,
   etc.) as a plain class rule so they lay out correctly *when shown* —
   but the browser's default `[hidden]{display:none}` rule is only a
   user-agent-origin style, and author-origin CSS always wins over it at
   equal specificity, class vs. attribute selector or not. Without this,
   any element that's both styled with its own `display:` AND toggled via
   the DOM `hidden` property/attribute from JS (there are dozens across
   chat-app.js: composer buttons, modals, the room-list panes, per-room
   toggles…) silently keeps rendering even once `hidden` is set. One
   `!important` rule here, ahead of everything else, is the standard fix
   for this whole class of bug — every current and future [hidden] element
   in this file is correct by construction instead of needing a matching
   `.foo[hidden]{display:none}` override hand-added next to each one. */
[hidden]{display:none!important}
:root{--chat-bg:#0b0710;--chat-panel:#120c1a;--chat-panel-2:#1a1224;--chat-line:rgba(255,255,255,.08);--chat-accent:#8b5cf6;--chat-accent-2:#c084fc;--chat-text:#f4f0fb;--chat-muted:#8f849b;--chat-online:#22c55e;--chat-input-bg:#1c1526;--chat-radius:14px}
:root[data-theme="light"]{--chat-bg:#f3f1f7;--chat-panel:#ffffff;--chat-panel-2:#f1eef6;--chat-line:rgba(20,10,30,.1);--chat-accent:#8b5cf6;--chat-accent-2:#7c3aed;--chat-text:#1c1526;--chat-muted:#6b6478;--chat-online:#16a34a;--chat-input-bg:#f1eef6}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]){--chat-bg:#f3f1f7;--chat-panel:#ffffff;--chat-panel-2:#f1eef6;--chat-line:rgba(20,10,30,.1);--chat-accent:#8b5cf6;--chat-accent-2:#7c3aed;--chat-text:#1c1526;--chat-muted:#6b6478;--chat-online:#16a34a;--chat-input-bg:#f1eef6}}.chat-body{background:var(--chat-bg);color:var(--chat-text);font-family:DM Sans,sans-serif;margin:0;height:100vh;height:100dvh;overflow:hidden}.chat-gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:40px 20px;background:radial-gradient(circle at 30% 20%,#2a1740,var(--chat-bg) 60%)}.chat-gate-card{width:min(420px,100%);background:var(--chat-panel);border:1px solid var(--chat-line);border-radius:20px;padding:32px;box-shadow:0 30px 100px #000a}.chat-gate-card .brand{display:flex;align-items:center;gap:10px;font-family:Manrope,sans-serif;font-weight:800;font-size:20px;margin-bottom:22px}.chat-gate-card .brand>span:last-child>span{color:var(--chat-accent-2)}.chat-gate-card h1{font:800 30px Manrope,sans-serif;margin:0 0 8px;letter-spacing:-1px}.chat-gate-card>p{color:var(--chat-muted);font-size:14px;margin:0 0 24px}.chat-gate-actions{display:flex;flex-direction:column;gap:12px}.chat-gate-actions .button-primary{background:linear-gradient(120deg,var(--chat-accent),var(--chat-accent-2))}.chat-gate-actions .text-link{text-align:center;color:var(--chat-muted);font-size:13px}.chat-gate-guest{margin-top:26px;display:flex;flex-direction:column;gap:10px}.chat-gate-divider{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--chat-muted);margin-bottom:4px}.chat-gate-row{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;align-items:stretch}.chat-gate-guest input:not([type="checkbox"]):not([type="radio"]),.chat-gate-guest select{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:9px;padding:12px;height:46px;width:100%;font-size:14px;font-family:inherit;box-sizing:border-box;-webkit-appearance:none;appearance:none}.chat-gate-guest select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238f849b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:32px}.chat-gate-guest .checkbox{display:flex;gap:8px;font-size:12px;color:var(--chat-muted);align-items:flex-start}.chat-gate-guest .checkbox a{color:var(--chat-accent-2)}.chat-gate-guest .city-autocomplete-list{background:var(--chat-input-bg);border:1px solid var(--chat-line);border-radius:0 0 10px 10px}.chat-gate-guest .city-autocomplete-option{color:var(--chat-text)}.chat-gate-guest .city-autocomplete-option:hover,.chat-gate-guest .city-autocomplete-option.active{background:var(--chat-panel-2)}.chat-root{display:grid;grid-template-columns:280px 1fr 300px;grid-template-rows:56px 1fr;height:100vh;height:100dvh}.chat-topbar{grid-column:1/-1;display:flex;align-items:center;gap:20px;padding:0 18px;border-bottom:1px solid var(--chat-line);background:var(--chat-panel)}
.embed-close-btn{background:none;border:0;color:var(--chat-muted);width:30px;height:30px;min-width:30px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.embed-close-btn:hover{background:var(--chat-panel-2);color:var(--chat-text)}
/* Embedded in someone else's page — the widget is the whole viewport (an
   iframe sized to the widget, not the full site), so the online-user count
   next to the brand just wastes space that's already tight. */
.chat-body.chat-embed .chat-online-count{display:none}.chat-topbar .brand{display:flex;align-items:center;gap:8px;font:800 16px Manrope,sans-serif}.chat-topbar .brand>span:last-child>span{color:var(--chat-accent-2)}.chat-topbar .brand-mark{width:26px;height:26px;font-size:13px;border-radius:8px;background:linear-gradient(120deg,var(--chat-accent),#ff4f87);display:grid;place-items:center;font-weight:800}.chat-online-count{color:var(--chat-muted);font-size:12px;display:flex;align-items:center;gap:6px}.chat-online-count b{color:var(--chat-online)}.chat-user-menu{margin-left:auto;display:flex;align-items:center;gap:10px;position:relative}.chat-user-menu .chat-avatar{width:30px;height:30px;font-size:13px}.chat-user-menu .username{font-size:13px;font-weight:600}.chat-user-trigger{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:4px 6px 4px 4px;border-radius:99px}.chat-user-trigger:hover{background:var(--chat-panel-2)}.chat-user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--chat-panel-2);border:1px solid var(--chat-line);border-radius:12px;padding:6px;min-width:180px;box-shadow:0 20px 60px #000a;z-index:20;display:flex;flex-direction:column;gap:2px}.chat-user-dropdown[hidden]{display:none}.chat-user-dropdown button,.chat-user-dropdown a{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--chat-text);font-size:13px;text-decoration:none;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left}.chat-user-dropdown button:hover,.chat-user-dropdown a:hover{background:var(--chat-panel)}.chat-user-dropdown .icon-svg{width:16px;height:16px;color:var(--chat-muted)}.chat-sidebar{border-right:1px solid var(--chat-line);background:var(--chat-panel);display:flex;flex-direction:column;overflow:hidden}.chat-tabs{display:flex;border-bottom:1px solid var(--chat-line)}.chat-tabs button{flex:1;padding:14px;background:none;border:0;color:var(--chat-muted);font-weight:700;font-size:13px;cursor:pointer;border-bottom:2px solid transparent}.chat-tabs button.active{color:#fff;border-bottom-color:var(--chat-accent)}.chat-tabs button[hidden]{display:none}
.chat-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.unread-badge{min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;animation:badgeFlash 1s ease-in-out infinite}
.unread-badge[hidden]{display:none}
.chat-mobile-nav button{position:relative}
.chat-mobile-nav .unread-badge{position:absolute;top:4px;right:calc(50% - 20px);min-width:14px;height:14px;font-size:9px}
@keyframes badgeFlash{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.room-list{flex:1;overflow-y:auto;padding:8px}.room-group-label{display:flex;justify-content:space-between;padding:14px 10px 6px;font-size:10px;letter-spacing:1px;color:var(--chat-muted);text-transform:uppercase}.room-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer;color:#d9d2e0}.room-row:hover{background:var(--chat-panel-2)}.room-row.active{background:linear-gradient(120deg,#3a2260,#241436);color:#fff}.room-row .room-icon{width:26px;text-align:center;font-size:15px}.room-row .room-name{flex:1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-row .room-count{font-size:11px;color:var(--chat-muted);background:#00000040;border-radius:99px;padding:2px 8px;display:flex;align-items:center;gap:4px}.room-row.locked{opacity:.55;cursor:not-allowed}.room-row.locked:hover{background:none}.room-row.locked .room-count{padding:4px}.room-row.locked .room-count .icon-svg{width:13px;height:13px}.private-list{flex:1;overflow-y:auto;padding:8px}.private-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer}.private-row:hover,.private-row.active{background:var(--chat-panel-2)}
.private-row{position:relative}
.private-row.unread .name-line{font-weight:700}
.unread-dot{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:#ef4444;animation:badgeFlash 1s ease-in-out infinite}.private-row .last-msg{font-size:11px;color:var(--chat-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.private-empty{padding:40px 20px;text-align:center;color:var(--chat-muted);font-size:13px}.chat-main{display:flex;flex-direction:column;overflow:hidden;background:var(--chat-bg)}.chat-main-header{padding:14px 20px;border-bottom:1px solid var(--chat-line);display:flex;align-items:center;gap:12px}.chat-main-header .room-icon{font-size:18px}.chat-main-header h2{font-size:15px;margin:0;font-weight:700;letter-spacing:normal}.chat-main-header .sub{font-size:12px;color:var(--chat-muted)}.chat-main-header .call-btn{margin-left:auto;background:#00000040;border:1px solid var(--chat-line);color:var(--chat-text);width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}.chat-main-header .call-btn:hover{border-color:var(--chat-accent);color:var(--chat-accent-2)}.chat-empty{flex:1;display:grid;place-items:center;color:var(--chat-muted);text-align:center;gap:10px}.chat-thread{display:flex;flex-direction:column;flex:1;overflow:hidden}.chat-empty[hidden],.chat-thread[hidden]{display:none}.chat-empty .icon{font-size:34px}.message-list{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}.chat-msg{display:flex;gap:10px;max-width:640px}.chat-msg.self{align-self:flex-end;flex-direction:row-reverse}.chat-msg .bubble{background:var(--chat-panel-2);border-radius:14px;padding:10px 14px}.chat-msg.self .bubble{background:linear-gradient(120deg,#4c2a80,#7d3fae);color:#f4f0fb}.chat-msg .line{font-size:14px;line-height:1.5;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}.chat-msg .line b{color:#e6ddf5;font-weight:700;white-space:nowrap}.chat-msg .line .text{word-break:break-word}.mention{background:#8b5cf640;border-radius:5px;padding:1px 5px;font-weight:700}.mention-self{background:#f59e0b40;color:#fbbf24}.chat-msg .line .time{font-size:11px;color:#ffffffb0;margin-left:auto;white-space:nowrap}.reaction-bar{position:relative;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.reaction-badge{background:#00000040;border-radius:99px;padding:2px 8px;font-size:12px}.reaction-add{background:none;border:1px dashed var(--chat-line);color:var(--chat-muted);border-radius:99px;width:22px;height:22px;min-width:22px;font-size:13px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.reaction-strip{position:absolute;bottom:26px;left:0;display:flex;gap:4px;background:var(--chat-panel-2);border:1px solid var(--chat-line);border-radius:99px;padding:5px 8px;box-shadow:0 10px 30px #000a;z-index:15}.reaction-strip[hidden]{display:none}.reaction-option{background:none;border:0;font-size:16px;line-height:1;width:26px;height:26px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.reaction-option:hover{transform:scale(1.2)}.chat-composer{display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:1px solid var(--chat-line)}.chat-composer input{flex:1;background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:99px;padding:12px 18px;outline:none}.chat-composer input:focus{border-color:var(--chat-accent)}.chat-composer button{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:99px;cursor:pointer}.chat-composer button:hover{border-color:var(--chat-accent);color:var(--chat-accent-2)}
.image-toggle{background:var(--chat-input-bg);border:1px solid var(--chat-line);border-radius:50%;width:36px;height:36px;min-width:36px;font-size:15px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.image-toggle[hidden]{display:none}
.typing-indicator{display:flex;align-items:center;gap:6px;padding:0 20px;height:22px;color:var(--chat-muted);font-size:12px}.typing-indicator i{width:5px;height:5px;border-radius:50%;background:var(--chat-accent);animation:typing-dot 1.15s ease-in-out infinite}.typing-indicator i:nth-child(2){animation-delay:.15s}.typing-indicator i:nth-child(3){animation-delay:.3s}.typing-indicator span{margin-left:2px}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-2px);opacity:1}}
@media(prefers-reduced-motion:reduce){.typing-indicator i{animation:none}}
.image-preview{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 20px;border-top:1px solid var(--chat-line)}
.image-preview[hidden]{display:none}
.image-preview-item{position:relative;flex-shrink:0}
.image-preview-item img{display:block;max-height:60px;border-radius:8px}
.image-preview-item button{position:absolute;top:-7px;right:-7px;background:#000000a0;border:1px solid var(--chat-line);color:#fff;border-radius:50%;width:20px;height:20px;min-width:20px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.image-preview-item button .icon-svg{width:11px;height:11px}
.chat-msg-image-wrap{position:relative;display:inline-block;margin-top:8px;max-width:160px}
.chat-msg-image{max-width:160px;max-height:160px;border-radius:12px;display:block;cursor:zoom-in;object-fit:cover;transition:filter .2s ease}
.chat-msg-image-wrap.blurred .chat-msg-image{filter:blur(24px) brightness(.7);cursor:pointer}
.chat-msg-image-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:12px;font-weight:600;text-align:center;cursor:pointer;text-shadow:0 1px 4px #000a}
.chat-msg-image-wrap.blurred .chat-msg-image-overlay{display:flex}
.chat-msg-image-overlay .icon-svg{width:22px;height:22px}
.chat-msg-image-report{position:absolute;top:6px;right:6px;background:#000000a0;border:0;color:#fff;width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-msg-image-report:hover{color:#eab308}
.chat-msg-audio{display:block;margin-top:8px;max-width:280px;height:36px}
.chat-msg-youtube{position:relative;display:block;width:280px;height:157px;margin-top:8px;border-radius:12px;overflow:hidden;background:#000;cursor:pointer;border:0;padding:0}
.chat-msg-youtube img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.chat-msg-youtube iframe{display:block;width:280px;height:157px;border:0}
.chat-msg-youtube-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b0;border:0;border-radius:50%;width:52px;height:52px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.chat-msg-youtube-play .icon-svg{width:22px;height:22px}
.chat-msg-youtube:hover .chat-msg-youtube-play{background:#ef4444d0}
.mic-toggle{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:50%;width:36px;height:36px;min-width:36px;font-size:15px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,width .15s ease;gap:6px;flex-shrink:0}
.mic-toggle[hidden]{display:none}
.mic-toggle:hover{background:#251a35}
.mic-toggle.recording{width:auto;padding:0 14px;border-radius:99px;background:#ef4444;border-color:#ef4444;color:#fff;animation:micPulse 1.4s ease-in-out infinite}
.mic-toggle.recording .icon-svg{width:16px;height:16px}
.mic-timer{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 #ef444455}50%{box-shadow:0 0 0 6px #ef444400}}
.chat-msg-image-report .icon-svg{width:12px;height:12px}
#image-lightbox{position:fixed;inset:0;z-index:2000;background:#000000e6;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
#image-lightbox[hidden]{display:none}
#image-lightbox img{max-width:92vw;max-height:92vh;border-radius:8px;box-shadow:0 30px 100px #000a;cursor:default}
#lightbox-close{position:fixed;top:20px;right:24px;background:#ffffff20;border:0;color:#fff;width:40px;height:40px;min-width:40px;line-height:1;padding:0;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}.emoji-picker-wrap{position:relative;flex-shrink:0}.emoji-toggle{background:var(--chat-input-bg);border:1px solid var(--chat-line);border-radius:50%;width:36px;height:36px;min-width:36px;font-size:16px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease}.emoji-toggle:hover{background:#251a35;transform:scale(1.08)}.emoji-panel{position:absolute;bottom:54px;left:0;width:320px;max-width:calc(100vw - 32px);max-height:min(360px,70vh);background:var(--chat-panel-2);border:1px solid var(--chat-line);border-radius:18px;padding:12px;box-shadow:0 24px 70px #000c;z-index:20;display:flex;flex-direction:column;gap:10px;transform-origin:bottom left;animation:emojiPanelIn .16s ease}
@keyframes emojiPanelIn{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.picker-tabs{display:flex;gap:4px;background:#00000030;border-radius:99px;padding:4px;flex-shrink:0}
.picker-tab{flex:1;background:none;border:0;color:var(--chat-muted);font-size:12px;font-weight:700;padding:7px 0;border-radius:99px;cursor:pointer}
.picker-tab.active{background:linear-gradient(120deg,var(--chat-accent),var(--chat-accent-2));color:#fff}
.picker-body{display:flex;flex-direction:column;gap:10px;overflow:hidden;flex:1;min-height:0}
.emoji-search-wrap{display:flex;align-items:center;gap:8px;background:var(--chat-input-bg);border:1px solid var(--chat-line);border-radius:99px;padding:0 14px;color:var(--chat-muted);flex-shrink:0}
.emoji-search-wrap:focus-within{border-color:var(--chat-accent);color:var(--chat-accent-2)}
.emoji-search-wrap .icon-svg{width:15px;height:15px;flex-shrink:0}
.emoji-search{flex:1;width:100%;background:none;border:0;color:var(--chat-text);padding:9px 0;font-size:13px;outline:none;box-sizing:border-box}
.emoji-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--chat-muted);font-size:12px;padding:24px 10px}
.emoji-empty .icon-svg{width:22px;height:22px;opacity:.5}
.emoji-tabs{display:flex;gap:4px;flex-wrap:wrap;background:#00000030;border-radius:99px;padding:4px;flex-shrink:0}
.emoji-tab{background:none;border:0;color:var(--chat-muted);padding:0;width:36px;height:32px;border-radius:99px;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.emoji-tab span{font-size:17px}
.emoji-tab:hover{color:var(--chat-text);background:#ffffff0d}.emoji-tab.active{background:#ffffff14;color:var(--chat-accent-2)}.emoji-section-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--chat-muted);padding:0 2px}.emoji-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center;gap:4px;max-height:240px;overflow-y:auto;overflow-x:hidden;padding:2px}
.emoji-panel{overflow-x:hidden}.emoji-panel[hidden]{display:none}.emoji-option{background:none;border:0;font-size:22px;line-height:1;width:38px;height:38px;padding:0;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,background .12s ease}.emoji-option:hover{background:#ffffff1a;transform:scale(1.2)}.emoji-option:active{transform:scale(1.35)}.pm-notice{margin:0 20px 10px;background:#3a2b0e;color:#f5cf7f;border-radius:10px;padding:10px 14px;font-size:12px}.pm-notice a{color:#fff;text-decoration:underline}.chat-userlist{border-left:1px solid var(--chat-line);background:var(--chat-panel);display:flex;flex-direction:column;overflow:hidden}.chat-userlist-header{padding:14px;display:flex;gap:10px;border-bottom:1px solid var(--chat-line)}.chat-userlist-header .pill{flex:1;text-align:center;padding:6px;border-radius:99px;font-size:11px;background:#ffffff0d;color:var(--chat-muted);border:0}.chat-userlist-header .pill.active{background:#ffffff1a}.chat-userlist-header .pill b{color:#fff}.userlist-search{padding:10px 14px}.userlist-search input{width:100%;background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:9px;padding:9px 12px}.userlist-filters{display:flex;gap:6px;padding:0 14px 10px;flex-wrap:wrap}.userlist-filters button{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-muted);border-radius:99px;padding:4px 10px;font-size:11px;cursor:pointer}.userlist-filters button.active{background:var(--chat-accent);color:#fff;border-color:var(--chat-accent)}
.advanced-filters{padding:0 14px 10px;border-bottom:1px solid var(--chat-line)}
.advanced-filters-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;color:var(--chat-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:6px 0;cursor:pointer}
.advanced-filters-toggle:hover{color:var(--chat-text)}
.advanced-filters-toggle .icon-svg{width:13px;height:13px;transition:transform .15s ease}
.advanced-filters-toggle.expanded .icon-svg{transform:rotate(180deg)}
.advanced-filters-body{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.advanced-filters-body[hidden]{display:none}
.filter-group{display:flex;flex-direction:column;gap:8px}
.filter-checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.filter-checkbox-row input{width:auto}
.filter-label-row{display:flex;justify-content:space-between;font-size:11px;color:var(--chat-muted)}
.filter-label-row span:last-child{color:var(--chat-text);font-weight:600}
.range-slider{position:relative;height:20px}
.range-slider-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:99px;background:var(--chat-input-bg)}
.range-slider-fill{position:absolute;top:50%;transform:translateY(-50%);height:4px;border-radius:99px;background:var(--chat-accent)}
.range-slider input[type="range"]{position:absolute;left:0;right:0;top:0;width:100%;height:20px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range-slider-single{width:100%;height:20px;margin:0;-webkit-appearance:none;appearance:none;background:none}
input[type="range"]::-webkit-slider-runnable-track{-webkit-appearance:none;height:4px;background:none}
input[type="range"]::-moz-range-track{height:4px;background:none}
.range-slider-single::-webkit-slider-runnable-track{background:var(--chat-input-bg);border-radius:99px}
.range-slider-single::-moz-range-track{background:var(--chat-input-bg);border-radius:99px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--chat-accent);cursor:pointer;margin-top:-6px}
input[type="range"]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--chat-accent);cursor:pointer}.virtual-list-viewport{flex:1;overflow-y:auto;position:relative}
.virtual-list-viewport,.room-list,.private-list,.message-list,.emoji-grid{scrollbar-width:thin;scrollbar-color:#4a3d5c transparent}
.virtual-list-viewport::-webkit-scrollbar,.room-list::-webkit-scrollbar,.private-list::-webkit-scrollbar,.message-list::-webkit-scrollbar,.emoji-grid::-webkit-scrollbar{width:6px}
.virtual-list-viewport::-webkit-scrollbar-track,.room-list::-webkit-scrollbar-track,.private-list::-webkit-scrollbar-track,.message-list::-webkit-scrollbar-track,.emoji-grid::-webkit-scrollbar-track{background:transparent}
.virtual-list-viewport::-webkit-scrollbar-thumb,.room-list::-webkit-scrollbar-thumb,.private-list::-webkit-scrollbar-thumb,.message-list::-webkit-scrollbar-thumb,.emoji-grid::-webkit-scrollbar-thumb{background:#4a3d5c;border-radius:99px}.virtual-list-spacer{position:relative;width:100%}.user-row{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;padding:0 14px;box-sizing:border-box;cursor:pointer}.user-row:hover{background:var(--chat-panel-2)}.user-row .name-line{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}.user-row .you-tag{background:var(--chat-accent);color:#fff;font-size:9px;padding:1px 6px;border-radius:99px;font-weight:700}.user-row .detail-line{font-size:11px;color:var(--chat-muted)}.user-row .detail-line .homme{color:#60a5fa}.user-row .detail-line .femme{color:#f472b6}.user-row .detail-line .couple{color:#facc15}.chat-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0;position:relative}.chat-avatar.online:after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--chat-online);border:2px solid var(--chat-panel)}@media(max-width:900px){.chat-root{grid-template-columns:1fr;grid-template-rows:56px 1fr}.chat-main{padding-bottom:56px}.chat-sidebar,.chat-userlist{position:fixed;inset:56px 0;z-index:5;display:none}.chat-root.view-rooms .chat-sidebar,.chat-root.view-private .chat-sidebar,.chat-root.view-online .chat-userlist,.chat-root.view-chat .chat-main{display:flex}.chat-main{display:none}.chat-root.view-chat .chat-main{display:flex}.chat-mobile-nav{position:fixed;left:0;right:0;bottom:0;height:56px;z-index:10;display:flex;border-top:1px solid var(--chat-line);background:var(--chat-panel)}.chat-mobile-nav button{flex:1;background:none;border:0;color:var(--chat-muted);font-size:11px;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:2px}.chat-mobile-nav button.active{color:var(--chat-accent-2)}.chat-mobile-nav button[hidden]{display:none}}@media(min-width:901px){.chat-mobile-nav{display:none}.userlist-filters{flex-wrap:nowrap}.userlist-filters button{padding:4px 6px;font-size:10px;white-space:nowrap;flex-shrink:0}}
#rtc-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#05030899;backdrop-filter:blur(6px)}
#rtc-overlay[hidden]{display:none}
#rtc-videos{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:90vw;position:relative}
#rtc-remote-wrap{position:relative;width:min(70vw,560px)}
#rtc-remote-video{width:100%;display:block;border-radius:16px;background:#000}
#rtc-local-wrap{position:fixed;right:24px;bottom:100px;width:140px}
#rtc-local-video{width:100%;display:block;border-radius:12px;background:#000}
#rtc-remote-wrap:fullscreen,#rtc-local-wrap:fullscreen{width:100vw;background:#000;display:flex;align-items:center;justify-content:center}
#rtc-remote-wrap:fullscreen video,#rtc-local-wrap:fullscreen video{width:100%;height:100%;object-fit:contain}
#rtc-status{color:#fff;font-size:14px}
#rtc-overlay button{border:0;border-radius:99px;font-weight:700;cursor:pointer}
#rtc-hangup{background:#ef4444;color:#fff;padding:10px 22px}
.rtc-video-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px;background:linear-gradient(transparent,#000000b0)}
.rtc-video-controls button{background:#000000a0;color:#fff;width:28px;height:28px;font-size:13px;line-height:1;flex-shrink:0}
.rtc-video-controls button.muted{background:#ef4444cc}
.rtc-video-controls input[type="range"]{flex:1;accent-color:var(--chat-accent,#8b5cf6)}
#rtc-incoming{background:var(--chat-panel-2);border:1px solid var(--chat-accent);border-radius:16px;padding:20px;color:#fff;text-align:center}
#rtc-incoming[hidden]{display:none}
#rtc-incoming-text{margin-bottom:12px}
#rtc-accept{background:var(--chat-online);color:#fff;padding:8px 18px;margin-right:8px}
#rtc-decline{background:#ef4444;color:#fff;padding:8px 18px}
.room-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:14px 20px 0}
.room-video-grid-small{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.room-video-grid-large{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* .room-video-grid-draggable is set on the *grid* only for the tenant-wide
   "webcam draggable and resizable" default (see enterRoomVideo()) — its
   only job is collapsing the grid's own box to zero height once every
   tile inside it is about to be floating, so it doesn't leave a blank gap
   in the thread where the grid used to sit. It does NOT carry the actual
   floating styling any more (see .room-video-tile-floating below) since a
   single tile can now also be floated independently of this tenant
   default via its own per-tile detach button
   (node/rtc-client-src/index.js's setTileFloating()), while its siblings
   stay docked in the grid — in that case the grid must keep its normal
   in-flow height for the tiles that are still docked, so the collapse-to-
   zero here would be wrong for those. */
.room-video-grid-draggable{display:block;position:relative;height:0}
/* Tiles are position:fixed (viewport-relative, not clipped to or confined
   by this container) once floating — see
   node/rtc-client-src/index.js's makeTileDraggable()/setTileFloating(),
   clamped against window.innerWidth/innerHeight so a tile can be parked
   anywhere on screen. Applied directly to the tile itself (not scoped
   through a grid-level ancestor class) so it works identically whether
   the tile got here via the tenant-wide default (every tile floats from
   creation) or a single tile's own detach button while its siblings stay
   docked in the ordinary grid flow — position:fixed removes an element
   from grid layout regardless of where it sits in the DOM, so a floating
   tile can simply stay put as a grid child and the grid reflows the
   remaining docked tiles to fill the freed cell.
   z-index sits above ordinary content but below #watch-request-stack
   (1900) and the modal layer (2000), so an incoming watch request or any
   modal always stays reachable above a floating tile. */
/* cursor/touch-action/user-select live on the tile itself, not just the
   name label — the whole tile is the drag surface (see
   node/rtc-client-src/index.js's makeTileDraggable()), not only the name
   label. .room-video-controls overrides back to a normal cursor below so
   its own buttons/slider don't visually imply the whole bar is
   draggable — makeTileDraggable() also ignores pointerdown events that
   land inside .room-video-controls, so those keep working as controls.
   Selector is the compound .room-video-tile.room-video-tile-floating, not
   just .room-video-tile-floating alone, deliberately — a tile carries
   BOTH classes at once, and the base .room-video-tile rule below also
   sets position (to relative). A single-class .room-video-tile-floating
   selector has the exact same specificity as that base rule, so which one
   actually wins position:fixed vs position:relative would come down to
   pure source order — fragile, and silently backwards here since the
   base rule appears later in this file. The compound selector's higher
   specificity wins outright, regardless of source order, so this can't
   regress if the file gets reordered later. (When position ends up
   `relative` instead of `fixed`, left/top mean something completely
   different — an offset from the tile's normal in-grid position rather
   than from the viewport — which is exactly what produced the "tile
   jumps hundreds of pixels the instant a drag starts" bug this fixes.) */
.room-video-tile.room-video-tile-floating{position:fixed;aspect-ratio:auto;width:180px;height:135px;resize:both;overflow:hidden;min-width:120px;min-height:90px;max-width:90vw;max-height:90vh;box-shadow:0 10px 30px #0000008a;z-index:1200;cursor:move;touch-action:none;user-select:none}
.room-video-grid-small .room-video-tile-floating{width:130px;height:98px}
.room-video-grid-large .room-video-tile-floating{width:280px;height:210px}
.room-video-tile-floating.dragging{z-index:1205;box-shadow:0 16px 45px #000000cc;opacity:.92}
.room-video-tile-floating .room-video-controls{cursor:default}
/* Moved up to the top-left corner (default .room-video-name sits bottom-left)
   specifically while floating, purely so it stays readable above the
   bottom controls bar once hover reveals it — no longer load-bearing for
   drag hit-testing now that the whole tile is the drag surface above. */
.room-video-tile-floating .room-video-name{top:8px;bottom:auto}
.room-video-size-toggle{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.room-video-size-toggle:hover{border-color:var(--chat-accent);color:var(--chat-accent-2)}
.room-video-size-toggle .icon-svg{width:15px;height:15px}
.room-video-grid:empty{display:none;padding:0}
.room-video-tile{position:relative;aspect-ratio:4/3;background:#000;border-radius:12px;overflow:hidden}
.room-video-tile video{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.room-video-tile:fullscreen{aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.room-video-tile:fullscreen video{width:100%;height:100%;object-fit:contain}
.room-video-name{position:absolute;left:8px;bottom:8px;background:#00000080;color:#fff;font-size:11px;padding:2px 8px;border-radius:99px}
.room-video-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:6px;background:linear-gradient(transparent,#000000b0);opacity:0;transition:opacity .15s}
.room-video-tile:hover .room-video-controls,.room-video-tile:focus-within .room-video-controls{opacity:1}
.room-video-controls button{border:0;border-radius:50%;background:#000000a0;color:#fff;width:24px;height:24px;font-size:11px;line-height:1;cursor:pointer;flex-shrink:0}
.room-video-controls button.muted{background:#ef4444cc}
.room-video-controls input[type="range"]{flex:1;min-width:0;accent-color:var(--chat-accent,#8b5cf6)}
/* Always-visible top-right badge row (detach, and — self tile only —
   the watchers count) — not inside .room-video-controls, deliberately:
   that bar is hover-only, and both of these need to stay reachable
   without a hover gesture (touch devices have none at all) or a
   confusing "invisible until you happen to hover" control. */
.room-video-top-right{position:absolute;right:8px;top:8px;display:flex;align-items:center;gap:6px;z-index:2}
.room-video-tile-floating .room-video-top-right{cursor:default}
.room-video-detach{border:0;border-radius:50%;background:#00000080;color:#fff;width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.room-video-detach:hover{background:#000000a8}
.room-video-detach svg{width:14px;height:14px}
.room-video-camera-switch{display:flex;align-items:center;justify-content:center}
.room-video-camera-switch svg{width:13px;height:13px}
#rtc-camera-switch{display:flex;align-items:center;justify-content:center}
#rtc-camera-switch svg{width:15px;height:15px}
/* .active marks a tile that's currently floating, same visual convention
   the bottom control bar's own .muted uses. */
.room-video-detach.active{background:var(--chat-accent,#8b5cf6)cc}
.room-video-watchers{background:#00000080;color:#fff;font-size:11px;padding:2px 8px;border-radius:99px;white-space:nowrap;border:0;font-family:inherit;cursor:pointer}
.room-video-watchers-popover{position:absolute;right:8px;top:32px;z-index:10;background:#1a1224;border:1px solid #ffffff1a;border-radius:10px;padding:6px;min-width:170px;max-width:230px;max-height:220px;overflow-y:auto;box-shadow:0 10px 30px #0000008a}
.room-video-watcher-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:transparent;border:0;color:#fff;font-size:12px;padding:6px 8px;border-radius:6px;cursor:pointer;text-align:left;font-family:inherit}
.room-video-watcher-row:hover{background:#ffffff1a}
.room-video-watcher-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-video-watcher-eye{flex-shrink:0;opacity:.75}
.room-video-watchers-empty{margin:4px 8px;font-size:12px;color:#ffffffa0}
.room-cam-toggle{margin-left:auto;background:#00000040;border:1px solid var(--chat-line);color:var(--chat-text);width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.room-cam-toggle:hover{border-color:var(--chat-accent);color:var(--chat-accent-2)}
.room-cam-toggle.active{background:#ef4444}
.icon-svg{width:1em;height:1em;flex-shrink:0}
.composer-send{width:36px;height:36px;min-width:36px;padding:0;font-size:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-mobile-nav .icon-svg{width:20px;height:20px}
.room-cam-toggle .icon-svg,.call-btn .icon-svg,.chat-main-header .call-btn .icon-svg{width:15px;height:15px}
.chat-empty .icon svg{width:34px;height:34px}
.thread-back{display:none;background:#00000040;border:1px solid var(--chat-line);color:var(--chat-text);border-radius:50%;width:32px;height:32px;min-width:32px;padding:0;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.thread-back .icon-svg{width:16px;height:16px}
@media(max-width:900px){.thread-back{display:flex}}
#profile-modal,#report-modal,#room-locked-modal,#cam-privacy-modal,#userinfo-modal,#room-password-modal,#create-room-modal{position:fixed;inset:0;z-index:2000;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.room-locked-copy{color:var(--chat-muted);font-size:14px;margin:0}
.room-locked-email-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--chat-muted)}
.room-locked-email-label input{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:9px;padding:12px;font-size:14px;font-family:inherit}
.room-locked-feedback{font-size:13px;color:var(--chat-online);background:#16a34a1a;border-radius:8px;padding:8px 12px}
.room-locked-feedback.error{color:#f87171;background:#ef44441a}
#room-password-modal label,#create-room-modal label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--chat-muted);margin-top:4px}
#room-password-modal input,#create-room-modal input{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:9px;padding:12px;font-size:14px;font-family:inherit}
#room-password-error{font-size:13px;color:#f87171;background:#ef44441a;border-radius:8px;padding:8px 12px}
.room-create-row{background:none;border:1px dashed var(--chat-line);width:100%;font:inherit;color:inherit;text-align:left}
.room-delete-btn{background:none;border:0;color:var(--chat-muted);width:22px;height:22px;min-width:22px;padding:0;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.room-delete-btn:hover{background:#3a1620;color:#f87171}
.room-delete-btn .icon-svg{width:14px;height:14px}
#profile-modal[hidden],#report-modal[hidden],#room-locked-modal[hidden],#cam-privacy-modal[hidden],#userinfo-modal[hidden],#room-password-modal[hidden],#create-room-modal[hidden]{display:none}
.cam-privacy-options{display:flex;flex-direction:column;gap:10px}
.cam-privacy-option{display:flex;align-items:flex-start;gap:12px;text-align:left;background:var(--chat-input-bg);border:1px solid var(--chat-line);border-radius:12px;padding:14px;cursor:pointer;color:var(--chat-text)}
.cam-privacy-option:hover{border-color:var(--chat-accent)}
.cam-privacy-option .icon-svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:var(--chat-accent-2)}
.cam-privacy-option b{display:block;font-size:14px}
.cam-privacy-option span{display:block;color:var(--chat-muted);font-size:12px;margin-top:2px}
#watch-request-stack{position:fixed;top:70px;right:20px;z-index:1900;display:flex;flex-direction:column;gap:10px;width:min(300px,calc(100vw - 40px))}
.watch-request-card{background:var(--chat-panel);border:1px solid var(--chat-line);border-radius:14px;padding:14px;box-shadow:0 20px 50px #000a}
.watch-request-card p{margin:0 0 10px;font-size:13px;color:var(--chat-text)}
.watch-request-card p b{color:#fff}
.watch-request-actions{display:flex;gap:6px}
.watch-request-actions button{flex:1;border:0;border-radius:8px;padding:8px 4px;font-size:12px;font-weight:700;cursor:pointer}
.watch-request-accept{background:linear-gradient(120deg,var(--chat-accent),var(--chat-accent-2));color:#fff}
.watch-request-deny{background:var(--chat-input-bg);color:var(--chat-text);border:1px solid var(--chat-line)!important}
.watch-request-block{background:#3a1620;color:#fca5a5}
@media(max-width:560px){#watch-request-stack{top:auto;bottom:80px;right:10px;left:10px;width:auto}}
.profile-modal-card{width:min(380px,100%);max-height:90vh;overflow-y:auto;background:var(--chat-panel);border:1px solid var(--chat-line);border-radius:16px;padding:24px;box-shadow:0 30px 100px #000a;display:flex;flex-direction:column;gap:14px}
.profile-modal-header{display:flex;align-items:center;justify-content:space-between}
.profile-modal-header h3{margin:0;font:800 18px Manrope,sans-serif}
.profile-modal-header button{background:none;border:0;color:var(--chat-muted);width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.profile-modal-header button:hover{background:var(--chat-panel-2);color:#fff}
.userinfo-modal-card{width:min(900px,96vw);height:min(720px,86vh);background:var(--chat-panel);border:1px solid var(--chat-line);border-radius:16px;padding:16px;box-shadow:0 30px 100px #000a;display:flex;flex-direction:column;gap:10px}
.userinfo-modal-card .profile-modal-header{flex:none}
#userinfo-frame{flex:1;width:100%;border:0;border-radius:10px;background:#fff}
#userinfo-sidebar{position:fixed;top:56px;bottom:0;width:min(380px,92vw);background:var(--chat-panel);box-shadow:0 20px 60px #000a;z-index:55;display:flex;flex-direction:column;gap:10px;padding:16px;box-sizing:border-box;transition:transform .25s ease}
#userinfo-sidebar.userinfo-sidebar-right{right:0;border-left:1px solid var(--chat-line);transform:translateX(100%)}
#userinfo-sidebar.userinfo-sidebar-left{left:0;border-right:1px solid var(--chat-line);transform:translateX(-100%)}
#userinfo-sidebar.userinfo-sidebar-right.open,#userinfo-sidebar.userinfo-sidebar-left.open{transform:translateX(0)}
#userinfo-sidebar .profile-modal-header{flex:none}
#userinfo-sidebar-frame{flex:1;width:100%;border:0;border-radius:10px;background:#fff}
@media(max-width:900px){#userinfo-sidebar{display:none}}
.profile-modal-error{background:#3a1414;color:#f7a8a8;border-radius:9px;padding:10px 12px;font-size:12px}
.profile-modal-error[hidden]{display:none}
#profile-modal label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--chat-muted)}
#profile-modal input,#profile-modal select{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:9px;padding:11px 12px;font-size:14px}
#profile-modal label.profile-check{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--chat-text);cursor:pointer}
#profile-modal label.profile-check input{width:auto;flex:none;padding:0;border-radius:4px}
.profile-avatar-row{display:flex;align-items:center;gap:14px}
.profile-avatar-preview{width:64px;height:64px;font-size:22px;flex-shrink:0}
.profile-avatar-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.profile-avatar-actions button{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:99px;padding:7px 14px;font-size:12px;cursor:pointer}
.profile-avatar-actions button:hover{border-color:var(--chat-accent)}
.profile-avatar-actions button:disabled{opacity:.6;cursor:default}
#profile-avatar-remove-btn{color:var(--chat-muted)}
.profile-field-label{font-size:12px;color:var(--chat-muted);margin-bottom:-8px}
.profile-role-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--chat-input-bg);border:1px solid var(--chat-line);border-radius:9px;padding:12px;font-size:14px;font-weight:600}
.profile-role-row a{color:var(--chat-accent-2);font-size:13px;font-weight:700;text-decoration:none}
.profile-role-row a:hover{text-decoration:underline}
.profile-role-row a[hidden]{display:none}
.color-swatches{display:flex;flex-wrap:wrap;gap:10px}
.color-swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.color-swatch.selected{border-color:#fff;box-shadow:0 0 0 2px var(--chat-panel)}
#profile-save{margin-top:6px;background:none;border:1px solid var(--chat-accent);color:var(--chat-accent-2);border-radius:99px;padding:12px;font-weight:700;cursor:pointer;font-size:14px}
#profile-save:hover{background:#ffffff0d}
.msg-delete{background:none;border:0;color:var(--chat-muted);width:20px;height:20px;min-width:20px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:6px}
.msg-delete .icon-svg{width:13px;height:13px}
.msg-delete:hover{color:#ef4444;background:#00000040}
.thread-menu-wrap{position:relative;flex-shrink:0}
.thread-menu-btn{background:#00000040;border:1px solid var(--chat-line);color:var(--chat-text);border-radius:50%;width:34px;height:34px;min-width:34px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thread-menu-btn:hover{border-color:var(--chat-accent)}
.thread-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--chat-panel-2);border:1px solid var(--chat-line);border-radius:12px;padding:6px;min-width:190px;box-shadow:0 20px 60px #000a;z-index:20;display:flex;flex-direction:column;gap:2px}
.thread-menu[hidden]{display:none}
.thread-menu button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--chat-text);font-size:13px;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left}
.thread-menu button:hover{background:var(--chat-panel)}
.thread-menu .icon-svg{width:15px;height:15px;color:var(--chat-muted)}
.user-row .chat-avatar,.chat-msg .chat-avatar{cursor:pointer}
.user-context-menu{position:fixed;background:var(--chat-panel-2);border:1px solid var(--chat-line);border-radius:12px;padding:6px;min-width:190px;box-shadow:0 20px 60px #000a;z-index:60;display:flex;flex-direction:column;gap:2px}
.user-context-menu button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--chat-text);font-size:13px;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left;width:100%}
.user-context-menu button:hover{background:var(--chat-panel)}
.user-context-menu .icon-svg{width:15px;height:15px;color:var(--chat-muted)}
.user-context-menu button[data-action="ban"],.user-context-menu button[data-action="ban-confirm"]{color:#f87171}
.user-context-menu button[data-action="ban"] .icon-svg,.user-context-menu button[data-action="ban-confirm"] .icon-svg{color:#f87171}
.composer-autocomplete-list{position:fixed;background:var(--chat-panel-2);border:1px solid var(--chat-line);border-radius:12px;padding:6px;min-width:190px;max-width:260px;box-shadow:0 20px 60px #000a;z-index:60;display:flex;flex-direction:column;gap:2px}
.composer-autocomplete-option{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--chat-text);font-size:13px;padding:7px 8px;border-radius:8px;cursor:pointer;text-align:left;width:100%;overflow:hidden}
.composer-autocomplete-option span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer-autocomplete-option:hover,.composer-autocomplete-option.active{background:var(--chat-panel)}
.composer-autocomplete-option .chat-avatar{width:26px;height:26px;font-size:12px;flex-shrink:0}
#thread-block-btn .icon-svg{color:#ef4444}
.user-row-favorite{margin-left:auto;background:#00000040;border:1px solid var(--chat-line);border-radius:50%;width:30px;height:30px;min-width:30px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--chat-muted)}
.user-row-favorite:hover{border-color:#eab308;color:#eab308}
.user-row-favorite.active{color:#eab308;border-color:#eab308}
.user-row-favorite .icon-svg{width:15px;height:15px}
#favorites-only-toggle{color:var(--chat-muted)}
#favorites-only-toggle .icon-svg{width:13px;height:13px}
#favorites-only-toggle.active{background:#eab308;border-color:#eab308;color:#1a1224}
.user-row-streaming{background:none;border:0;color:#ef4444;padding:0;width:14px;height:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;animation:badgeFlash 1.4s ease-in-out infinite}
.user-row-streaming .icon-svg{width:14px;height:14px}
.user-row-streaming.active{color:#22c55e;animation:none}
/* .room-video-tile-close is now just one of the buttons inside
   .room-video-controls (styled generically by that rule above) rather than
   a separately absolutely-positioned corner button. */
.msg-report{background:none;border:0;color:var(--chat-muted);width:20px;height:20px;min-width:20px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:6px}
.msg-report .icon-svg{width:13px;height:13px}
.msg-report:hover{color:#eab308;background:#00000040}
.msg-reply{background:none;border:0;color:var(--chat-muted);width:20px;height:20px;min-width:20px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:6px}
.msg-reply .icon-svg{width:13px;height:13px}
.msg-reply:hover{color:var(--chat-accent-2);background:#00000040}
/* Quoted-original block shown above a reply's own text inside its bubble
   (see chat-app.js's renderReplyQuote()) — self/other variants swap the
   accent bar + text colors to stay readable against each bubble's own
   background (self bubbles use the purple gradient, chat.css's
   .chat-msg.self .bubble). */
.reply-quote{display:block;background:#00000030;border-left:3px solid var(--chat-accent);border-radius:6px;padding:4px 8px;margin-bottom:6px;font-size:12px;cursor:pointer;max-width:100%}
.reply-quote b{display:block;color:var(--chat-accent-2);font-size:11px;font-weight:700}
.reply-quote span{display:block;color:var(--chat-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-quote:hover{background:#00000050}
.chat-msg.self .reply-quote{background:#ffffff26}
.chat-msg.self .reply-quote b{color:#fff}
.chat-msg.self .reply-quote span{color:#ffffffb0}
/* Briefly marks a message reply-quote's click-to-scroll target (see
   scrollToMessage()) so it's obvious which one it jumped to. */
@keyframes flashHighlight{0%,100%{background:transparent}30%{background:#8b5cf640}}
.chat-msg.flash-highlight .bubble{animation:flashHighlight 1.2s ease-out}
/* Preview banner shown above the composer while replyingTo is set (see
   chat-app.js's startReply()/closeReplyPreview()) — [hidden] relies on
   this file's own global [hidden]{display:none!important} rule at the
   top, not a rule of its own. */
.reply-preview{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--chat-line);background:var(--chat-panel-2)}
.reply-preview-content{flex:1;min-width:0;border-left:3px solid var(--chat-accent);padding-left:8px}
.reply-preview-content b{display:block;font-size:12px;color:var(--chat-accent-2);font-weight:700}
.reply-preview-content span{display:block;font-size:12px;color:var(--chat-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-preview button{background:none;border:0;color:var(--chat-muted);cursor:pointer;width:24px;height:24px;min-width:24px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}
.reply-preview button:hover{color:#ef4444;background:#00000040}
.reply-preview .icon-svg{width:14px;height:14px}
.report-message-preview{background:var(--chat-input-bg);border-left:3px solid var(--chat-line);border-radius:0 8px 8px 0;padding:10px 12px;font-size:13px;color:var(--chat-muted);max-height:80px;overflow-y:auto}
.report-message-preview[hidden]{display:none}
.report-reasons{display:flex;flex-direction:column;gap:2px}
.report-reasons label{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 6px;border-radius:8px;cursor:pointer}
.report-reasons label:hover{background:var(--chat-panel-2)}
.report-reasons input{accent-color:var(--chat-accent)}
.report-details-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--chat-muted)}
#report-details{background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:9px;padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical}
#report-submit{margin-top:2px;background:none;border:1px solid var(--chat-accent);color:var(--chat-accent-2);border-radius:99px;padding:12px;font-weight:700;cursor:pointer;font-size:14px}
#report-submit:hover{background:#ffffff0d}
.role-badge{display:inline-flex;align-items:center;gap:3px;margin-left:5px;padding:2px 6px 2px 5px;border-radius:99px;background:#22c55e26;color:#22c55e;vertical-align:middle;font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.4}
.country-flag{width:16px;height:12px;margin-left:5px;vertical-align:middle;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000001a}
.role-badge .icon-svg{width:10px;height:10px;flex-shrink:0}
.role-badge .icon-svg{width:13px;height:13px}
.account-badge{display:inline-flex;align-items:center;margin-left:5px;vertical-align:middle}
.account-badge .icon-svg{width:12px;height:12px;flex-shrink:0}
.account-badge-guest{color:var(--chat-muted)}
.account-badge-registered{color:#22c55e}
.chat-gate-card,.profile-modal-card,.thread-menu,.chat-user-dropdown,.emoji-panel{border-radius:var(--chat-radius)}
.chat-gate-card .brand-name,.chat-topbar .brand-name{color:var(--chat-text)}
.gif-search{width:100%;background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-text);border-radius:99px;padding:9px 14px;font-size:13px;outline:none;box-sizing:border-box}
.gif-search:focus{border-color:var(--chat-accent)}
.gif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));grid-auto-rows:auto;gap:6px;max-height:280px;overflow-y:auto;overflow-x:hidden;align-content:start}
/* Square thumbnail without `aspect-ratio`: that property silently fails on
   older engines (pre-2021 Safari/WebViews), and since the visible <img> is
   position:absolute (out of flow), a failed aspect-ratio leaves this button
   at height:0 with nothing to size it — the image then renders at its own
   native pixel size instead of the intended square, and every thumbnail
   stacks at the same top-left corner: exactly "too big and overlapping".
   height:0 + padding-bottom:100% is the pre-aspect-ratio technique for a
   1:1 box and works in every browser, because percentage padding is always
   resolved against the container's WIDTH (even for top/bottom padding). */
.picker-body .gif-option{position:relative;display:block;width:100%;height:0;padding-bottom:100%;background:#000;border:0;border-radius:8px;margin:0;cursor:pointer;overflow:hidden}
.picker-body .gif-option img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.picker-body .gif-option:hover{outline:2px solid var(--chat-accent)}
/* Placed after the base .emoji-panel rule on purpose: it's unconditional
   (no media query) and appears later in the file than this override used
   to, so — same specificity, later source order wins — it silently
   cancelled this block on every viewport, mobile included. Real bug: the
   panel kept its fixed 320px desktop width and absolute positioning on
   phones, regularly overflowing off the right edge of the screen. */
@media(max-width:480px){.emoji-panel{position:fixed;left:16px;right:16px;bottom:64px;width:auto;max-width:none}}
.gif-empty{text-align:center;color:var(--chat-muted);font-size:12px;padding:20px 0}
.chat-gate-tabs{display:flex;gap:4px;background:#00000030;border-radius:99px;padding:4px;margin-bottom:6px}
.chat-gate-tab{flex:1;background:none;border:0;color:var(--chat-muted);font-size:13px;font-weight:700;padding:9px 0;border-radius:99px;cursor:pointer}
.chat-gate-tab:hover{color:var(--chat-text)}
.chat-gate-tab.active{background:linear-gradient(120deg,var(--chat-accent),var(--chat-accent-2));color:#fff}
.chat-gate-panel[hidden]{display:none}
.chat-gate-switch{text-align:center;color:var(--chat-muted);font-size:13px;margin-top:14px}
.chat-gate-switch a{color:var(--chat-accent-2)}
.theme-toggle{display:flex;gap:8px}
.theme-toggle button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--chat-input-bg);border:1px solid var(--chat-line);color:var(--chat-muted);border-radius:10px;padding:10px;font-size:13px;cursor:pointer}
.theme-toggle button:hover{color:var(--chat-text)}
.theme-toggle button.active{border-color:var(--chat-accent);color:#fff;background:linear-gradient(120deg,var(--chat-accent),var(--chat-accent-2))}
.room-welcome{margin:12px 20px 0;padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.room-welcome[hidden]{display:none}
.room-welcome-info{background:#1c2a4a;color:#93c5fd;border:1px solid #3b5a99}
.room-welcome-success{background:#173a2b;color:#86efac;border:1px solid #2f6b4a}
.room-welcome-warning{background:#3a2f0e;color:#fde68a;border:1px solid #7a5f1f}
.room-welcome-danger{background:#3a1620;color:#fca5a5;border:1px solid #7a2c3a}
:root[data-theme="light"] .room-welcome-info{background:#eaf1ff;color:#1d4ed8;border-color:#bfd7ff}
:root[data-theme="light"] .room-welcome-success{background:#e9fbf0;color:#15803d;border-color:#a7e8bf}
:root[data-theme="light"] .room-welcome-warning{background:#fff8e6;color:#92720c;border-color:#f0dd9e}
:root[data-theme="light"] .room-welcome-danger{background:#fdecec;color:#b91c1c;border-color:#f3b8ba}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]) .room-welcome-info{background:#eaf1ff;color:#1d4ed8;border-color:#bfd7ff}:root:not([data-theme="dark"]):not([data-theme="light"]) .room-welcome-success{background:#e9fbf0;color:#15803d;border-color:#a7e8bf}:root:not([data-theme="dark"]):not([data-theme="light"]) .room-welcome-warning{background:#fff8e6;color:#92720c;border-color:#f0dd9e}:root:not([data-theme="dark"]):not([data-theme="light"]) .room-welcome-danger{background:#fdecec;color:#b91c1c;border-color:#f3b8ba}}