:root{
--bg:#0a0c1a; --bg-2:#0d0f22; --surface:#171a30; --surface-2:#1f2340; --surface-3:#2a2f52;
--border:#2b2f4d; --text:#f1f2f8; --text-muted:#9a9fc0; --text-faint:#6b7099;
--accent:#5B6EF5; --accent-strong:#7686FF; --accent-ink:#0b0c1e;
--online:#3ed598; --danger:#ef5d60; --info:#7c9cff;
--bubble-bg:#3d4160; --bubble-bg-mine:#3a4a86;
--rank-owner:#F4FF3D; --rank-manager:#FF9224; --rank-moderator:#FFFFFF; --rank-member:#3B82F6; --rank-guest:#23D46B;
--radius-sm:6px; --radius-md:10px; --radius-lg:16px; --message-font-size:14px; --nickname-font-size:14px;
--userlist-width:232px; --userlist-font-size:13px;
--font-display:'Barlow Semi Condensed',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
--shadow-lg: 0 20px 50px rgba(0,0,0,.55); --wallpaper:none; --wallpaper-overlay:none;
}
[data-theme="light"]{
--bg:#eef0f7; --bg-2:#f7f8fc; --surface:#ffffff; --surface-2:#eef0f7; --surface-3:#e1e4f2;
--border:#dcdfef; --text:#161826; --text-muted:#5b6088; --text-faint:#8a8fb5;
--bubble-bg:#e7e9f5; --bubble-bg-mine:#dbe2ff; --accent-ink:#0b0c1e;
--shadow-lg: 0 20px 50px rgba(20,23,28,.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
margin:0;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;
background-image: var(--wallpaper), repeating-linear-gradient(115deg, rgba(120,110,255,.05) 0px, rgba(120,110,255,.05) 2px, transparent 2px, transparent 60px), radial-gradient(ellipse at 30% 0%, rgba(91,110,245,.20), transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(120,50,200,.16), transparent 55%);
background-size: cover, auto, auto, auto;
background-position: center, 0 0, 0 0, 0 0;
background-repeat: no-repeat, repeat, no-repeat, no-repeat;
background-attachment: fixed, scroll, scroll, scroll;
background-color: var(--bg-2);
}
button{font-family:var(--font-body);cursor:pointer;}
input,textarea,select{font-family:var(--font-body);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}
#app{
max-width:1020px;margin:0 auto;height:100vh;
display:grid;grid-template-columns:1fr var(--userlist-width,232px);grid-template-rows:58px 1fr;
background:rgba(10,12,26,.55);border-left:1px solid var(--border);border-right:1px solid var(--border);
overflow:hidden;position:relative;backdrop-filter: blur(2px);
}
[data-theme="light"] #app{ background:rgba(255,255,255,.65); }
@media (max-width:820px){
#app{grid-template-columns:1fr 0;}
#sidebar-right{position:fixed;top:58px;bottom:0;right:0;width:var(--userlist-width,240px);z-index:40;transition:transform .22s ease;transform:translateX(100%);}
#app.show-right #sidebar-right{transform:translateX(0);box-shadow:var(--shadow-lg);}
}
/* ---------- Header ---------- */
header{
grid-column:1/3;display:flex;align-items:center;gap:12px;padding:0 16px;
background:var(--surface);border-bottom:1px solid var(--border);min-width:0;
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.2px;white-space:nowrap;}
.brand .bars{display:flex;align-items:flex-end;gap:2px;height:16px;}
.brand .parlo-home-link{display:inline-flex;align-items:center;justify-content:center;color:inherit;text-decoration:none;cursor:pointer;border-radius:4px;outline:none;transition:filter .15s ease,transform .15s ease;flex:0 0 auto;}
.brand .parlo-home-link:hover{filter:brightness(1.25);transform:translateY(-1px);}
.brand .parlo-home-link:focus-visible{box-shadow:0 0 0 2px var(--accent);}
.brand .bars i{display:block;width:3px;background:var(--accent);border-radius:1px;animation:pulse 1.6s ease-in-out infinite;}
.brand .bars i:nth-child(1){height:6px;animation-delay:0s;}
.brand .bars i:nth-child(2){height:14px;animation-delay:.2s;}
.brand .bars i:nth-child(3){height:9px;animation-delay:.4s;}
.brand .bars i:nth-child(4){height:16px;animation-delay:.6s;}
@keyframes pulse{0%,100%{opacity:.45;transform:scaleY(.7);}50%{opacity:1;transform:scaleY(1);}}
.icon-btn{background:transparent;border:1px solid transparent;color:var(--text-muted);width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}
.mobile-toggle{display:none;}
@media (max-width:820px){.mobile-toggle{display:flex;}}
@media (min-width:821px){
#app.users-collapsed{grid-template-columns:1fr 0;}
#app.users-collapsed #sidebar-right{position:absolute;top:58px;bottom:0;right:0;width:var(--userlist-width,240px);z-index:60;transform:translateX(100%);transition:transform .22s ease;box-shadow:none;}
#app.users-collapsed.show-right #sidebar-right{transform:translateX(0);box-shadow:var(--shadow-lg);}
#app.users-collapsed #btn-toggle-right{display:flex;}
}
.readout{
margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
background:var(--surface-2);border:1px solid var(--border);padding:5px 10px;border-radius:999px;white-space:nowrap;
}
.readout .dot{width:7px;height:7px;border-radius:50%;background:var(--online);box-shadow:0 0 0 3px rgba(62,213,152,.18);}
.me-chip{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);white-space:nowrap;}
.me-chip span{font-size:13px;font-weight:600;}
/* ---------- Avatars with rank-colored dot badge ---------- */
.avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:12px;color:#0b0c1e;flex-shrink:0;background:#5B6EF5;object-fit:cover;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.avatar-wrap{position:relative;display:inline-flex;flex-shrink:0;}
.rank-dot{position:absolute;right:-1px;bottom:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px rgba(0,0,0,.28);z-index:2;}
.rank-owner-dot{background:var(--rank-owner);}
.rank-manager-dot{background:var(--rank-manager);}
.rank-moderator-dot{background:var(--rank-moderator);}
.rank-member-dot{background:var(--rank-member);}
.rank-guest-dot{background:var(--rank-guest);}
/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;min-width:0;position:relative;
background-image:var(--wallpaper-overlay),var(--wallpaper);
background-size:cover,cover;
background-position:center,center;
background-repeat:no-repeat,no-repeat;
}
.channel-header{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;}
.room-combo select{
appearance:none;-webkit-appearance:none;background:var(--surface-2) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border:1px solid var(--border);color:var(--text);font-family:var(--font-display);font-weight:600;font-size:13.5px;
padding:8px 30px 8px 14px;border-radius:999px;min-width:200px;
}
.room-combo select:focus{outline:2px solid var(--accent);}
.typing-indicator{font-size:11.5px;color:var(--text-faint);font-style:italic;}
.filter-toggle{font-size:12px;color:var(--text-muted);background:transparent;border:1px solid var(--border);border-radius:999px;padding:4px 10px;display:flex;align-items:center;gap:5px;}
.filter-toggle.active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);}
.pinned-banner{display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(91,110,245,.12);border-bottom:1px solid var(--border);font-size:12.5px;}
.pinned-banner #pinned-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pin-close{background:none;border:none;color:var(--text-muted);}
#message-list{flex:1;overflow-y:auto;padding:14px 18px;}
.msg{display:flex;gap:10px;padding:7px 4px;border-radius:var(--radius-md);position:relative;}
.msg:hover{background:rgba(255,255,255,.03);}
.msg .avatar-wrap .avatar{width:34px;height:34px;font-size:13px;}
.msg-body{min-width:0;flex:1;}
.msg-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;} /* centrado (antes «baseline», que dejaba la etiqueta de rango y la hora más bajas que el nick) */
.msg-nick{font-weight:700;font-size:var(--nickname-font-size,14px);}
.rank-tag{font-family:var(--font-mono);font-size:9.5px;line-height:1.3;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;font-weight:700;}
.rank-tag.rank-owner{background:rgba(244,255,61,.16);color:var(--rank-owner);}
.rank-tag.rank-manager{background:rgba(255,146,36,.16);color:var(--rank-manager);}
.rank-tag.rank-moderator{background:rgba(255,255,255,.14);color:var(--rank-moderator);}
.rank-tag.rank-member{background:rgba(59,130,246,.16);color:var(--rank-member);}
.rank-tag.rank-guest{background:rgba(35,212,107,.16);color:var(--rank-guest);}
.msg-time{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);}
.msg-bubble{display:inline-block;max-width:min(70%,520px);background:var(--bubble-bg);border-radius:16px;padding:8px 14px;margin-top:3px;font-size:var(--message-font-size,14.5px);line-height:1.5;word-break:break-word;}
.msg-bubble.mine{background:var(--bubble-bg-mine);}
.msg-bubble a{color:#bcd0ff;text-decoration:underline;}
.msg-bubble img.inline-emoji{height:20px;vertical-align:-5px;}
.msg-img{max-width:280px;border-radius:var(--radius-md);display:block;border:1px solid var(--border);}
.msg-system{color:var(--text-faint);font-size:calc(var(--message-font-size) - 1px);font-style:italic;padding:4px 4px;}
.msg-actions{position:absolute;top:-14px;right:6px;display:none;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;gap:1px;}
.msg:hover .msg-actions{display:none !important;}
.msg-actions button{background:transparent;border:none;font-size:14px;width:26px;height:26px;border-radius:50%;color:var(--text-muted);}
.msg-actions button:hover{background:var(--surface-3);color:var(--text);}
.msg-actions button.starred{color:var(--rank-owner);}
.msg-actions button.pinned{color:var(--accent-strong);}
.reactions{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap;}
.reaction-pill{font-size:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:1px 8px;display:flex;gap:4px;align-items:center;}
.reaction-pill.mine{border-color:var(--accent);background:rgba(91,110,245,.15);}
/* ---------- Menú contextual de mensajes: clic izquierdo / derecho / pulsación larga ---------- */
.message-context-menu{position:fixed;z-index:260;display:none;min-width:190px;max-width:min(260px,calc(100vw - 12px));padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 42px rgba(0,0,0,.5);font-size:13px;}
.message-context-menu.open{display:block;}
.message-context-item{display:flex;width:100%;align-items:center;text-align:left;border:0;background:transparent;color:var(--text);padding:8px 10px;border-radius:7px;font-size:12.5px;}
.message-context-item:hover{background:var(--surface-2);}
.message-context-item.danger{color:#ff9ca0;}
.message-context-separator{height:1px;background:var(--border);margin:4px 3px;}
.message-context-reactions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:2px;}
.message-context-reactions button{height:34px;border:0;border-radius:7px;background:var(--surface-2);font-size:18px;}
.message-context-reactions button:hover{background:var(--surface-3);}
.poll-box{background:var(--bubble-bg);border-radius:16px;padding:10px 12px;margin-top:3px;max-width:340px;}
.poll-q{font-weight:600;font-size:13.5px;margin-bottom:8px;}
.poll-opt{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 9px;margin-bottom:5px;cursor:pointer;overflow:hidden;font-size:13px;background:rgba(0,0,0,.15);}
.poll-opt .fill{position:absolute;inset:0;background:rgba(91,110,245,.28);width:0%;z-index:0;}
.poll-opt .label{position:relative;z-index:1;display:flex;justify-content:space-between;gap:6px;}
.poll-opt.voted{border-color:var(--accent);}
.poll-total{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);margin-top:2px;}
.pending-banner{background:rgba(244,255,61,.08);border:1px solid var(--rank-owner);color:var(--rank-owner);font-size:12.5px;padding:8px 12px;border-radius:var(--radius-sm);margin-bottom:10px;}
/* ---------- Reaction bar (live events) ---------- */
.reaction-bar{display:flex;align-items:center;gap:6px;padding:6px 14px;flex-shrink:0;}
.reaction-bar .typing-indicator{margin-left:4px;min-width:0;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1 auto;}
.reaction-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;width:38px;height:38px;font-size:17px;display:flex;align-items:center;justify-content:center;transition:transform .1s;}
.reaction-btn:hover{background:var(--surface-3);}
.reaction-btn:active{transform:scale(.85);}
.firework-btn{margin-left:0;background:rgba(244,255,61,.1);border-color:var(--rank-owner);flex:0 0 auto;}
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:150;}
#burst-layer{position:fixed;inset:0;pointer-events:none;z-index:151;overflow:hidden;}
.floating-burst{position:absolute;bottom:70px;font-size:26px;animation:floatUp 2.4s ease-out forwards;}
@keyframes floatUp{
0%{transform:translateY(0) translateX(0) scale(.6);opacity:0;}
10%{opacity:1;}
100%{transform:translateY(-70vh) translateX(var(--drift,20px)) scale(1.15);opacity:0;}
}
.composer{border-top:1px solid var(--border);padding:8px 14px 14px;flex-shrink:0;position:relative;}
.composer-bar{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px 7px 6px 10px;}
.composer-bar textarea{flex:1;background:transparent;border:none;outline:none;color:var(--text);resize:none;max-height:110px;font-size:15px;line-height:1.4;padding:6px 42px 6px 0;}
.composer-bar{position:relative;}
.msg-bubble.msg-bubble-big{font-size:36px;line-height:1.15;font-weight:800;max-width:96%;padding:10px 16px;letter-spacing:-.02em;}
.composer-bar>.icon-btn{width:36px;height:36px;font-size:18px;color:var(--text);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:10px;flex:0 0 36px;}
.composer-bar>.icon-btn:hover{background:rgba(91,110,245,.18);border-color:rgba(91,110,245,.38);color:#fff;}
.send-btn{background:var(--accent);color:#fff;border:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.send-btn:hover{background:var(--accent-strong);}
.composer-note{font-size:11px;color:var(--text-faint);margin-top:5px;font-family:var(--font-mono);}
.audio-recorder-panel{margin-top:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 10px;}
.audio-recording-state,.audio-preview-state{display:flex;align-items:center;gap:9px;min-width:0;}
.audio-record-dot{width:10px;height:10px;border-radius:50%;background:#ff4d5a;box-shadow:0 0 0 0 rgba(255,77,90,.5);animation:audioPulse 1.3s infinite;}
@keyframes audioPulse{0%{box-shadow:0 0 0 0 rgba(255,77,90,.5)}70%{box-shadow:0 0 0 7px rgba(255,77,90,0)}100%{box-shadow:0 0 0 0 rgba(255,77,90,0)}}
.audio-record-time{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-right:auto;}
.audio-preview-state audio{height:34px;min-width:180px;flex:1;}
.audio-preview-info{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);white-space:nowrap;}
.msg-audio{display:flex;align-items:center;gap:8px;max-width:min(90%,420px);background:var(--bubble-bg);border-radius:16px;padding:8px 10px;margin-top:3px;}
.msg-audio.mine{background:var(--bubble-bg-mine);}
.msg-audio audio{width:min(330px,65vw);height:36px;}
.audio-load-btn{border:0;background:transparent;color:var(--text);font:inherit;font-size:13px;padding:4px 6px;cursor:pointer;}
.audio-load-btn:hover{color:var(--accent-strong);}
.audio-load-btn:disabled{cursor:wait;opacity:.7;}
.msg-audio-loading,.msg-audio-error{font-size:12px;color:var(--text-faint);}
#btn-audio.recording{background:rgba(255,77,90,.18);color:#ff6a75;border-color:#ff6a75;}
@media (max-width:640px){.audio-preview-state{flex-wrap:wrap}.audio-preview-state audio{flex-basis:100%;width:100%}.audio-preview-info{margin-right:auto}}
.picker{position:absolute;bottom:64px;left:14px;width:300px;max-height:320px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden;z-index:30;}
.picker.open{display:flex;}
.picker-tabs{display:flex;border-bottom:1px solid var(--border);}
.picker-tabs button{flex:1;background:transparent;border:none;color:var(--text-muted);padding:8px;font-size:12px;font-weight:600;}
.picker-tabs button.active{color:var(--accent-strong);border-bottom:2px solid var(--accent);}
.picker-gif-search{padding:8px;border-bottom:1px solid var(--border);}
.picker-gif-search input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:7px 9px;font-size:13px;}
.picker-gif-attribution{padding:5px 10px 7px;border-top:1px solid var(--border);text-align:right;font-size:10px;line-height:1.2;}
.picker-gif-attribution a{color:var(--text-faint);text-decoration:none;font-weight:700;letter-spacing:.02em;}
.picker-gif-attribution a:hover{text-decoration:underline;}
.picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px;overflow-y:auto;}
.picker-grid.gif-grid{grid-template-columns:repeat(3,1fr);}
.picker-grid button{background:none;border:none;font-size:19px;border-radius:6px;padding:4px 0;}
.picker-grid button:hover{background:var(--surface-2);}
.picker-grid img{width:26px;height:26px;object-fit:contain;}
.picker-grid.gif-grid img{width:100%;height:70px;object-fit:cover;border-radius:6px;}
.picker-empty{padding:16px;text-align:center;color:var(--text-faint);font-size:12px;grid-column:1/-1;}
.modal-backdrop{position:fixed;inset:0;background:rgba(6,7,16,.65);display:none;align-items:center;justify-content:center;z-index:100;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;width:340px;max-width:90vw;box-shadow:var(--shadow-lg);}
.modal h3{margin:0 0 12px;font-family:var(--font-display);font-size:17px;}
.modal label{display:block;font-size:12px;color:var(--text-muted);margin:10px 0 4px;}
.modal input[type=text],.modal input[type=password]{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:8px 9px;font-size:13.5px;}
.modal .opt-row{display:flex;gap:6px;margin-bottom:6px;}
.modal .opt-row input{flex:1;}
.modal .opt-row button{background:var(--surface-2);border:1px solid var(--border);color:var(--danger);border-radius:var(--radius-sm);width:30px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:8px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;}
.btn:hover{background:var(--surface-3);}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent;}
.btn-sm{padding:5px 10px;font-size:12.5px;}
.auth-tabs{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;margin-bottom:6px;}
.auth-tabs button{flex:1;background:none;border:none;color:var(--text-muted);padding:6px;border-radius:999px;font-size:12.5px;font-weight:600;}
.auth-tabs button.active{background:var(--accent);color:#fff;}
.auth-error{color:var(--danger);font-size:12.5px;min-height:16px;}
/* ---------- Sidebar right: users ---------- */
#sidebar-right{background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;}
/* Cabecera de la barra de usuarios, al estilo de las salas de xat.com: una franja de color
sólido con el nombre del chat, en vez de un simple contador discreto. */
.userlist-banner{
background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;
font-size:14.5px;letter-spacing:.02em;text-align:center;padding:10px 10px;
text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;
}
.userlist-banner-text{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.connection-bar{padding:12px 7px 8px;}
.connection-bar .lbl{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.06em;}
.online-total-marker{display:flex;align-items:center;gap:7px;padding:8px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 0%,var(--surface-2) 100%);border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));border-radius:var(--radius-sm);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 11%,transparent),0 8px 22px rgba(0,0,0,.14),0 0 20px color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text);position:relative;overflow:hidden;}
.online-total-dot{width:8px;height:8px;min-width:8px;min-height:8px;max-width:8px;max-height:8px;aspect-ratio:1 / 1;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),0 0 12px color-mix(in srgb,var(--accent) 48%,transparent);display:block;flex:0 0 8px;box-sizing:border-box;align-self:center;position:relative;top:0;transform-origin:center center;}
.online-total-value{display:inline-flex;align-items:baseline;justify-content:flex-start;gap:6px;flex:0 1 auto;min-width:0;font-family:var(--font-display);font-size:20px;font-weight:800;line-height:1;letter-spacing:0;white-space:nowrap;}
.online-total-value.count-4plus{font-size:19px;gap:5px;}
.online-total-value.count-5plus{font-size:18px;gap:5px;}
.online-total-label,#conn-count-lbl{display:inline-block;margin:0;padding:0;border:0;font:inherit;line-height:1;white-space:nowrap;vertical-align:baseline;}
.online-total-label{color:var(--text);text-shadow:0 0 10px color-mix(in srgb,var(--accent) 22%,transparent);}
#conn-count-lbl{min-width:1ch;font-variant-numeric:tabular-nums;color:var(--accent);text-align:left;text-shadow:0 0 15px color-mix(in srgb,var(--accent) 35%,transparent);}
.online-total-marker .sidebar-close-users{margin-left:auto;align-self:center;flex:0 0 auto;min-width:18px;padding-left:2px;padding-right:2px;}
#user-list{list-style:none;margin:0;padding:0 10px 14px;}
.user-group-title{font-family:var(--font-display);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);padding:10px 4px 4px;}
.user-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:var(--radius-sm);position:relative;}
.user-row:hover{background:var(--surface-2);}
.user-row .avatar{width:26px;height:26px;font-size:11px;}
.user-row .nm{font-size:var(--userlist-font-size,13px);font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rank-select{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:10px;border-radius:5px;padding:1px 2px;font-family:var(--font-mono);max-width:66px;}
.more-btn{background:none;border:none;color:var(--text-faint);font-size:15px;width:20px;flex-shrink:0;}
.more-btn:hover{color:var(--text);}
/* ---------- Popup: menú de moderación por usuario ---------- */
.rank-menu{position:fixed;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:120;display:none;flex-direction:column;min-width:170px;overflow:hidden;}
.rank-menu.open{display:flex;}
.rank-menu .menu-title{font-size:11px;color:var(--text-faint);padding:8px 10px 4px;font-family:var(--font-mono);}
.rank-menu button{background:none;border:none;color:var(--text);text-align:left;padding:8px 10px;font-size:12.5px;display:flex;align-items:center;gap:7px;}
.rank-menu button:hover{background:var(--surface-3);}
.rank-menu button.danger{color:var(--danger);}
.rank-menu .menu-rank-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--border);font-size:11.5px;color:var(--text-muted);}
.rank-menu .menu-rank-row span{flex:1;}
.rank-menu .menu-rank-row select{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:4px 6px;font-size:11.5px;max-width:110px;}
.dm-composer textarea:disabled{opacity:.65;cursor:not-allowed;}
.dm-composer .send-btn:disabled{opacity:.35;cursor:not-allowed;}
.banned-item{display:flex;align-items:center;gap:8px;}
.banned-item .reason{color:var(--text-faint);font-size:11.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ---------- Mensajes privados ---------- */
.dm-icon-btn{position:relative;}
.dm-badge{position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:var(--font-mono);}
#dm-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:80;transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column;}
#dm-drawer.open{transform:translateX(0);}
.dm-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
#dm-conversations{list-style:none;margin:0;padding:6px;}
.dm-convo-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--radius-md);cursor:pointer;}
.dm-convo-row:hover{background:var(--surface-2);}
.dm-convo-row .dm-meta{flex:1;min-width:0;}
.dm-convo-row .dm-name{font-size:13.5px;font-weight:600;}
.dm-convo-row .dm-preview{font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-convo-row .dm-unread{background:var(--accent);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.dm-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;}
.dm-msg{max-width:78%;padding:8px 12px;border-radius:16px;font-size:13.5px;line-height:1.45;background:var(--bubble-bg);align-self:flex-start;word-break:break-word;}
.dm-msg.mine{background:var(--bubble-bg-mine);align-self:flex-end;}
.dm-msg .dm-time{display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--text-faint);margin-top:3px;}
.dm-composer{margin:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);}
.dm-composer textarea{flex:1;background:transparent;border:none;outline:none;color:var(--text);resize:none;max-height:90px;font-size:13.5px;padding:8px 4px 8px 12px;}
.dm-user-btn{background:none;border:none;color:var(--text-faint);font-size:13px;width:20px;flex-shrink:0;}
.dm-user-btn:hover{color:var(--accent-strong);}
/* ---------- Settings drawer ---------- */
#settings-drawer{position:fixed;top:0;right:0;bottom:0;width:680px;max-width:96vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:80;transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column;}
#settings-drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.drawer-head h2{font-family:var(--font-display);font-size:18px;margin:0;}
.settings-layout{display:grid;grid-template-columns:160px minmax(0,1fr);flex:1;min-height:0;}
.settings-tabs{display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--border);border-bottom:0;flex-shrink:0;padding:10px 8px;background:color-mix(in srgb,var(--surface-2) 52%,transparent);}
.settings-tabs button{width:100%;background:none;border:0;border-left:3px solid transparent;border-radius:8px;color:var(--text-muted);padding:10px 10px;text-align:left;font-size:12.5px;font-weight:600;line-height:1.25;white-space:normal;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;}
.settings-tabs button:hover{background:var(--surface-2);color:var(--text);}
.settings-tabs button.active{color:var(--accent-strong);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.settings-body{min-width:0;overflow-y:auto;padding:18px;}
.settings-panel{display:none;}
.settings-panel.active{display:block;}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.field-row:last-child{border-bottom:none;}
.field-row .lbl{font-size:13.5px;}
.field-row .sub{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.switch{position:relative;width:38px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;inset:0;background:var(--surface-3);border-radius:999px;transition:.2s;}
.switch .slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider:before{transform:translateX(16px);}
textarea.field-textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:9px;font-size:13px;font-family:var(--font-mono);min-height:70px;}
textarea.rules-editor{min-height:150px;resize:vertical;line-height:1.45;font-family:var(--font-body);}
.rules-modal{width:560px;max-width:92vw;max-height:82vh;display:flex;flex-direction:column;}
.rules-modal-content{white-space:pre-wrap;overflow:auto;max-height:58vh;padding:14px 15px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;line-height:1.6;overflow-wrap:anywhere;}
input.field-text,select.field-text{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:8px 9px;font-size:13.5px;}
.color-row{display:flex;gap:10px;align-items:center;}
.color-row input[type=color]{width:34px;height:34px;border:none;background:none;padding:0;border-radius:8px;overflow:hidden;}
.list-manager{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.list-manager .item{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;font-size:12.5px;}
.list-manager .item img{width:20px;height:20px;object-fit:contain;}
.list-manager .item .code{font-family:var(--font-mono);flex:1;}
.list-manager .item button{background:none;border:none;color:var(--danger);}
.add-row{display:flex;gap:6px;margin-top:8px;}
.add-row input{flex:1;}
.embed-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--online);white-space:pre-wrap;word-break:break-all;}
.section-title{font-family:var(--font-display);font-weight:700;font-size:14.5px;margin:18px 0 4px;}
.section-title:first-child{margin-top:0;}
.help{font-size:12px;color:var(--text-muted);line-height:1.5;margin-bottom:8px;}
.pending-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;margin-bottom:6px;font-size:12.5px;}
.pending-item .row{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--surface-3);color:var(--text);border:1px solid var(--border);padding:9px 16px;border-radius:999px;font-size:13px;z-index:200;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s;pointer-events:none;}
.toast.show{opacity:1;}
/* ---------- Nuevas opciones de administración / autenticación ---------- */
:root{--rank-offline:#FF7D82;}
.setting-locked{opacity:.55;}
.small-setting-label{font-size:12px;color:var(--text-muted);display:block;margin-top:10px;margin-bottom:5px;}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--text-faint);font-size:11px;margin:12px 0;}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border);flex:1;}
.captcha-wrap{margin-top:8px;min-height:70px;}
#turnstile-widget{min-height:5px;}
.send-btn:disabled,.icon-btn:disabled,.dm-user-btn:disabled{opacity:.35;cursor:not-allowed;}
#composer-input:disabled{opacity:.65;cursor:not-allowed;}
#composer-input.mute-countdown-active{min-height:58px;height:58px!important;max-height:74px;font-size:13px;line-height:1.32;padding-top:8px;padding-bottom:8px;white-space:pre-wrap;overflow:hidden;opacity:.9;}
#composer-input.mute-countdown-active::placeholder{color:var(--text);opacity:.92;white-space:normal;}
.is-embedded #composer-input.mute-countdown-active{min-height:56px;height:56px!important;max-height:62px;font-size:11.5px;line-height:1.28;padding:6px 4px;}
@media (max-width:520px){#composer-input.mute-countdown-active{min-height:60px;height:60px!important;font-size:12px;line-height:1.3;}}
/* ---------- Registro de moderación ---------- */
.moderation-log-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.moderation-log-title-row .btn{flex-shrink:0;}
.moderation-log-status{margin-top:7px;min-height:18px;}
.moderation-log-list{display:flex;flex-direction:column;gap:7px;margin-top:7px;}
.modlog-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 10px;}
.modlog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.modlog-main{min-width:0;flex:1;font-size:12.8px;line-height:1.45;}
.modlog-time{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);white-space:nowrap;padding-top:2px;}
.modlog-action{display:inline-flex;align-items:center;margin:0 4px;padding:2px 6px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);font-size:10.5px;font-weight:700;color:var(--accent-strong);vertical-align:1px;}
.modlog-target{font-weight:600;}
.modlog-details{margin-top:5px;color:var(--text-muted);font-size:11.5px;line-height:1.45;word-break:break-word;}
.modlog-code{font-family:var(--font-mono);font-size:9.5px;color:var(--text-faint);margin-top:5px;}
.modlog-empty{padding:10px 0;}
@media (max-width:520px){.modlog-head{flex-direction:column;gap:3px}.modlog-time{white-space:normal}}
/* ================= v8: responsive + perfil/cuenta ================= */
#app{width:100%;max-width:none;height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr) 260px;}
header{min-width:0;overflow:hidden;}
.auth-header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.auth-link{display:inline-flex;background:none;border:0;color:var(--accent-strong);font-size:12.5px;padding:7px 0;text-decoration:underline;text-underline-offset:3px;}
.auth-title{margin:6px 0 4px;font-family:var(--font-display);}
.join-modal{width:min(430px,calc(100vw - 24px));max-height:92dvh;overflow:auto;}
.profile-avatar-editor{display:flex;align-items:center;gap:14px;padding:10px 0 4px;}
.profile-avatar-preview{width:72px;height:72px;border-radius:50%;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:22px;overflow:hidden;flex:0 0 72px;border:2px solid var(--border);}
.profile-avatar-preview img{width:100%;height:100%;object-fit:cover;}
.profile-avatar-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;}
.profile-avatar-actions .help{flex-basis:100%;margin:0;}
.account-guest-card{display:flex;flex-direction:column;gap:7px;margin-top:18px;padding:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);font-size:12.5px;color:var(--text-muted);}
.account-guest-card strong{color:var(--text);font-size:13.5px;}
.color-row span{font-size:13px;color:var(--text-muted);}
#sidebar-right{min-width:0;}
#user-list{padding-bottom:24px;}
/* El botón de usuarios nunca queda fuera del viewport en modo estrecho/embed. */
@media (max-width:980px){
#app{grid-template-columns:minmax(0,1fr) 0;grid-template-rows:56px minmax(0,1fr);}
header{grid-column:1/3;height:56px;padding:0 8px;gap:6px;}
.mobile-toggle{display:flex !important;order:3;background:var(--surface-2);border-color:var(--border);}
.readout{margin-left:auto;order:2;padding:5px 8px;font-size:11px;}
.brand{order:1;font-size:16px;min-width:0;}
.auth-header-actions{order:4;}
#me-chip{order:4;max-width:130px;overflow:hidden;}
#me-chip #me-nick{max-width:82px;overflow:hidden;text-overflow:ellipsis;}
#btn-settings{order:5;} #btn-logout{order:6;} #btn-dm{order:5;} #btn-fullscreen{display:none !important;}
#sidebar-right{display:block !important;position:fixed;top:56px;bottom:0;right:0;width:min(330px,88vw);z-index:70;transform:translateX(105%);transition:transform .2s ease;background:var(--surface);box-shadow:none;}
#app.show-right #sidebar-right{transform:translateX(0);box-shadow:var(--shadow-lg);}
#app.users-collapsed #sidebar-right{position:fixed;top:56px;bottom:0;right:0;width:min(330px,88vw);transform:translateX(105%);}
#app.users-collapsed.show-right #sidebar-right{transform:translateX(0);}
.main{grid-column:1/2;min-height:0;overflow:hidden;}
.channel-header{padding:7px 9px;gap:6px;flex-wrap:nowrap;}
.room-combo{min-width:0;flex:0 1 auto;}
.room-combo select{min-width:0;width:min(230px,48vw);font-size:12.5px;padding-left:10px;}
.typing-indicator{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#message-list{padding:10px 10px;min-height:0;}
.reaction-bar{overflow-x:auto;padding:5px 8px;scrollbar-width:none;}
.composer{padding-left:8px;padding-right:8px;}
.picker{left:8px;right:8px;width:auto;max-width:420px;}
}
@media (max-width:620px){
body{overflow:hidden;background-attachment:scroll;}
#app{height:100dvh;border:0;}
header{height:52px;grid-template-columns:auto;gap:4px;padding:0 6px;}
.brand{font-size:0;width:34px;overflow:hidden;}
.brand .bars{margin:auto;}
.readout{font-size:0;padding:5px 7px;gap:5px;}
.readout #readout-text{font-size:10.5px;}
.auth-header-actions{gap:4px;}
.auth-header-actions .btn{padding:5px 7px;font-size:11px;}
#me-chip{padding-right:4px;max-width:42px;}
#me-chip #me-nick{display:none;}
.icon-btn{width:32px;height:32px;}
#app{grid-template-rows:52px minmax(0,1fr);}
#sidebar-right{top:52px;width:min(360px,94vw);}
#app.users-collapsed #sidebar-right{top:52px;width:min(360px,94vw);}
.channel-header{padding:6px;}
.room-combo select{width:47vw;max-width:190px;font-size:11.5px;}
.filter-toggle{font-size:0;width:32px;height:32px;padding:0;justify-content:center;}
.filter-toggle::first-letter{font-size:14px;}
#message-list{padding:7px 6px;}
.msg{gap:7px;padding:6px 2px;}
.msg .avatar-wrap .avatar{width:30px !important;height:30px !important;}
.msg-nick{font-size:13px;}
.msg-bubble{font-size:13px;max-width:100%;}
.reaction-bar{padding:4px 6px;}
.composer{padding:5px 6px 7px;}
.composer-bar{display:flex;flex-wrap:wrap;align-items:center;padding:5px;gap:4px;border-radius:12px;}
.composer-bar>.icon-btn{order:1;width:30px;height:30px;}
.composer-bar textarea{order:10;flex:1 1 calc(100% - 44px);min-width:0;padding:7px 6px;max-height:84px;}
.composer-bar .send-btn{order:11;width:38px;height:38px;flex:0 0 38px;}
.picker{bottom:112px;max-height:50dvh;}
.picker-grid{grid-template-columns:repeat(7,1fr);}
#settings-drawer,#dm-drawer{width:100vw;max-width:100vw;}
.settings-layout{grid-template-columns:128px minmax(0,1fr);}
.settings-tabs{padding:8px 6px;}
.settings-tabs button{padding:9px 8px;font-size:11.5px;}
.settings-body{padding:12px;}
.modal{max-width:calc(100vw - 20px);}
.profile-avatar-editor{align-items:flex-start;}
}
@media (max-width:390px){
.auth-header-actions .btn{padding:5px 5px;font-size:10.5px;}
.readout{display:none;}
.room-combo select{width:55vw;}
.picker-grid{grid-template-columns:repeat(6,1fr);}
.settings-layout{grid-template-columns:116px minmax(0,1fr);}
.settings-tabs button{padding:8px 7px;font-size:11px;}
}
.sidebar-close-users{display:none;background:none;border:0;color:var(--text-muted);font-size:14px;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center;}
.sidebar-close-users:hover{background:var(--surface-3);color:var(--text);}
@media (max-width:980px){.sidebar-close-users{display:flex;}}
/* ================= v9: layout compacto, embed tipo xat y adjuntos ================= */
.msg-nick.moderation-trigger,.user-row .nm.moderation-trigger{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s ease,opacity .15s ease;}
.msg-nick.moderation-trigger:hover,.user-row .nm.moderation-trigger:hover{text-decoration-color:currentColor;opacity:.9;}
.msg-media-shell{margin-top:4px;max-width:min(100%,560px);}
.msg-media-loading{display:flex;align-items:center;min-height:54px;padding:10px 12px;border:1px dashed var(--border);border-radius:10px;color:var(--text-muted);font-size:12px;background:var(--surface-2);}
.msg-media-loading.error{color:var(--danger);}
.msg-video{display:block;width:min(100%,520px);max-height:420px;border-radius:10px;border:1px solid var(--border);background:#000;}
.msg-img{max-width:min(100%,420px);max-height:420px;object-fit:contain;}
.file-upload-status{padding:4px 8px 0;font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#btn-file.uploading{animation:pulse .8s ease-in-out infinite;}
/* Un poco más de espacio útil también fuera del embed. */
#app{grid-template-rows:48px minmax(0,1fr);}
header{height:48px;padding:0 12px;gap:8px;}
.channel-header{padding:6px 12px;min-height:38px;}
.connection-bar{padding:7px 7px 4px;}
.online-total-marker{padding:5px 9px;}
#user-list{padding:0 7px 12px;}
.user-row{gap:6px;padding:4px 3px;}
/* Fuera del iframe, tablet/móvil usa cajón de usuarios y controles compactos. */
@media (max-width:980px){
html:not(.is-embedded) #app{grid-template-columns:minmax(0,1fr) 0;grid-template-rows:46px minmax(0,1fr);}
html:not(.is-embedded) header{height:46px;padding:0 6px;gap:4px;}
html:not(.is-embedded) #sidebar-right{top:46px;}
html:not(.is-embedded) #app.users-collapsed #sidebar-right{top:46px;}
html:not(.is-embedded) .readout{padding:4px 7px;font-size:10px;}
html:not(.is-embedded) .brand{font-size:15px;}
}
@media (max-width:620px){
html:not(.is-embedded) #app{grid-template-rows:44px minmax(0,1fr);}
html:not(.is-embedded) header{height:44px;}
html:not(.is-embedded) #sidebar-right,html:not(.is-embedded) #app.users-collapsed #sidebar-right{top:44px;}
html:not(.is-embedded) .readout{display:none;}
html:not(.is-embedded) .composer-bar{display:grid !important;grid-template-columns:34px 34px 34px 34px 34px minmax(70px,1fr) 38px;gap:4px;padding:4px;}
html:not(.is-embedded) .composer-bar>.icon-btn{order:initial;width:34px;height:34px;font-size:17px;}
html:not(.is-embedded) .composer-bar textarea{order:initial;min-width:0;padding:6px 38px 6px 4px;max-height:78px;}
html:not(.is-embedded) .composer-bar .send-btn{order:initial;width:36px;height:36px;}
html:not(.is-embedded) .channel-header{padding:4px 5px;min-height:34px;}
html:not(.is-embedded) #message-list{padding:6px 5px;}
html:not(.is-embedded) .msg-bubble{max-width:96%;}
}
/* ================= v10: moderación, pausa y administración ================= */
.moderation-trigger-avatar{cursor:pointer;transition:transform .12s ease,filter .12s ease;outline:none}
.moderation-trigger-avatar:hover,.moderation-trigger-avatar:focus{transform:scale(1.06);filter:brightness(1.12)}
.pause-banner{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px;background:rgba(239,93,96,.12);border-bottom:1px solid rgba(239,93,96,.35);color:#ffb4b6;font-size:11.5px;min-height:28px;text-align:center}
.pause-banner strong{font-size:11.5px;color:#ffd5d6}.pause-banner span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* el staff puede hablar durante la pausa, pero ve un recordatorio persistente */
.pause-banner.staff-reminder{background:rgba(255,193,7,.16);border-bottom-color:rgba(255,193,7,.50);color:#ffe8a3;}
.pause-banner.staff-reminder strong{color:#fff2b8;font-weight:900;}
.manager-setting{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:4px}
#btn-pause-chat{color:#ffd166}.is-embedded #btn-pause-chat{width:27px;height:27px;font-size:12px}
body.viewer-staff .msg-actions{z-index:4}
@media (hover:none),(max-width:720px){body.viewer-staff .msg-actions{display:none !important}.msg{align-items:flex-start}}
.is-embedded .pause-banner{min-height:22px;padding:2px 5px;font-size:9.5px}.is-embedded .pause-banner strong{font-size:9.5px}
.msg-bubble code{font-family:var(--font-mono);background:rgba(0,0,0,.22);padding:1px 4px;border-radius:4px;font-size:.92em}.msg-bubble strong{font-weight:700}.msg-bubble del{opacity:.75}.report-row.resolved{opacity:.58}.report-row .manager-row-main{display:flex;flex-direction:column;gap:2px;min-width:0}.report-row .manager-row-main span,.report-row .manager-row-main small{font-size:11px;color:var(--text-muted);overflow-wrap:anywhere}
/* archivo de mensajes */
.archive-filters{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin:8px 0 10px}.archive-date-label{font-size:11px;color:var(--text-muted);display:flex;flex-direction:column;gap:4px}.archive-results{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto;padding-right:2px}.archive-row{padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.025)}.archive-row-head{display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:12px}.archive-row-head span{color:var(--text-muted);font-size:10px;white-space:nowrap}.archive-row-text{margin-top:4px;font-size:12px;line-height:1.35;white-space:pre-wrap;word-break:break-word}.archive-row-meta{margin-top:3px;font-size:10px;color:var(--text-muted);display:flex;gap:7px;flex-wrap:wrap}.archive-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}.archive-pager span{font-size:11px;color:var(--text-muted);text-align:center}.archive-pager button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:560px){.archive-filters{grid-template-columns:1fr}.archive-results{max-height:45dvh}}
/* ---------- Perfil público / ignorar ---------- */
.user-profile-trigger{cursor:pointer;}
.user-profile-trigger:hover{filter:brightness(1.12);}
.user-profile-modal{position:relative;max-width:430px;}
.modal-x{position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;border-radius:9px;background:var(--surface-2);color:var(--text);font-size:15px;}
.user-profile-hero{display:flex;align-items:center;gap:18px;padding:8px 4px 18px;}
.user-profile-big-avatar{width:168px;height:168px;border-radius:50%;overflow:hidden;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:42px;font-weight:700;flex:0 0 168px;border:3px solid var(--border);}
.user-profile-big-avatar img{width:100%;height:100%;object-fit:cover;}
.user-profile-copy h3{font-size:22px;margin:0 0 8px;word-break:break-word;}
.user-profile-rank{display:flex;align-items:center;gap:7px;color:var(--text-muted);font-size:13px;}
.rank-dot-inline{display:inline-block;width:10px;height:10px;border-radius:50%;}
.user-profile-actions{display:flex;gap:8px;flex-wrap:wrap;}
.user-profile-actions .btn{flex:1 1 150px;justify-content:center;}
/* ---------- Aviso fuerte de mensajes privados ---------- */
.dm-icon-btn.has-unread{color:#fff;background:rgba(239,93,96,.20)!important;border-color:rgba(239,93,96,.55)!important;animation:dmPulse 1.15s ease-in-out infinite;}
.dm-badge{top:-4px!important;right:-5px!important;min-width:19px!important;height:19px!important;font-size:10px!important;box-shadow:0 0 0 2px var(--surface),0 0 14px rgba(239,93,96,.7);}
.dm-attention{position:fixed;top:48px;left:50%;transform:translateX(-50%);z-index:120;max-width:min(92vw,520px);min-height:42px;padding:10px 16px;border:1px solid rgba(91,110,245,.6);border-radius:999px;background:linear-gradient(135deg,#5868f2,#7c4ee5);color:#fff;font-weight:800;font-size:13.5px;box-shadow:0 12px 36px rgba(0,0,0,.42);align-items:center;justify-content:center;cursor:pointer;}
.dm-attention.pop{animation:dmPop .32s ease-out;}
@keyframes dmPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,93,96,.15)}50%{box-shadow:0 0 0 6px rgba(239,93,96,.08)}}
@keyframes dmPop{from{opacity:0;transform:translate(-50%,-12px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.is-embedded .dm-attention{top:38px;min-height:34px;padding:7px 12px;font-size:11.5px;}
@media (max-width:600px){
.user-profile-hero{flex-direction:column;text-align:center;}
.user-profile-big-avatar{width:158px;height:158px;flex-basis:158px;}
.user-profile-rank{justify-content:center;}
.dm-attention{top:44px;border-radius:12px;width:calc(100vw - 18px);}
}
/* ================= v12: menciones, respuestas, usuarios, banderas y webhooks ================= */
.mention{display:inline-block;padding:0 3px;border-radius:4px;background:rgba(91,110,245,.14);color:#b8c2ff;font-weight:700}.mention-self{background:rgba(255,196,72,.2);color:#ffd66b}
.user-country-flag{font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.msg-head .user-country-flag{font-size:13px;margin-left:1px}.is-embedded .user-country-flag{font-size:11px}
.user-country-flag img{width:16px;height:12px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.25);vertical-align:middle;display:block;}
.is-embedded .user-country-flag img{width:13px;height:10px;}
.reply-composer-bar{display:flex;align-items:center;gap:8px;margin:0 0 5px;padding:6px 9px;border-left:3px solid var(--accent);background:rgba(91,110,245,.10);border-radius:8px;font-size:11.5px;min-width:0}.reply-composer-bar>div{display:flex;flex-direction:column;min-width:0;flex:1}.reply-label{color:var(--text-muted);font-size:10px}.reply-composer-bar #reply-composer-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-composer-bar button{width:25px;height:25px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);font-size:15px}
.msg-reply-preview{display:flex;flex-direction:column;align-items:flex-start;width:min(420px,94%);margin:2px 0 5px;padding:7px 10px;border:0;border-left:3px solid var(--accent);border-radius:7px;background:rgba(255,255,255,.055);color:var(--text-muted);text-align:left;cursor:pointer;line-height:1.35}.msg-reply-preview strong{font-size:11.5px;color:var(--text)}.msg-reply-preview span{max-width:100%;font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-highlight{animation:replyFlash 1.5s ease}@keyframes replyFlash{0%,100%{background:transparent}35%{background:rgba(91,110,245,.16)}}
.mention-suggestions{position:absolute;left:14px;bottom:66px;z-index:55;display:flex;flex-direction:column;width:min(330px,calc(100% - 28px));max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:0 14px 34px rgba(0,0,0,.38);padding:4px}.mention-option{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;font-size:12px;cursor:pointer}.mention-option:hover{background:rgba(91,110,245,.15)}.mention-option .avatar-wrap{flex:0 0 auto}
.admin-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;margin:8px 0 10px}.admin-users-list,.webhook-list{display:flex;flex-direction:column;gap:6px}.admin-user-row,.webhook-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:8px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025)}.admin-user-info,.webhook-info{min-width:150px;flex:1 1 150px;}.admin-user-title,.webhook-row-url{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-user-meta,.webhook-row-meta{margin-top:2px;font-size:10.5px;color:var(--text-muted);overflow-wrap:anywhere}.admin-user-row-actions,.webhook-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:0 0 auto;}.admin-protected{font-size:10px;color:var(--text-faint);padding:4px 6px}.btn-danger{background:rgba(239,93,96,.14)!important;border-color:rgba(239,93,96,.35)!important;color:#ffb4b6!important}.admin-user-modal{max-width:470px}.admin-user-modal>label{display:block;margin:9px 0 4px;font-size:11px;color:var(--text-muted)}
.webhook-editor{display:flex;flex-direction:column;gap:5px;margin:7px 0 12px;padding:10px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02)}.webhook-events{display:flex;flex-wrap:wrap;gap:7px 12px;margin:5px 0;font-size:11px;color:var(--text-muted)}.webhook-events label{display:flex;gap:5px;align-items:center}.webhook-row{align-items:flex-start}.webhook-actions{flex:0 0 auto}
#me-chip.user-profile-trigger{cursor:pointer}
.is-embedded .reply-composer-bar{margin:0 0 3px;padding:3px 6px;font-size:9.5px}.is-embedded .reply-label{font-size:8.5px}.is-embedded .mention-suggestions{left:5px;bottom:45px;width:min(280px,calc(100% - 10px));max-height:46dvh}.is-embedded .mention-option{padding:4px 6px;font-size:10px}.is-embedded .msg-reply-preview{padding:5px 8px;margin-bottom:3px}.is-embedded .msg-reply-preview strong{font-size:10.5px}.is-embedded .msg-reply-preview span{font-size:11.5px}
@media(max-width:620px){.admin-toolbar{grid-template-columns:1fr 1fr}.admin-toolbar input{grid-column:1/-1}.admin-user-row,.webhook-row{align-items:flex-start;flex-wrap:wrap}.admin-user-row-actions,.webhook-actions{width:100%;justify-content:flex-start}.mention-suggestions{left:6px;bottom:62px;width:calc(100% - 12px)}}
/* usuarios baneados visibles al final de la lista */
.banned-users-separator{
list-style:none;
margin:7px 2px 3px;
padding:5px 4px 3px;
border-top:1px solid rgba(166,111,68,.28);
color:#a66f44;
font-size:9px;
font-weight:900;
letter-spacing:.12em;
}
.user-row.banned-user-row{
background:rgba(126,78,43,.09);
border:1px solid rgba(166,111,68,.16);
opacity:.9;
}
.user-row.banned-user-row:hover{background:rgba(126,78,43,.14);}
.user-row.banned-user-row .avatar{filter:grayscale(.45) sepia(.2);}
.banned-presence-badge,.muted-presence-badge{
flex:none;
border-radius:999px;
padding:2px 5px;
font-size:8px;
font-weight:900;
line-height:1.2;
letter-spacing:.05em;
}
.banned-presence-badge{
color:#d9a37a;
border:1px solid rgba(166,111,68,.38);
background:rgba(126,78,43,.18);
}
.muted-presence-badge{
color:#eab308;
border:1px solid rgba(234,179,8,.25);
background:rgba(234,179,8,.09);
}
/* Pantalla de bloqueo real para usuarios baneados. */
.ban-screen{
display:none;
position:fixed;
inset:0;
z-index:100000;
background:#070a10;
align-items:center;
justify-content:center;
padding:20px;
}
.ban-screen.open{display:flex;}
.ban-screen-card{
width:min(520px,100%);
text-align:center;
background:#121722;
border:1px solid rgba(166,111,68,.42);
border-radius:18px;
padding:30px 24px;
box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.ban-screen-icon{font-size:50px;line-height:1;}
.ban-screen h1{margin:12px 0 8px;color:#d39a6d;font-size:26px;letter-spacing:.03em;}
.ban-screen p{color:#c7c9d3;line-height:1.55;margin:0 0 18px;}
body.access-banned #app,
body.access-banned .chat-shell,
body.access-banned main,
body.access-kicked #app,
body.access-kicked .chat-shell,
body.access-kicked main{visibility:hidden!important;}
body.access-banned #ban-screen,
body.access-kicked #kick-screen{visibility:visible!important;}
@media(max-width:620px){
.banned-presence-badge,.muted-presence-badge{font-size:7px;padding:2px 4px;}
.ban-screen-card{padding:24px 16px;}
.ban-screen h1{font-size:22px;}
}
/* ================= v13.1: acciones directas en perfil ================= */
.profile-moderation-section{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);}
.profile-moderation-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.055em;margin-bottom:9px;}
.profile-rank-actions,.profile-moderation-actions{display:flex;flex-wrap:wrap;gap:7px;}
.profile-rank-actions{margin-bottom:8px;}
.profile-rank-action{border-color:color-mix(in srgb,var(--accent) 38%,var(--border));}
.profile-moderation-actions .btn,.profile-rank-actions .btn{min-height:34px;justify-content:center;}
@media (max-width:520px){
.profile-rank-actions .btn,.profile-moderation-actions .btn{flex:1 1 calc(50% - 7px);}
}
/* ================= v14: reportes, bot y ajuste de insignias ================= */
/* La insignia de rango queda pegada a la esquina del avatar, igual que en la lista lateral. */
.msg>.avatar-wrap{width:34px;height:34px;flex:0 0 34px;align-self:flex-start;line-height:0}
.user-row>.avatar-wrap{width:26px;height:26px;flex:0 0 26px;line-height:0}
.msg>.avatar-wrap .rank-dot,.user-row>.avatar-wrap .rank-dot{right:-1px;bottom:0}
@media(max-width:720px){.msg>.avatar-wrap{width:30px;height:30px;flex-basis:30px}}
.is-embedded .msg>.avatar-wrap{width:28px;height:28px;flex-basis:28px}
.is-embedded .user-row>.avatar-wrap{width:22px;height:22px;flex-basis:22px}
.report-alert-btn{position:relative}
.reports-alert-badge,.reports-tab-badge{align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef5d60;color:#fff;font:800 10px/1 var(--font-mono)}
.reports-alert-badge{position:absolute;top:-5px;right:-6px;box-shadow:0 0 0 2px var(--surface),0 0 14px rgba(239,93,96,.65)}
.report-alert-btn.has-alert{color:#fff;background:rgba(239,93,96,.17)!important;border-color:rgba(239,93,96,.55)!important;animation:reportPulse 1.25s ease-in-out infinite}
@keyframes reportPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,93,96,.12)}50%{box-shadow:0 0 0 6px rgba(239,93,96,.08)}}
.reports-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.reports-summary{margin:7px 0 9px;padding:7px 9px;border:1px solid rgba(239,93,96,.22);border-radius:9px;background:rgba(239,93,96,.06);color:#ffb4b6;font-size:11px;font-weight:700}
.reports-list{gap:9px}
.report-card{padding:10px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025)}
.report-card-head{display:flex;align-items:center;gap:9px}.report-card-title{display:flex;flex-direction:column;min-width:0;flex:1}.report-card-title strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-card-title span{font-size:10px;color:var(--text-muted)}
.report-reason{margin-top:8px;font-size:11.5px;color:#ffd4d5}.report-message-preview{margin-top:6px;padding:7px 8px;border-left:3px solid rgba(239,93,96,.55);border-radius:7px;background:rgba(0,0,0,.12);font-size:11px;line-height:1.35;white-space:pre-wrap;word-break:break-word;color:var(--text-muted)}
.report-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.report-actions .btn{font-size:10.5px;padding:5px 8px}
.reports-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:120px;color:var(--text-muted);text-align:center}.reports-empty span{font-size:28px}.reports-empty strong{color:var(--text);font-size:13px}.reports-empty small{font-size:10.5px}
.bot-subtitle{margin-top:14px!important}.bot-small-textarea{min-height:74px}.bot-grid{display:grid;grid-template-columns:1fr 110px;gap:8px;margin-top:8px}.bot-grid label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--text-muted)}
@media(max-width:520px){.bot-grid{grid-template-columns:1fr}.report-actions .btn{flex:1 1 130px}}
.is-embedded .report-alert-btn{width:27px;height:27px;font-size:12px}.is-embedded .reports-alert-badge{min-width:15px;height:15px;font-size:8px;top:-4px;right:-5px}
/* presencia offline reciente */
.user-row.offline-user-row{background:rgba(255,125,130,.035);}
.user-row.offline-user-row:hover{background:rgba(255,125,130,.08);}
.user-row.offline-user-row .avatar{filter:saturate(.72);opacity:.9;}
.user-row.offline-user-row .nm{color:var(--rank-offline)!important;}
.offline-presence-dot{background:var(--rank-offline)!important;}
.offline-presence-badge{font-size:8px;font-weight:800;letter-spacing:.06em;color:var(--rank-offline);background:rgba(255,125,130,.11);border:1px solid rgba(255,125,130,.28);border-radius:999px;padding:2px 5px;white-space:nowrap;}
.offline-users-separator{list-style:none;margin:7px 2px 3px;padding-top:6px;border-top:1px solid rgba(255,125,130,.16);font-size:8px;font-weight:800;letter-spacing:.12em;color:var(--rank-offline);}
.is-embedded .offline-presence-badge{font-size:7px;padding:1px 3px;}
/* ================= Embed: cabecera ordenada, ancho configurable y contador de usuarios siempre visible =================
Sustituye a los bloques de versiones anteriores (v13/v14/v14.2), que quedaban superpuestos y
generaban tamaños y orden de botones inconsistentes dentro del iframe. Este es el único bloque
de layout de embed a partir de ahora. */
body.viewer-guest #me-chip{display:flex;}
body.viewer-guest #btn-dm{display:flex;}
#btn-toggle-right.mobile-toggle{display:flex;}
.is-embedded #app,
.is-embedded #app.users-collapsed.show-right{
/* En embeds la columna de usuarios usa 160px por defecto en todos los planes. */
grid-template-columns:minmax(0,1fr) 160px !important;
grid-template-rows:34px minmax(0,1fr) !important;
height:100dvh;
}
/* La barra de usuarios se puede plegar del todo: cuando está oculta, el contador de
conectados se traslada junto al nombre del chat en la cabecera (ver .header-online-count),
así no se desperdicia una columna entera solo para mostrar un número. */
.is-embedded #app.users-collapsed:not(.show-right){
grid-template-columns:minmax(0,1fr) 0 !important;
}
.is-embedded #app.users-collapsed:not(.show-right) #sidebar-right{
display:none !important;
}
.is-embedded .header-online-count{display:none;}
.is-embedded #app.users-collapsed:not(.show-right) .header-online-count{
display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:10px;font-weight:700;
color:var(--text);white-space:nowrap;padding:2px 6px;
}
.header-online-count .online-total-dot{width:10px;height:10px;min-width:10px;min-height:10px;max-width:10px;max-height:10px;aspect-ratio:1 / 1;flex:0 0 10px;border-radius:50%;box-sizing:border-box;}
.is-embedded header{
grid-column:1 !important;
grid-row:1 !important;
height:34px !important;
min-height:34px !important;
padding:0 6px !important;
gap:4px !important;
overflow:hidden;
}
.is-embedded .main{ grid-column:1 !important; grid-row:2 !important; min-width:0; min-height:0; }
.is-embedded #sidebar-right,
.is-embedded #app.users-collapsed.show-right #sidebar-right{
display:flex !important;
flex-direction:column;
position:relative !important;
grid-column:2 !important;
grid-row:1 / 3 !important;
top:auto !important; right:auto !important; bottom:auto !important;
width:auto !important; height:auto !important;
min-width:0 !important;
transform:none !important;
transition:none !important;
box-shadow:none !important;
z-index:2 !important;
overflow-y:auto;
overflow-x:hidden;
border-left:1px solid var(--border);
background:var(--surface);
}
/* Cabecera: tamaño uniforme para todos los botones y un orden fijo y legible. */
.is-embedded header>.icon-btn{width:27px;height:27px;font-size:13px;flex:0 0 auto;}
.is-embedded .brand{
order:1; font-size:12px; font-weight:700; gap:5px; width:auto; flex:1 1 auto; min-width:0;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.is-embedded .brand .bars{height:13px;transform:scale(.82);flex:0 0 auto;}
.is-embedded .readout{display:none !important;}
.is-embedded #btn-fullscreen{display:none !important;}
.is-embedded #btn-dm{order:2;flex:0 0 auto;}
.is-embedded #btn-reports-alert{order:3;flex:0 0 auto;}
.is-embedded #btn-pause-chat{order:4;flex:0 0 auto;}
.is-embedded #btn-toggle-right{display:flex !important;order:5;background:var(--surface-2);border-color:var(--border);flex:0 0 auto;}
.is-embedded .sidebar-close-users{display:flex !important;}
.is-embedded .auth-header-actions{order:6;margin-left:auto;gap:2px;min-width:0;flex:0 0 auto;}
.is-embedded .auth-header-actions .btn{padding:3px 6px;font-size:9.5px;min-height:25px;white-space:nowrap;}
.is-embedded #me-chip{order:7;margin-left:auto;width:27px;max-width:27px;height:27px;padding:2px;overflow:visible;flex:0 0 27px;}
.is-embedded #me-chip #me-nick{display:none;}
.is-embedded #me-chip .avatar-wrap,.is-embedded #me-chip .avatar{width:21px !important;height:21px !important;}
.is-embedded #btn-settings{order:8;flex:0 0 auto;}
.is-embedded #btn-logout{order:9;flex:0 0 auto;}
/* Columna de contactos: banner con el nombre del chat + cabecera fija con el contador + lista debajo. */
.is-embedded .userlist-banner{
flex:0 0 auto;height:24px;min-height:24px;display:flex;align-items:center;justify-content:center;
padding:0 6px;font-size:10px;position:sticky;top:0;z-index:5;
}
.is-embedded .connection-bar{position:sticky;top:24px;z-index:4;padding:0;border-bottom:1px solid var(--border);background:var(--surface);flex:0 0 auto;}
.is-embedded .online-total-marker{height:32px;min-height:32px;padding:0 7px;border:0;border-radius:0;background:var(--surface);display:flex;align-items:center;gap:7px;box-shadow:none;}
.is-embedded .online-total-value{gap:5px;font-size:14px;font-weight:800;line-height:1;justify-content:flex-start;align-items:baseline;flex:1 1 auto;}
.is-embedded #sidebar-right .online-total-dot{width:8px;height:8px;min-width:8px;min-height:8px;max-width:8px;max-height:8px;flex:0 0 8px;align-self:center;position:relative;top:0;transform-origin:center center;}
.is-embedded .online-total-label,.is-embedded #conn-count-lbl{font-size:inherit;line-height:1;}
.is-embedded #user-list{padding:3px 4px 8px;flex:1 1 auto;}
.is-embedded .user-row{min-height:29px;padding:3px 2px;gap:4px;}
.is-embedded .user-row .avatar-wrap{display:inline-flex !important;width:22px;height:22px;flex-basis:22px;}
.is-embedded .user-row .avatar{width:22px;height:22px;font-size:9px;}
.is-embedded .user-row .rank-dot,.is-embedded .msg .rank-dot{width:8px;height:8px;border-width:1px;}
.is-embedded .user-row .nm{font-size:var(--userlist-font-size,10.5px);}
.is-embedded .dm-user-btn{display:inline-flex !important;width:19px;height:22px;align-items:center;justify-content:center;font-size:11px;}
/* Sala, mensajes y compositor: proporción ancha tipo chat clásico. */
.is-embedded .channel-header{min-height:31px;padding:3px 6px;gap:5px;}
.is-embedded .room-combo select{min-width:0;width:min(235px,100%);font-size:10.5px;padding:5px 25px 5px 9px;}
.is-embedded .typing-indicator{font-size:9.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.is-embedded .reaction-bar .typing-indicator{max-width:none;margin-left:4px;flex:1 1 auto;}
.is-embedded .filter-toggle{height:25px;padding:2px 6px;font-size:10px;white-space:nowrap;}
.is-embedded #message-list{padding:5px 6px 3px;}
.is-embedded .msg{gap:7px;padding:4px 2px;}
.is-embedded .msg .avatar-wrap .avatar{width:30px;height:30px;font-size:11px;}
.is-embedded .msg>.avatar-wrap{width:30px;height:30px;flex-basis:30px;}
.is-embedded .msg-nick{font-size:calc(var(--nickname-font-size,14px) - 2px);}
.is-embedded .rank-tag{font-size:7.5px;padding:1px 4px;}
.is-embedded .msg-time{font-size:8.5px;}
.is-embedded .msg-bubble{font-size:calc(var(--message-font-size,14.5px) - 1.5px);line-height:1.4;max-width:100%;padding:6px 10px;}
.is-embedded .reaction-bar{padding:3px 6px;gap:4px;min-height:28px;overflow-x:auto;scrollbar-width:none;}
.is-embedded .reaction-btn{width:31px;height:31px;font-size:15px;}
.is-embedded .composer{padding:3px 5px 5px;}
/* El número de herramientas visibles cambia según el plan. Flex evita reservar columnas vacías
cuando GIF/archivo/audio/encuestas están ocultos y mantiene siempre el campo de texto ancho. */
.is-embedded .composer-bar{display:flex !important;align-items:center;flex-wrap:nowrap;gap:3px;padding:3px 4px;border-radius:10px;min-width:0;}
.is-embedded .composer-bar>.icon-btn{width:31px;height:31px;font-size:16px;order:initial;flex:0 0 31px;}
.is-embedded .composer-bar textarea{order:initial;flex:1 1 auto;min-width:60px;width:auto;padding:6px 8px;font-size:13px;line-height:1.35;max-height:62px;}
.is-embedded .msg-bubble.msg-bubble-big{font-size:30px;line-height:1.12;padding:8px 11px;}
.is-embedded .composer-bar .send-btn{order:initial;width:34px;height:34px;flex:0 0 34px;margin-left:1px;}
.is-embedded .composer-note,.is-embedded .file-upload-status{font-size:9.5px;padding-left:3px;}
.is-embedded .picker{left:5px;right:5px;bottom:48px;width:auto;max-width:360px;max-height:58dvh;}
.is-embedded .picker-grid{grid-template-columns:repeat(7,minmax(30px,1fr));}
/* Embeds muy estrechos: la columna de contactos se hace más compacta, pero el contador nunca se pierde. */
@media (max-width:560px){
.is-embedded #app,
.is-embedded #app.users-collapsed.show-right{grid-template-columns:minmax(0,1fr) 122px !important;}
.is-embedded #app.users-collapsed:not(.show-right){grid-template-columns:minmax(0,1fr) 0 !important;}
.is-embedded .user-row .avatar-wrap{display:inline-flex !important;width:20px;height:20px;flex-basis:20px;}
.is-embedded .user-row .avatar{width:20px !important;height:20px !important;}
.is-embedded .user-row .nm{font-size:9px;}
.is-embedded .dm-user-btn{display:inline-flex !important;width:16px;font-size:9px;}
.is-embedded .online-total-label{font-size:0;}
.is-embedded .online-total-label::after{content:none;}
.is-embedded .brand{font-size:0;flex:0 0 18px;gap:0;}
.is-embedded .brand .bars{margin:auto;}
}
@media (min-width:821px){
html:not(.is-embedded) #btn-toggle-right{display:flex !important;}
}
/* ================= Aviso global (!aviso) ================= */
.announcement-modal{width:400px;max-width:92vw;text-align:center;}
.announcement-modal .announcement-icon{font-size:34px;margin-bottom:6px;}
.announcement-modal h3{font-size:16px;}
.announcement-modal-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.55;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin:8px 0 4px;max-height:50vh;overflow:auto;text-align:left;}
.announcement-modal-from{font-size:11.5px;color:var(--text-muted);margin-bottom:10px;}
/* ================= v14.5: correcciones visuales/presencia/privados ================= */
/* Los títulos del chat son enlaces, pero conservan exactamente la apariencia de la cabecera. */
.brand{color:var(--text);}
.brand .brand-title{color:inherit;text-decoration:none;min-width:0;cursor:pointer;}
.brand .brand-title:hover{text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:3px;}
.brand .brand-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.userlist-banner-text{color:inherit;text-decoration:none;cursor:pointer;}
.userlist-banner-text:hover{text-decoration:underline;text-underline-offset:2px;}
/* Badge de rango: pequeño, pegado a la esquina inferior derecha y con aro del fondo,
como en el ejemplo de referencia. El tamaño real se calcula junto al avatar desde JS. */
.avatar-wrap{overflow:visible;line-height:0;}
.rank-dot{
width:var(--rank-dot-size,11px)!important;height:var(--rank-dot-size,11px)!important;
right:-2px!important;bottom:-2px!important;
border:2px solid var(--rank-dot-ring,var(--surface))!important;
box-shadow:0 0 0 1px rgba(0,0,0,.32)!important;
box-sizing:border-box;
}
.msg>.avatar-wrap{--rank-dot-ring:var(--bg);}
.user-row>.avatar-wrap{--rank-dot-ring:var(--surface);}
.me-chip .avatar-wrap{--rank-dot-ring:var(--surface-2);}
/* Evita que reglas antiguas del embed den al contenedor un tamaño distinto al avatar. */
.msg>.avatar-wrap,.user-row>.avatar-wrap,.is-embedded .msg>.avatar-wrap,.is-embedded .user-row>.avatar-wrap{flex-basis:auto!important;}
/* Indicador online vivo: pulso continuo + parpadeo suave del contador completo. */
.online-total-dot{animation:onlineAccentPulse 1.05s ease-in-out infinite;will-change:transform,opacity,box-shadow;}
.readout .dot{animation:onlineLivePulse 1.05s ease-in-out infinite;will-change:transform,opacity,box-shadow;}
.online-total-marker,.header-online-count{animation:onlineCounterBlink 1.55s ease-in-out infinite;will-change:transform,opacity,filter,box-shadow;}
@keyframes onlineAccentPulse{
0%,100%{opacity:.58;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent),0 0 9px color-mix(in srgb,var(--accent) 28%,transparent);transform:scale(.86)}
50%{opacity:1;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 26%,transparent),0 0 21px color-mix(in srgb,var(--accent) 58%,transparent);transform:scale(1.15)}
}
@keyframes onlineLivePulse{
0%,100%{opacity:.55;box-shadow:0 0 0 2px rgba(62,213,152,.12),0 0 8px rgba(62,213,152,.20);transform:scale(.84)}
50%{opacity:1;box-shadow:0 0 0 6px rgba(62,213,152,.22),0 0 18px rgba(62,213,152,.42);transform:scale(1.16)}
}
@keyframes onlineLivePulseLite{
0%,100%{opacity:.58;transform:scale(.88)}
50%{opacity:1;transform:scale(1.12)}
}
@keyframes onlineCounterBlink{
0%,100%{opacity:.84;filter:brightness(1);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 8px 22px rgba(0,0,0,.14),0 0 18px color-mix(in srgb,var(--accent) 14%,transparent)}
50%{opacity:1;filter:brightness(1.18);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),0 10px 28px rgba(0,0,0,.18),0 0 24px color-mix(in srgb,var(--accent) 24%,transparent)}
}
@keyframes onlineCounterGlow{
0%,100%{opacity:.82;transform:scale(1);filter:brightness(1)}
50%{opacity:1;transform:scale(1.07);filter:brightness(1.22)}
}
@keyframes onlineCountBump{
0%{transform:scale(1);opacity:1}
35%{transform:scale(1.28);opacity:.76}
70%{transform:scale(.95);opacity:1}
100%{transform:scale(1);opacity:1}
}
.online-count-changed{display:inline-block;animation:onlineCountBump .62s cubic-bezier(.2,.75,.25,1);transform-origin:center;will-change:transform,opacity;}
.header-online-count{display:inline-flex;align-items:center;justify-content:center;gap:7px!important;min-width:max-content;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 14%,transparent);white-space:nowrap;position:relative;overflow:hidden;}
.header-online-value{display:inline-flex;align-items:baseline;justify-content:center;gap:5px;font-family:var(--font-display);font-size:15px;font-weight:700;line-height:1;letter-spacing:0;white-space:nowrap;}
.header-online-count .header-online-label,.header-online-count strong{display:inline-block;margin:0;padding:0;font:inherit;line-height:1;white-space:nowrap;vertical-align:baseline;}
.header-online-count .header-online-label{color:var(--text);}
.header-online-count strong{min-width:1ch;font-variant-numeric:tabular-nums;color:var(--accent);text-shadow:0 0 12px color-mix(in srgb,var(--accent) 34%,transparent);}
/* Bot: subida de foto desde dispositivo. */
.bot-avatar-editor{display:flex;align-items:center;gap:12px;padding:7px 0 5px;}
.bot-avatar-preview{width:58px;height:58px;flex:0 0 58px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:2px solid var(--border);font-family:var(--font-display);font-weight:700;font-size:17px;}
.bot-avatar-preview img{width:100%;height:100%;display:block;object-fit:cover;}
/* El compositor de privados no hereda el wrap/grid del compositor público en móvil/embed. */
#dm-thread-view{min-height:0;overflow:hidden;}
#dm-thread-view .dm-messages{min-height:0;}
#dm-thread-view .dm-composer{
display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;
align-items:end!important;gap:6px!important;flex-wrap:nowrap!important;
margin:8px!important;padding:6px!important;border-radius:14px!important;
}
#dm-thread-view .dm-composer textarea{
order:initial!important;display:block!important;min-width:0!important;width:100%!important;
min-height:38px!important;max-height:120px!important;box-sizing:border-box!important;
padding:9px 10px!important;font-size:14px!important;line-height:1.35!important;
overflow-y:auto!important;white-space:pre-wrap!important;word-break:break-word!important;
}
#dm-thread-view .dm-composer .send-btn{
order:initial!important;width:42px!important;height:42px!important;flex:0 0 42px!important;
align-self:end!important;
}
@media(max-width:520px){
#dm-thread-view .dm-composer{grid-template-columns:minmax(0,1fr) 40px!important;margin:7px!important;padding:5px!important;}
#dm-thread-view .dm-composer .send-btn{width:40px!important;height:40px!important;}
#dm-thread-view .dm-composer textarea{font-size:14px!important;min-height:40px!important;}
}
/* En embeds estrechos seguimos mostrando el texto completo "Viewers". */
@media(max-width:560px){
.is-embedded .brand{font-size:10.5px!important;flex:1 1 auto!important;gap:4px!important;min-width:0!important;}
.is-embedded .brand-title{display:inline-block;font-size:10.5px;max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.is-embedded .online-total-label{font-size:inherit!important;}
.is-embedded .online-total-label::after{content:none!important;}
}
/* ---------- v14.6: diálogos internos y ayuda del bot ---------- */
.app-dialog{width:430px;max-width:92vw;}
.app-dialog-message{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-size:13.5px;color:var(--text);max-height:55vh;overflow:auto;}
.app-dialog-input{margin-top:12px;}
.app-dialog.is-danger #btn-app-dialog-confirm{background:var(--danger);border-color:var(--danger);color:#fff;}
.bot-command-help-btn{margin:9px 0 4px;width:100%;justify-content:center;}
.bot-command-help-modal{width:620px;max-width:94vw;max-height:86vh;display:flex;flex-direction:column;}
.bot-command-help-list{display:flex;flex-direction:column;gap:7px;overflow:auto;max-height:56vh;padding-right:3px;}
.bot-command-help-list>div{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:10px;align-items:start;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);}
.bot-command-help-list code{font-family:var(--font-mono);font-size:11.5px;color:var(--accent-strong);white-space:normal;overflow-wrap:anywhere;}
.bot-command-help-list span{font-size:12px;line-height:1.45;color:var(--text-muted);}
.bot-command-help-note{margin-top:10px;margin-bottom:0;}
@media (max-width:560px){.bot-command-help-list>div{grid-template-columns:1fr;gap:3px}.bot-command-help-modal{padding:16px}.app-dialog{padding:16px}}
/* ---------- v14.12: imágenes pegadas y visor ampliado ---------- */
.paste-image-preview{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px;padding:7px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;}
.paste-image-card{position:relative;width:58px;height:58px;border-radius:9px;overflow:hidden;border:1px solid var(--border);background:var(--surface-3);flex:0 0 58px;}
.paste-image-card img{width:100%;height:100%;display:block;object-fit:cover;}
.paste-image-remove{position:absolute;top:3px;right:3px;width:21px;height:21px;border:0;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:11px;line-height:21px;padding:0;cursor:pointer;}
.paste-image-hint{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);}
.msg-img-zoomable{cursor:zoom-in;}
.image-lightbox{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(3,6,12,.90);backdrop-filter:blur(4px);}
.image-lightbox.open{display:flex;}
.image-lightbox-img{display:block;max-width:min(94vw,1600px);max-height:90vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 70px rgba(0,0,0,.55);}
.image-lightbox-close{position:fixed;top:16px;right:18px;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(20,23,30,.86);color:#fff;font-size:18px;cursor:pointer;}
@media(max-width:560px){.paste-image-card{width:50px;height:50px;flex-basis:50px}.paste-image-hint{font-size:9.5px}.image-lightbox{padding:12px}.image-lightbox-close{top:10px;right:10px}}
/* acceso directo a GIFs */
.gif-btn{font-family:var(--font-display);font-size:10px!important;font-weight:900;letter-spacing:-.02em;}
/* selector de sala en la cabecera, antes de los privados */
.header-room-combo{
flex:0 1 210px;
min-width:120px;
max-width:210px;
}
.header-room-combo select{
width:100%;
min-width:0;
height:32px;
padding:5px 28px 5px 11px;
font-size:12px;
white-space:nowrap;
text-overflow:ellipsis;
}
@media (max-width:980px){
.header-room-combo{order:4;flex:0 1 185px;max-width:185px;min-width:105px;}
.header-room-combo select{width:100%;max-width:none;font-size:11px;height:30px;padding-left:8px;}
#btn-dm{order:5;}
#btn-reports-alert{order:6;}
#btn-pause-chat{order:7;}
#btn-toggle-right{order:8;}
.auth-header-actions{order:9;}
#me-chip{order:10;}
#btn-settings{order:11;}
#btn-logout{order:12;}
}
@media (max-width:620px){
.header-room-combo{flex:1 1 120px;max-width:155px;min-width:92px;}
.header-room-combo select{font-size:10.5px;height:29px;padding-right:22px;}
}
@media (max-width:390px){
.header-room-combo{max-width:125px;min-width:82px;}
.header-room-combo select{font-size:10px;padding-left:6px;padding-right:20px;}
}
.is-embedded .header-room-combo{order:2;flex:0 1 175px;max-width:175px;min-width:95px;}
.is-embedded .header-room-combo select{width:100%;min-width:0;height:27px;font-size:9.5px;padding:3px 22px 3px 7px;}
.is-embedded #btn-dm{order:3;}
.is-embedded #btn-reports-alert{order:4;}
.is-embedded #btn-pause-chat{order:5;}
.is-embedded #btn-toggle-right{order:6;}
.is-embedded .auth-header-actions{order:7;}
.is-embedded #me-chip{order:8;}
.is-embedded #btn-settings{order:9;}
.is-embedded #btn-logout{order:10;}
/* # para texto grande + recordatorio persistente de pausa al staff */
@media (max-width:520px){.msg-bubble.msg-bubble-big{font-size:30px;line-height:1.12;max-width:98%;}.composer-bar textarea{padding-right:38px;}}
/* sonido de mensajes personal, desactivado por defecto */
.message-sound-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;flex:0 0 24px;margin-left:-2px;
border:1px solid transparent;border-radius:7px;
font-family:system-ui,sans-serif;font-size:14px;line-height:1;
color:var(--text-muted);cursor:pointer;user-select:none;
transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.message-sound-toggle:hover,.message-sound-toggle:focus-visible{background:var(--surface-2);border-color:var(--border);outline:none;}
.message-sound-toggle:active{transform:scale(.94);}
.message-sound-toggle.enabled{color:var(--text);}
@media(max-width:620px){.message-sound-toggle{width:26px;height:26px;flex-basis:26px;font-size:13px;margin-left:0;}}
.is-embedded .message-sound-toggle{width:22px;height:22px;flex:0 0 22px;font-size:12px;margin-left:0;}
/* ================= v14.33: eliminación privada solo para mi bandeja ================= */
.dm-convo-delete,.dm-msg-delete{border:0;background:transparent;color:var(--text-faint);cursor:pointer;opacity:.35;transition:opacity .15s ease,color .15s ease,background .15s ease;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;flex:0 0 auto;}
.dm-convo-delete{width:28px;height:28px;font-size:13px;}
.dm-convo-row:hover .dm-convo-delete,.dm-convo-delete:focus-visible{opacity:1;}
.dm-convo-delete:hover,.dm-msg-delete:hover{color:#ff8f92;background:rgba(239,93,96,.12);opacity:1;}
.dm-msg{position:relative;}
.dm-msg-text{display:block;white-space:pre-wrap;}
.dm-msg-footer{display:flex;align-items:center;gap:5px;margin-top:3px;min-height:18px;}
.dm-msg.mine .dm-msg-footer{justify-content:flex-end;}
.dm-msg .dm-time{display:inline-block;margin-top:0;}
.dm-msg-delete{width:22px;height:19px;font-size:10px;opacity:0;}
.dm-msg:hover .dm-msg-delete,.dm-msg-delete:focus-visible{opacity:.8;}
.dm-delete-thread-btn{color:var(--text-faint);}
.dm-delete-thread-btn:hover{color:#ff8f92;background:rgba(239,93,96,.12);}
@media (hover:none),(max-width:620px){.dm-convo-delete{opacity:.7}.dm-msg-delete{opacity:.65}}
/* rendimiento + privados */
.user-search-wrap{padding:6px 8px 5px;position:sticky;top:0;z-index:2;background:var(--surface)}
.user-search-wrap input{width:100%;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);padding:0 9px;font:inherit;font-size:11px;outline:none}
.user-search-wrap input:focus{border-color:var(--accent)}
.user-virtual-spacer{display:block!important;padding:0!important;margin:0!important;border:0!important;pointer-events:none}
.dm-tool-btn{width:36px;height:36px;flex:0 0 36px;font-size:16px}
#dm-thread-view .dm-composer{grid-template-columns:36px 36px minmax(0,1fr) 40px!important;align-items:end}
.dm-msg-image{display:block;max-width:min(260px,72vw);max-height:320px;border-radius:10px;object-fit:contain;cursor:zoom-in}
.dm-msg-media-loading{font-size:11px;color:var(--text-muted);padding:8px}
.is-embedded .user-search-wrap{padding:3px 4px}.is-embedded .user-search-wrap input{height:26px;font-size:9.5px}
@media(max-width:620px){#dm-thread-view .dm-composer{grid-template-columns:34px 34px minmax(0,1fr) 40px!important}.dm-tool-btn{width:34px;height:40px}}
.user-search-wrap{position:relative;top:auto;flex:0 0 auto}
/* Modo embebido junto al reproductor: evita composiciones gráficas caras sin cambiar funciones. */
.is-embedded #app{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.is-embedded .brand .bars i{animation:none!important}
.is-embedded .online-total-dot,.is-embedded .readout .dot{animation:onlineLivePulseLite 1.65s ease-in-out infinite!important;box-shadow:none!important}
.is-embedded #btn-file.uploading,.is-embedded .dm-icon-btn.has-unread,.is-embedded .report-alert-btn.has-alert{animation:none!important}
.is-embedded .image-lightbox{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.picker.dm-mode{position:fixed!important;right:18px!important;left:auto!important;bottom:66px!important;z-index:120!important;width:min(300px,calc(100vw - 36px))!important}
@media(max-width:620px){.picker.dm-mode{left:12px!important;right:12px!important;bottom:66px!important;width:auto!important}}
/* Amigos y registro de baneos */
.dm-friends-section{border-bottom:1px solid var(--border);padding:8px 8px 10px;background:rgba(255,255,255,.012)}
.dm-list-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 4px 7px;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.055em}
.dm-list-section-head strong{color:var(--text);font-size:11.5px}
.dm-friends-list{display:flex;flex-direction:column;gap:4px}
.dm-friend-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:9px;border:1px solid transparent;transition:background .14s ease,border-color .14s ease}
.dm-friend-row:hover{background:var(--surface-2);border-color:var(--border)}
.dm-friend-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;cursor:pointer}
.dm-friend-meta{min-width:0;flex:1}
.dm-friend-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-friend-status{font-size:10.5px;color:var(--text-faint);display:flex;align-items:center;gap:5px}
.friend-presence-dot{width:7px;height:7px;border-radius:50%;background:var(--rank-offline);box-shadow:0 0 0 2px color-mix(in srgb,var(--rank-offline) 18%,transparent);flex:0 0 auto}
.dm-friend-row.is-online .friend-presence-dot{background:var(--online);box-shadow:0 0 0 2px color-mix(in srgb,var(--online) 18%,transparent),0 0 9px color-mix(in srgb,var(--online) 50%,transparent)}
.dm-friend-actions{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.dm-friend-actions button{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dm-friend-actions button:hover{background:var(--surface-3);color:var(--text)}
.dm-friend-actions button:disabled{opacity:.35;cursor:not-allowed}
.dm-conversations-head{padding:10px 10px 2px}
#dm-friends-summary{text-transform:none;letter-spacing:0;font-size:10.5px;color:var(--text-faint)}
.ban-registry-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ban-registry-summary{display:flex;align-items:baseline;gap:6px;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.ban-registry-summary strong{font-family:var(--font-display);font-size:22px;color:var(--danger)}
.ban-registry-summary span{font-size:12px;color:var(--text-muted)}
.ban-registry-list{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.ban-registry-card{border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:9px 10px}
.ban-registry-card.active{border-color:color-mix(in srgb,var(--danger) 42%,var(--border));background:color-mix(in srgb,var(--danger) 7%,var(--surface-2))}
.ban-registry-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ban-registry-card-name{font-weight:800;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ban-registry-status{font-size:9.5px;font-weight:800;padding:3px 6px;border-radius:999px;background:var(--surface-3);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.ban-registry-card.active .ban-registry-status{background:rgba(239,93,96,.16);color:#ff9b9e}
.ban-registry-reason{margin-top:6px;font-size:11.5px;color:var(--text);overflow-wrap:anywhere}
.ban-registry-meta{margin-top:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px;font-size:10.5px;color:var(--text-faint)}
.ban-registry-meta b{color:var(--text-muted);font-weight:650}
.ban-registry-actions{display:flex;justify-content:flex-end;margin-top:7px}
.ban-countdown{font-family:var(--font-mono);font-weight:700;color:var(--text)}
@media(max-width:620px){.ban-registry-meta{grid-template-columns:1fr}.dm-friend-row{padding:7px 4px}}
/* ---------- v14.38: pausas temporizadas e historial ---------- */
.pause-banner-countdown{font-variant-numeric:tabular-nums;font-weight:800;color:#fff2b8;white-space:nowrap}.pause-modal{width:390px;max-width:92vw}.pause-modal .small-setting-label{display:block;margin-top:10px}.pause-settings #set-pause-duration{margin-top:3px}.archive-filters .btn{align-self:end;min-height:38px}
/* historial retenido 30 días tras limpiar una sala */
.archive-row-cleared{border-color:rgba(250,204,21,.22);background:rgba(250,204,21,.035)}
.archive-cleared-badge{display:inline-flex;align-items:center;gap:3px;color:#facc15;font-weight:700}
.archive-cleared-detail{color:var(--text-muted)}
/* ================= v14.40: estados de presencia + recuperación silenciosa ================= */
/* «ausente» = media luna. La mordida se pinta como degradado dentro del propio punto (círculo del 40 % del ancho con centro en 76 % / 24 %),
no como un círculo superpuesto: así nunca sobresale del aro ni deja un contorno fantasma. Ver el bloque «media luna» al final del archivo. */
.rank-dot.user-status-busy::after{
content:"";position:absolute;width:62%;height:2px;border-radius:999px;
background:#17191f;left:19%;top:50%;transform:translateY(-50%);
}
.user-profile-avatar-wrap{position:relative;display:inline-flex;flex:0 0 auto;}
.user-profile-status-dot{position:absolute;right:8px;bottom:9px;width:31px;height:31px;border-radius:50%;border:3px solid var(--surface);background:var(--online);box-shadow:0 0 0 1px rgba(0,0,0,.28);box-sizing:border-box;}
.user-profile-status-dot.status-busy::after{content:"";position:absolute;width:16px;height:4px;border-radius:99px;background:#17191f;left:5px;top:11px;}
.user-profile-status-dot.status-offline{background:var(--rank-offline);}
.user-profile-status-text{margin-top:7px;font-size:13px;font-weight:700;color:var(--text);}
.profile-status-picker{display:grid;gap:7px;margin:0 0 14px;padding-top:12px;border-top:1px solid var(--border);}
.profile-status-picker-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:800;margin-bottom:1px;}
.profile-status-option{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text);padding:10px 11px;cursor:pointer;}
.profile-status-option:hover{border-color:rgba(91,110,245,.65);background:rgba(91,110,245,.08);}
.profile-status-option.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,110,245,.12) inset;}
.profile-status-option>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.profile-status-option strong{font-size:13px;}
.profile-status-option small{font-size:11px;line-height:1.35;color:var(--text-muted);font-weight:500;}
.profile-status-choice-icon{position:relative;width:18px;height:18px;border-radius:50%;background:var(--online);flex:0 0 18px;box-shadow:0 0 0 2px rgba(62,213,152,.12);}
.profile-status-choice-icon.status-away{background:#f5d238;box-shadow:none;}
.profile-status-choice-icon.status-busy{background:#f5d238;box-shadow:none;}
.profile-status-choice-icon.status-busy::after{content:"";position:absolute;width:10px;height:3px;border-radius:99px;background:#17191f;left:4px;top:7px;}
.friend-presence-dot.user-status-away{background:#f5d238!important;position:relative;}
.friend-presence-dot.user-status-busy{background:#f5d238!important;position:relative;}
.friend-presence-dot.user-status-busy::after{content:"";position:absolute;width:5px;height:1px;border-radius:99px;background:#17191f;left:1px;top:3px;}
@media(max-width:600px){.user-profile-status-dot{right:7px;bottom:8px;width:29px;height:29px}.profile-status-option{padding:9px 10px}}
/* ================= v14.42: mensaje de estado personal tipo xat Status ================= */
.user-row-copy{display:flex;flex-direction:column;justify-content:center;gap:0;flex:1;min-width:0;height:26px;overflow:hidden;}
.user-row-copy .nm{display:block;flex:0 0 auto;min-width:0;width:100%;line-height:14px;}
.user-custom-status-list{display:block;height:11px;line-height:11px;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:9.5px;font-weight:500;opacity:.92;}
.user-row.offline-user-row .user-custom-status-list{color:var(--text-faint);opacity:.72;}
.user-row.banned-user-row .user-custom-status-list{color:#9b7357;}
.user-profile-custom-status{margin-top:5px;max-width:260px;font-size:12px;line-height:1.35;color:var(--text-muted);overflow-wrap:anywhere;}
.profile-custom-status-editor{display:grid;gap:6px;margin-top:3px;padding-top:10px;border-top:1px solid var(--border);}
.profile-custom-status-editor>label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);font-weight:800;}
.profile-custom-status-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;}
.profile-custom-status-row input{min-width:0;width:100%;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);padding:0 10px;outline:none;}
.profile-custom-status-row input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,110,245,.12);}
.profile-custom-status-editor>small{font-size:10.5px;line-height:1.35;color:var(--text-muted);}
.dm-friend-custom-status{margin-top:1px;max-width:180px;font-size:10px;line-height:1.2;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.is-embedded .user-row-copy{height:22px;}
.is-embedded .user-row-copy .nm{line-height:12px;}
.is-embedded .user-custom-status-list{height:9px;line-height:9px;font-size:8px;}
@media(max-width:600px){.profile-custom-status-row{grid-template-columns:1fr 1fr}.profile-custom-status-row input{grid-column:1/-1}.profile-custom-status-row .btn{width:100%;}}
/* ================= v14.43: perfil adaptable + status sin línea vacía ================= */
/* El perfil puede ser más alto que la ventana (especialmente el propio perfil con
selector de estado). El backdrop pasa a ser desplazable para que nunca quede
contenido inaccesible por debajo de la pantalla. */
#user-profile-modal{
overflow-y:auto;
overflow-x:hidden;
padding:12px;
box-sizing:border-box;
align-items:flex-start;
overscroll-behavior:contain;
}
#user-profile-modal .user-profile-modal{
margin:auto 0;
max-width:min(430px,calc(100vw - 24px));
box-sizing:border-box;
}
/* Si no hay mensaje de estado, el nombre queda centrado verticalmente como antes. */
.user-row-copy:not(:has(.user-custom-status-list)) .nm{line-height:26px;}
.is-embedded .user-row-copy:not(:has(.user-custom-status-list)) .nm{line-height:22px;}
/* En pantallas de poca altura compactamos el perfil propio para reducir al mínimo
el scroll sin sacrificar controles. */
@media (max-height:820px){
#user-profile-modal .user-profile-modal{padding:14px 16px;}
#user-profile-modal .user-profile-hero{gap:14px;padding:2px 2px 10px;}
#user-profile-modal .user-profile-big-avatar{width:132px;height:132px;flex-basis:132px;font-size:36px;}
#user-profile-modal .user-profile-status-dot{right:5px;bottom:6px;width:27px;height:27px;}
#user-profile-modal .user-profile-copy h3{font-size:20px;margin-bottom:5px;}
#user-profile-modal .user-profile-status-text{margin-top:4px;}
#user-profile-modal .profile-status-picker{gap:5px;margin-bottom:10px;padding-top:9px;}
#user-profile-modal .profile-status-option{padding:7px 10px;gap:9px;}
#user-profile-modal .profile-status-option small{line-height:1.2;}
#user-profile-modal .profile-custom-status-editor{gap:5px;padding-top:8px;}
#user-profile-modal .profile-custom-status-row input{height:34px;}
#user-profile-modal .user-profile-actions{gap:6px;}
}
@media (max-width:600px){
#user-profile-modal{padding:8px;}
#user-profile-modal .user-profile-modal{max-width:calc(100vw - 16px);}
}
/* accesos al panel administrativo externo */
.admin-external-card{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:10px 0 14px;padding:12px;border:1px solid var(--border-color,#3a3f55);border-radius:12px;background:rgba(255,255,255,.025)}
.admin-external-card>div{min-width:0}.admin-external-card strong{display:block;font-size:13px}.admin-external-card span{display:block;margin-top:3px;font-size:11px;color:var(--text-muted,#969db1);line-height:1.35}.btn-open-admin{flex:0 0 auto}
@media(max-width:560px){.admin-external-card{align-items:flex-start;flex-direction:column}.admin-external-card .btn-open-admin{width:100%}}
/* ================= v14.63: badge de presencia/rango alineado en embeds estrechos =================
buildAvatar() fija el wrapper a 26px por inline-style. En el embed móvil el avatar visual
baja a 22/20px; si el wrapper conserva 26px, el punto queda flotando abajo y a la derecha.
Aquí hacemos que wrapper, avatar y badge compartan el mismo tamaño real en responsive. */
.is-embedded .user-row > .avatar-wrap{
width:22px !important;
height:22px !important;
flex:0 0 22px !important;
--rank-dot-size:8px !important;
}
.is-embedded .user-row > .avatar-wrap .rank-dot{
right:-1px !important;
bottom:-1px !important;
border-width:1px !important;
}
@media (max-width:560px){
.is-embedded .user-row > .avatar-wrap{
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
--rank-dot-size:7px !important;
}
.is-embedded .user-row > .avatar-wrap .rank-dot{
right:-1px !important;
bottom:-1px !important;
}
}
/* También mantiene el badge proporcionado cuando la app se abre directamente en una ventana móvil. */
@media (max-width:720px){
html:not(.is-embedded) .user-row > .avatar-wrap{
--rank-dot-size:9px !important;
}
html:not(.is-embedded) .user-row > .avatar-wrap .rank-dot{
right:-1px !important;
bottom:-1px !important;
border-width:1px !important;
}
}
/* ================= v14.64: preservar tamaño de escritorio y corregir solo responsive =================
v14.63 igualó el wrapper en todos los embeds, incluido escritorio. buildAvatar() crea las filas
laterales a 26px, así que en un iframe ancho el wrapper quedaba a 22px mientras el avatar seguía
a 26px. El badge terminaba demasiado metido en el avatar. En ancho normal restauramos 26px/10px;
en <=560px mantenemos el ajuste móvil 20px/7px. */
@media (min-width:561px){
.is-embedded .user-row > .avatar-wrap{
width:26px !important;
height:26px !important;
flex:0 0 26px !important;
--rank-dot-size:10px !important;
}
.is-embedded .user-row > .avatar-wrap .avatar{
width:26px !important;
height:26px !important;
}
.is-embedded .user-row > .avatar-wrap .rank-dot{
right:-2px !important;
bottom:-2px !important;
border-width:2px !important;
}
}
@media (max-width:560px){
.is-embedded .user-row > .avatar-wrap,
.is-embedded .user-row > .avatar-wrap .avatar{
width:20px !important;
height:20px !important;
}
.is-embedded .user-row > .avatar-wrap{
flex:0 0 20px !important;
--rank-dot-size:7px !important;
}
.is-embedded .user-row > .avatar-wrap .rank-dot{
right:-1px !important;
bottom:-1px !important;
border-width:1px !important;
}
}
/* ================= v14.65: bolita de rango/presencia más visible en la barra de usuarios =================
Solo afecta a la lista lateral de Viewers; no cambia los badges de los mensajes. */
@media (min-width:561px){
.is-embedded .user-row > .avatar-wrap{
--rank-dot-size:12px !important;
}
}
@media (max-width:560px){
.is-embedded .user-row > .avatar-wrap{
--rank-dot-size:9px !important;
}
}
@media (max-width:720px){
html:not(.is-embedded) .user-row > .avatar-wrap{
--rank-dot-size:10px !important;
}
}
/* ================= v14.66: «escribiendo…» en la bolita de rango + más aire entre nick y estado =================
Al escribir, el circulito de rango de la barra de usuarios se estira en una píldora del mismo color
con tres puntos animados. Vale también para el propio usuario (su fila y el chip de la cabecera). */
.rank-dot{transition:width .24s cubic-bezier(.34,1.45,.5,1),height .24s cubic-bezier(.34,1.45,.5,1),transform .24s cubic-bezier(.34,1.45,.5,1);}
.rank-dot.is-typing{
--typing-dot:max(2.5px,calc(var(--rank-dot-size,11px)*.28));
width:calc(var(--rank-dot-size,11px)*1.85)!important;
height:calc(var(--rank-dot-size,11px)*1.15)!important;
transform:translateX(calc(var(--rank-dot-size,11px)*.15));
display:inline-flex;align-items:center;justify-content:center;
gap:max(1px,calc(var(--rank-dot-size,11px)*.12));
border-radius:999px;
}
.rank-dot.is-typing::after{display:none!important;}
.rank-dot.is-typing>i{
display:block;flex:0 0 auto;width:var(--typing-dot);height:var(--typing-dot);border-radius:50%;
background:rgba(12,14,20,.92);opacity:.28;animation:rankTypingDot 1.05s infinite ease-in-out;
}
.rank-dot.is-typing>i:nth-child(2){animation-delay:.15s;}
.rank-dot.is-typing>i:nth-child(3){animation-delay:.3s;}
@keyframes rankTypingDot{0%,60%,100%{opacity:.28;transform:translateY(0);}30%{opacity:1;transform:translateY(-1px);}}
@media (prefers-reduced-motion:reduce){
.rank-dot{transition:none;}
.rank-dot.is-typing>i{animation:none;opacity:.75;}
}
/* Un poco más de espacio entre el nick y el mensaje de estado (solo filas que tienen estado). */
/* separación más clara (5 px) y altura automática para que nunca se recorte el texto. */
.user-row-copy:has(.user-custom-status-list){height:auto;min-height:28px;gap:5px;}
.is-embedded .user-row-copy:has(.user-custom-status-list){height:auto;min-height:24px;gap:5px;}
@media (max-width:560px){.is-embedded .user-row-copy:has(.user-custom-status-list){gap:4px;}}
/* la parte baja de la «p», «g», «y»… quedaba recortada. El nick y el estado tienen una altura de línea
ajustada y overflow:hidden (necesario para los puntos suspensivos), así que lo que sobresalía de la línea se cortaba.
Se amplía la caja de pintado con padding y se compensa con margen negativo: el diseño no se mueve. */
.user-row-copy:has(.user-custom-status-list){overflow:visible;}
.user-row-copy:has(.user-custom-status-list) .nm{padding:.2em 0 .3em;margin:-.2em 0 -.3em;}
.user-row-copy .user-custom-status-list{height:auto;padding:2px 0 3px;margin:-2px 0 -3px;}
/* ================= v14.71: nota de voz estilo WhatsApp =================
Mantener pulsado el micrófono = grabar; soltar = enviar; deslizar a la izquierda = cancelar;
deslizar hacia arriba = bloquear (manos libres, con papelera y botón de enviar). */
#btn-audio{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s ease,background .15s ease;}
#btn-audio.recording{transform:scale(1.22);}
.audio-recorder-panel .audio-recording-state,.audio-recorder-panel .audio-sending-state{display:flex;align-items:center;gap:10px;min-width:0;}
.audio-sending-state{font-size:13px;color:var(--text-muted);}
.audio-record-time{margin-right:0;font-size:13px;color:var(--text);min-width:38px;}
.audio-level{display:inline-flex;align-items:center;gap:2px;height:24px;flex:1 1 auto;min-width:36px;max-width:140px;}
.audio-level i{display:block;width:3px;height:100%;border-radius:2px;background:#ff6a75;transform:scaleY(.14);transform-origin:center;transition:transform .08s linear;}
.audio-record-hint{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-muted);}
.audio-cancel-btn{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.audio-cancel-btn:hover{background:rgba(255,77,90,.16);color:#ff6a75;}
.audio-send-btn{cursor:pointer;}
/* Manteniendo pulsado se ve la pista de deslizar; el botón de enviar y la papelera solo en modo bloqueado. */
.audio-recorder-panel.is-hold .audio-cancel-btn,.audio-recorder-panel.is-hold .audio-send-btn{display:none;}
.audio-recorder-panel.is-locked .audio-record-hint{display:none;}
.audio-recorder-panel.is-locked .audio-level{max-width:none;}
.audio-recorder-panel.is-cancel-armed .audio-record-hint{color:#ff6a75;font-weight:700;}
@media (max-width:640px){.audio-record-hint{font-size:11px;}}
/* bolita de rango un punto más grande (+1 px) en los mensajes y en la barra de usuarios.
buildAvatar() fija --rank-dot-size en línea y varias reglas responsive lo redefinen con !important;
aquí se fijan los valores finales de cada modo (el tamaño del punto incluye su aro de 2 px). */
.msg>.avatar-wrap{--rank-dot-size:15px!important;} /* mensajes: antes 14 px , 12 px */
.user-row>.avatar-wrap{--rank-dot-size:11px!important;} /* lista, ancho normal: antes 10 px */
@media (max-width:720px){html:not(.is-embedded) .user-row>.avatar-wrap{--rank-dot-size:11px!important;}}
@media (min-width:561px){.is-embedded .user-row>.avatar-wrap{--rank-dot-size:13px!important;}} /* iframe ancho: antes 12 px */
@media (max-width:560px){.is-embedded .user-row>.avatar-wrap{--rank-dot-size:10px!important;}} /* iframe estrecho: antes 9 px */
/* ================= v14.74: aprovechar el ancho cuando el chat NO va embebido =================
1) Las burbujas estaban limitadas a 520 px aunque la columna del chat midiera más de 1200 px, así que los mensajes
largos saltaban de línea con mucho espacio libre. En escritorio (>980 px) ahora ocupan hasta el 92 % de la columna
(máximo 1100 px, para que las líneas no sean interminables). Embebido y móvil no cambian.
2) El contador «VIEWERS n» junto al título repetía el de la barra de usuarios: se oculta mientras esa barra está visible.
Si la barra está plegada o fuera de pantalla (móvil), se sigue mostrando porque entonces no es redundante. */
@media (min-width:981px){
html:not(.is-embedded) .msg-bubble{max-width:min(92%,1100px);}
html:not(.is-embedded) .msg-bubble.msg-bubble-big{max-width:96%;}
}
/* en la web completa solo puede haber un contador ONLINE visible a la vez.
- barra visible => se oculta el contador de cabecera
- barra oculta => se muestra el contador de cabecera */
html:not(.is-embedded) #app:not(.users-collapsed) .header-online-count,
html:not(.is-embedded) #app.users-collapsed.show-right .header-online-count{display:none!important;}
/* ================= v14.75: aviso de mensajes en la sala de Moderadores ================= */
.mods-notify{position:fixed;top:66px;right:14px;z-index:420;width:min(340px,calc(100vw - 20px));display:none;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--accent);box-shadow:var(--shadow-lg);color:var(--text);cursor:pointer;}
.mods-notify.show{display:flex;animation:modsNotifyIn .24s cubic-bezier(.2,.8,.25,1);}
.mods-notify-icon{flex:0 0 auto;font-size:20px;line-height:1.2;}
.mods-notify-body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px;}
.mods-notify-title{font-weight:700;font-size:13px;}
.mods-notify-count{font-weight:600;color:var(--accent);}
.mods-notify-text{font-size:12.5px;color:var(--text-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
.mods-notify-perm{align-self:flex-start;margin-top:5px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-muted);font-size:11px;cursor:pointer;}
.mods-notify-perm:hover{color:var(--text);border-color:var(--accent);}
.mods-notify-close{flex:0 0 auto;border:0;background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer;padding:0 2px;}
.mods-notify-close:hover{color:var(--text);}
@keyframes modsNotifyIn{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}
.is-embedded .mods-notify{top:40px;right:6px;left:6px;width:auto;padding:7px 9px;gap:7px;border-radius:10px;}
.is-embedded .mods-notify-icon{font-size:16px;}
.is-embedded .mods-notify-title{font-size:11px;}
.is-embedded .mods-notify-text{font-size:10.5px;}
/* La sala #staff en el selector: pulso mientras hay mensajes sin leer. */
.room-combo select.mods-active-alert{border-color:var(--accent)!important;animation:modsRoomPulse 1.6s ease-in-out infinite;}
@keyframes modsRoomPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,108,255,0);}50%{box-shadow:0 0 0 4px rgba(124,108,255,.35);}}
@media (prefers-reduced-motion:reduce){.mods-notify.show{animation:none;}.room-combo select.mods-active-alert{animation:none;}}
/* vista previa de la imagen pegada en los mensajes privados (mismo aspecto que en el chat principal). */
#dm-paste-image-preview{margin:0 10px 6px;}
/* ================= v14.77: las líneas de separación siguen el color de acento =================
--border era un azul fijo. Ahora se mezcla el color de acento con el color de los paneles, así que las líneas de la
cabecera, la caja de chat, la lista de contactos, los menús, etc. cambian cuando se cambia el acento en Ajustes > Apariencia.
Navegadores sin color-mix conservan el valor anterior. */
@supports (color:color-mix(in srgb,red,blue)){
:root{--border:color-mix(in srgb,var(--accent) 24%,var(--surface));}
[data-theme="light"]{--border:color-mix(in srgb,var(--accent) 20%,#ffffff);}
.composer-bar>.icon-btn:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.profile-status-option:hover{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);}
.dm-attention{border-color:color-mix(in srgb,var(--accent) 60%,transparent);}
.profile-custom-status-row input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent);}
/* Círculos de reacción rápida (❤️ 👍 😂 🔥): fondo y aro con el color de acento (el de fuegos artificiales mantiene su amarillo). */
.reaction-btn{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:color-mix(in srgb,var(--accent) 36%,transparent);}
.reaction-btn:hover{background:color-mix(in srgb,var(--accent) 24%,var(--surface));}
.reaction-btn.firework-btn{background:rgba(244,255,61,.1);border-color:var(--rank-owner);}
/* Otros toques que estaban fijos en azul. */
.pinned-banner{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.reaction-pill.mine{background:color-mix(in srgb,var(--accent) 15%,transparent);}
.poll-opt .fill{background:color-mix(in srgb,var(--accent) 28%,transparent);}
.reply-composer-bar{background:color-mix(in srgb,var(--accent) 10%,transparent);}
.mention{background:color-mix(in srgb,var(--accent) 14%,transparent);}
.profile-status-option.active{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent) inset;}
}
@keyframes modsRoomPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent);}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent);}}
/* ================= v14.77: cambiar nick y foto desde la ventana de perfil ================= */
.user-profile-avatar-edit{position:absolute;left:6px;bottom:7px;width:38px;height:38px;border-radius:50%;border:3px solid var(--surface);background:var(--accent);color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.28);padding:0;}
.user-profile-avatar-edit:hover{background:var(--accent-strong);}
.user-profile-big-avatar.editable{cursor:pointer;}
.user-profile-name-row{display:flex;align-items:flex-start;gap:8px;padding-right:30px;} /* deja libre la ✕ de cerrar */
.user-profile-name-row h3{min-width:0;}
.user-profile-name-edit{flex:0 0 auto;width:28px;height:28px;margin-top:-1px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.user-profile-name-edit:hover{border-color:var(--accent);color:var(--text);}
.user-profile-name-editor{margin:0 0 8px;padding-right:30px;}
.user-profile-name-editor-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;}
.user-profile-name-editor-row input{grid-column:1/-1;}
.user-profile-name-editor input{min-width:0;width:100%;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);padding:0 10px;outline:none;font-size:15px;}
.user-profile-name-editor input:focus{border-color:var(--accent);}
.user-profile-name-editor>small{display:block;margin-top:4px;font-size:10.5px;line-height:1.35;color:var(--text-muted);}
.user-profile-avatar-remove{margin-top:8px;padding:0;border:0;background:transparent;color:var(--text-muted);font-size:12px;text-decoration:underline;cursor:pointer;}
.user-profile-avatar-remove:hover{color:var(--danger);}
@media(max-width:600px){
.user-profile-avatar-edit{width:34px;height:34px;left:5px;bottom:6px;font-size:14px;}
.user-profile-name-row{justify-content:center;}
}
/* ================= v14.78: nombres de chat largos =================
El nombre ya no es fijo (hasta 40 caracteres): el título de la cabecera se acorta con «…» en vez de solaparse con el resto. */
html:not(.is-embedded) header .brand{min-width:0;flex:0 1 auto;max-width:44vw;}
html:not(.is-embedded) header .brand-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html:not(.is-embedded) header .brand>*:not(.brand-title){flex:0 0 auto;}
/* el botón de cambiar foto usa un icono de imagen/galería (no una cámara, que sugiere abrir la cámara). */
.user-profile-avatar-edit svg{width:18px;height:18px;display:block;}
@media(max-width:600px){.user-profile-avatar-edit svg{width:16px;height:16px;}}
/* ================= v14.83: estado «ausente» con forma de media luna =================
Antes se superponía un círculo del color del fondo (no era una luna real y podía sobresalir del aro). Ahora la mordida forma parte
del fondo del propio punto, con el color del aro que lo rodea, en todos los sitios donde aparece el estado. */
.rank-dot.user-status-away,
.user-profile-status-dot.status-away,
.profile-status-choice-icon.status-away,
.friend-presence-dot.user-status-away{
background-image:radial-gradient(circle farthest-side at 76% 24%,var(--moon-bite,var(--surface)) 0 52.6%,transparent 53.6%)!important;
}
.rank-dot.user-status-away{--moon-bite:var(--rank-dot-ring,var(--surface));}
.user-profile-status-dot.status-away{--moon-bite:var(--surface);}
.profile-status-choice-icon.status-away{--moon-bite:var(--surface-2);}
.friend-presence-dot.user-status-away{--moon-bite:var(--surface);}
.rank-dot.user-status-away::after,
.user-profile-status-dot.status-away::after,
.profile-status-choice-icon.status-away::after,
.friend-presence-dot.user-status-away::after{content:none!important;display:none!important;}
.rank-dot.user-status-away.is-typing{background-image:none!important;}
/* stickers — miniaturas algo más grandes en el gestor de Ajustes que las del emoji personalizado. */
.sticker-manager .item img{width:32px;height:32px;object-fit:contain;border-radius:4px;background:var(--surface-3,rgba(255,255,255,.04));}
.sticker-manager .item{justify-content:space-between;}
/* ================= v14.93: aviso de conexión perdida / reconectando =================
Antes, si el socket se caía, la interfaz se quedaba muda sin ningún aviso: el usuario no
se enteraba de que había perdido la conexión hasta que notaba que nada se actualizaba.
v14.93: no cuelga del ni de #app como hijo posicionado, porque ambos tienen
overflow:hidden (por otros motivos) y recortarían la banda, dejándola invisible aunque el
código la marcara como visible. En su lugar, va con position:fixed sobre toda la página
(fuera de esa jerarquía, sin que nada la recorte) y su «top» lo calcula JS leyendo la altura
real del header en cada momento (altura del header : 58/56/52/48/46/44/34 px según el modo),
así que siempre queda justo debajo de sus botones, sin tocar el grid ni depender de que
ningún valor de altura coincida a mano en dos sitios distintos. */
.connection-banner{
position:fixed;left:0;right:0;top:0;z-index:60;
display:none;align-items:center;justify-content:center;gap:8px;
padding:7px 14px;
font-size:12.5px;font-weight:600;text-align:center;
box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.connection-banner.show{display:flex;}
.connection-banner.is-lost{background:#4a1620;color:#ffd7dc;}
.connection-banner.is-restored{background:#123a28;color:#c8ffe4;}
.connection-banner-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.connection-banner.is-lost .connection-banner-dot{background:#ff6a75;animation:connectionDotPulse 1.1s ease-in-out infinite;}
.connection-banner.is-restored .connection-banner-dot{background:#42d39a;}
@keyframes connectionDotPulse{0%,100%{opacity:.35;transform:scale(.8);}50%{opacity:1;transform:scale(1.15);}}
@media (prefers-reduced-motion:reduce){.connection-banner-dot{animation:none!important;}}
.is-embedded .connection-banner{padding:5px 10px;font-size:11px;}
.is-embedded .connection-banner-dot{width:6px;height:6px;}
/* ================= v14.101: aviso animado de cambio de rango / mute / ban («spotlight») =================
Cuelga de .main (ya tiene position:relative), por delante de los mensajes pero sin bloquear clics
(pointer-events:none) y sin salir de la zona del chat (no tapa la cabecera ni la barra de usuarios). */
.mod-spotlight-layer{
position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden;
display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;
}
.mod-spotlight-layer.show{opacity:1;visibility:visible;}
.mod-spotlight-sweep{
position:absolute;inset:0;
background:linear-gradient(100deg, transparent 0%, var(--spot-color,#ffcf4d) 45%, transparent 65%);
opacity:0;mix-blend-mode:screen;transform:translateX(-130%);
}
.mod-spotlight-layer.show .mod-spotlight-sweep{animation:modSpotlightSweep 1.9s ease-out forwards;}
@keyframes modSpotlightSweep{
0%{transform:translateX(-130%);opacity:0;}
14%{opacity:.55;}
55%{opacity:.28;}
100%{transform:translateX(130%);opacity:0;}
}
.mod-spotlight-card{
position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:16px 30px;border-radius:16px;text-align:center;max-width:80%;
background:rgba(8,10,18,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
border:1px solid var(--spot-color,#ffcf4d);
box-shadow:0 10px 40px rgba(0,0,0,.5), 0 0 70px -12px var(--spot-color,#ffcf4d);
transform:scale(.55) translateY(12px);opacity:0;
}
.mod-spotlight-layer.show .mod-spotlight-card{animation:modSpotlightCard 3.6s cubic-bezier(.2,.85,.25,1) forwards;}
@keyframes modSpotlightCard{
0%{transform:scale(.5) translateY(14px);opacity:0;}
9%{transform:scale(1.08) translateY(0);opacity:1;}
15%{transform:scale(1) translateY(0);}
84%{transform:scale(1) translateY(0);opacity:1;}
100%{transform:scale(.94) translateY(-8px);opacity:0;}
}
.mod-spotlight-icon{font-size:32px;line-height:1;filter:drop-shadow(0 0 10px var(--spot-color,#ffcf4d));}
.mod-spotlight-title{font-size:18px;font-weight:800;color:#fff;text-shadow:0 0 14px var(--spot-color,#ffcf4d);word-break:break-word;}
.mod-spotlight-sub{font-size:12px;font-weight:700;color:var(--spot-color,#ffcf4d);text-transform:uppercase;letter-spacing:1.1px;}
/* en un cambio de rango, el color es el mismo que ya tiene asignado ese rango en el resto
del chat (los de Ajustes > Apariencia > Colores de rango), no uno inventado aparte. Mute y ban no
son rangos, así que llevan su propio color fijo (ban, a propuesta del propio Owner: marrón). */
.mod-spotlight-layer.kind-rank.rank-owner{--spot-color:var(--rank-owner);}
.mod-spotlight-layer.kind-rank.rank-manager{--spot-color:var(--rank-manager);}
.mod-spotlight-layer.kind-rank.rank-moderator{--spot-color:var(--rank-moderator);}
.mod-spotlight-layer.kind-rank.rank-member{--spot-color:var(--rank-member);}
.mod-spotlight-layer.kind-rank.rank-guest{--spot-color:var(--rank-guest);}
.mod-spotlight-layer.kind-mute{--spot-color:#ff9f43;}
.mod-spotlight-layer.kind-ban{--spot-color:#a0662f;}
/* Chispas ascendentes, solo de adorno para los ascensos de rango (no para los descensos). */
.mod-spotlight-sparkles{position:absolute;inset:0;pointer-events:none;}
.mod-spotlight-layer.kind-rank.is-promotion .mod-spotlight-sparkles::before,
.mod-spotlight-layer.kind-rank.is-promotion .mod-spotlight-sparkles::after{
content:'✦';position:absolute;bottom:10%;color:var(--spot-color);font-size:14px;opacity:0;
text-shadow:0 0 8px var(--spot-color);
}
.mod-spotlight-layer.kind-rank.is-promotion.show .mod-spotlight-sparkles::before{left:38%;animation:modSpotlightSparkle 2.6s ease-out .15s forwards;}
.mod-spotlight-layer.kind-rank.is-promotion.show .mod-spotlight-sparkles::after{left:60%;font-size:10px;animation:modSpotlightSparkle 2.3s ease-out .45s forwards;}
@keyframes modSpotlightSparkle{0%{opacity:0;transform:translateY(0) scale(.6);}20%{opacity:1;}100%{opacity:0;transform:translateY(-140px) scale(1.1);}}
@media (prefers-reduced-motion:reduce){
.mod-spotlight-sweep,.mod-spotlight-card,.mod-spotlight-sparkles::before,.mod-spotlight-sparkles::after{animation:none!important;}
.mod-spotlight-layer.show .mod-spotlight-card{opacity:1;transform:none;}
}
@media (max-width:560px){
.mod-spotlight-card{padding:12px 20px;}
.mod-spotlight-icon{font-size:26px;}
.mod-spotlight-title{font-size:15px;}
.mod-spotlight-sub{font-size:10.5px;}
}
/* panel Anti-Raid privado para Owner/Manager dentro de Ajustes */
.antiraid-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.antiraid-settings-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025);}
.antiraid-settings-card span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.45px;}
.antiraid-settings-card strong{font-size:14px;color:var(--text);}
.chat-antiraid-mode.active{outline:2px solid var(--accent);outline-offset:1px;}
@media(max-width:560px){.antiraid-settings-grid{grid-template-columns:1fr;}}
/* Enlace «Powered by» (se oculta con licencias de marca blanca). */
.powered-by{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;margin-top:8px;font-size:11px;text-align:center;color:var(--text-faint);background:var(--surface);border-top:1px solid var(--border);text-decoration:none;letter-spacing:.02em;}
.powered-by:hover{color:var(--text);}
.powered-by img{width:20px;height:20px;display:block;border-radius:6px;flex:0 0 auto;}
.powered-by span{display:inline-flex;align-items:center;gap:3px;}
.powered-by b{font-weight:700;}
.auth-forgot-note{margin-top:10px;font-size:12px;}
/* Funciones bloqueadas por el plan de licencia. */
.feature-locked{position:relative;opacity:.55;filter:grayscale(.6);cursor:not-allowed !important;}
.feature-locked *{pointer-events:none !important;}
.feature-lock-badge{display:inline-flex;align-items:center;gap:4px;margin:4px 0;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;color:#1b1400;background:#f5c542;opacity:1;filter:none;}
.settings-tabs button.feature-locked::after{content:' 🔒';}
.license-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface-2,rgba(255,255,255,.03));display:grid;gap:6px;font-size:13px;}
.license-card .license-plan{font-size:22px;font-weight:700;}
.license-card .license-warn{color:#f5a623;font-weight:600;}
.license-card .license-err{color:#ef5d60;font-weight:600;}
.license-features{display:grid;grid-template-columns:1fr;gap:4px;font-size:13px;}
.license-features div{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:8px;background:rgba(127,127,127,.06);}
.license-features .no{color:var(--text-faint);}
.chat-full-screen{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(10,12,24,.92);color:#fff;text-align:center;padding:24px;}
.chat-full-screen h1{font-size:22px;margin:10px 0;}
/* ================= v2.0.6: corrección específica del compositor embebido ================= */
@media (max-width:360px){
.is-embedded .composer-bar{gap:2px;padding:3px;}
.is-embedded .composer-bar>.icon-btn{width:28px;height:30px;flex-basis:28px;font-size:14px;}
.is-embedded .composer-bar .send-btn{width:32px;height:32px;flex-basis:32px;}
.is-embedded .composer-bar textarea{min-width:48px;font-size:12px;padding:5px 6px;}
}