@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ══ NOVA THEMES ══ */
:root {
  --bg-0:#0b0b0f;--bg-1:#111117;--bg-2:#17171f;--bg-3:#1e1e28;--bg-4:#262632;--bg-5:#30303e;
  --accent:#2f6bff;--accent-h:#1d4fd8;--accent-g:#8fb4ff;--accent-glow:rgba(47,107,255,.2);
  --green:#10b981;--red:#f43f5e;--yellow:#f59e0b;--pink:#ec4899;--blue:#3b82f6;
  --text-0:#f1f1f8;--text-1:#c8c8e0;--text-2:#7878a0;--text-3:#4a4a68;
  --border:rgba(255,255,255,.06);--radius:12px;--r-sm:8px;--r-xs:6px;
  --sidebar-w:68px;--channels-w:248px;--members-w:240px;
  --font:'Plus Jakarta Sans',sans-serif;
}
/* Communiter Classic — el default, renombrado */
/* Communiter Classic — the default, renamed */
/* (uses :root, no data-theme) */
/* Morado intenso */
[data-theme="violet"]{--bg-0:#08050f;--bg-1:#0e0a18;--bg-2:#140f22;--bg-3:#1c152e;--bg-4:#251c3a;--bg-5:#2e2445;--accent:#8b5cf6;--accent-h:#7c3aed;--accent-g:#c4b5fd;--accent-glow:rgba(139,92,246,.25);}
/* Negro/Blanco */
[data-theme="bw"]{--bg-0:#000;--bg-1:#0c0c0c;--bg-2:#141414;--bg-3:#1c1c1c;--bg-4:#242424;--bg-5:#2e2e2e;--accent:#e0e0e0;--accent-h:#bbb;--accent-g:#fff;--accent-glow:rgba(255,255,255,.08);--text-0:#fff;--text-1:#d0d0d0;--text-2:#777;--text-3:#444;--border:rgba(255,255,255,.07);}
/* Azul */
[data-theme="blue"]{--bg-0:#07090f;--bg-1:#0c0f1a;--bg-2:#111523;--bg-3:#181d2e;--bg-4:#1f2538;--bg-5:#262d44;--accent:#3b82f6;--accent-h:#2563eb;--accent-g:#93c5fd;--accent-glow:rgba(59,130,246,.2);}
/* Cian */
[data-theme="cyan"]{--bg-0:#050e10;--bg-1:#091518;--bg-2:#0e1d21;--bg-3:#14262b;--bg-4:#1a3036;--bg-5:#203b42;--accent:#06b6d4;--accent-h:#0891b2;--accent-g:#67e8f9;--accent-glow:rgba(6,182,212,.2);}
/* Verde */
[data-theme="green"]{--bg-0:#07100a;--bg-1:#0c160f;--bg-2:#111d15;--bg-3:#18261c;--bg-4:#1f2f23;--bg-5:#263a2a;--accent:#10b981;--accent-h:#059669;--accent-g:#6ee7b7;--accent-glow:rgba(16,185,129,.2);}
/* Naranja */
[data-theme="orange"]{--bg-0:#100a04;--bg-1:#180f07;--bg-2:#20140b;--bg-3:#281a10;--bg-4:#322016;--bg-5:#3e281c;--accent:#f97316;--accent-h:#ea6f10;--accent-g:#fdba74;--accent-glow:rgba(249,115,22,.2);}
/* Rojo */
[data-theme="red"]{--bg-0:#0f0707;--bg-1:#170a0a;--bg-2:#1f0f0f;--bg-3:#271515;--bg-4:#2f1b1b;--bg-5:#382222;--accent:#f43f5e;--accent-h:#e11d48;--accent-g:#fda4af;--accent-glow:rgba(244,63,94,.2);}
/* Rosa */
[data-theme="pink"]{--bg-0:#0f070c;--bg-1:#170a11;--bg-2:#1f0f18;--bg-3:#27151f;--bg-4:#2f1b27;--bg-5:#38222f;--accent:#ec4899;--accent-h:#db2777;--accent-g:#f9a8d4;--accent-glow:rgba(236,72,153,.2);}
/* Dorado oscuro */
[data-theme="gold"]{--bg-0:#0d0b04;--bg-1:#151108;--bg-2:#1c160b;--bg-3:#251e10;--bg-4:#2e2616;--bg-5:#38301c;--accent:#d97706;--accent-h:#b45309;--accent-g:#fcd34d;--accent-glow:rgba(217,119,6,.2);}
/* Medianoche (azul muy oscuro casi negro) */
[data-theme="midnight"]{--bg-0:#02030a;--bg-1:#04060f;--bg-2:#060a16;--bg-3:#0a0f1e;--bg-4:#0e1526;--bg-5:#131c30;--accent:#4f6ef7;--accent-h:#3b58e8;--accent-g:#93a8fb;--accent-glow:rgba(79,110,247,.2);--text-2:#6070a0;--text-3:#3a4870;}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg-0);color:var(--text-1);color-scheme:dark;}
input,textarea,select{color-scheme:dark;background:var(--bg-3);color:var(--text-0);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;font-family:var(--font);font-size:.9rem;outline:none;}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
select option{background:var(--bg-3);color:var(--text-0);}

/* ══ AUTH ══ */
#auth-screen{position:fixed;inset:0;background:var(--bg-0);display:flex;align-items:center;justify-content:center;z-index:9000;overflow-y:auto;padding:20px;}
#auth-screen::before{content:'';position:fixed;top:-30%;left:-20%;width:60%;height:60%;background:radial-gradient(ellipse,rgba(124,58,237,.12) 0%,transparent 70%);pointer-events:none;}
.auth-card{background:var(--bg-2);border:1px solid var(--border);border-radius:20px;padding:36px;width:420px;max-width:100%;box-shadow:0 0 0 1px var(--border),0 40px 80px rgba(0,0,0,.5);text-align:center;position:relative;z-index:1;}
.auth-logo{width:56px;height:56px;border-radius:18px;background:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 32px var(--accent-glow);}
.auth-logo svg{width:30px;height:30px;fill:#fff;}
.auth-card h1{font-size:1.75rem;font-weight:800;color:var(--text-0);margin-bottom:6px;letter-spacing:-.03em;}
.auth-card .sub{color:var(--text-2);font-size:.875rem;margin-bottom:24px;line-height:1.5;}
.auth-tabs{display:flex;background:var(--bg-3);border-radius:var(--r-sm);padding:4px;margin-bottom:20px;gap:4px;}
.auth-tab{flex:1;padding:8px;border:none;border-radius:var(--r-xs);background:none;color:var(--text-2);font-family:var(--font);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s;}
.auth-tab.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--accent-glow);}
.auth-form{display:flex;flex-direction:column;gap:10px;text-align:left;}
.auth-form input{background:var(--bg-3);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:11px 14px;color:var(--text-0);font-family:var(--font);font-size:.95rem;outline:none;transition:all .15s;width:100%;}
.auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.auth-error{color:var(--red);font-size:.8rem;padding:8px 12px;background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.2);border-radius:var(--r-xs);display:none;}
.auth-error.show{display:block;}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:.78rem;margin:2px 0;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* ══ BUTTONS ══ */
.btn{padding:10px 20px;border-radius:var(--r-sm);border:none;font-family:var(--font);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);color:#fff;width:100%;box-shadow:0 4px 16px var(--accent-glow);}
.btn-primary:hover{background:var(--accent-h);box-shadow:0 6px 20px var(--accent-glow);}
.btn-google{background:var(--bg-3);color:var(--text-1);border:1.5px solid var(--border);width:100%;}
.btn-google:hover{border-color:var(--accent);background:var(--bg-4);}
.btn-ghost{background:transparent;color:var(--text-2);padding:8px 14px;}
.btn-ghost:hover{color:var(--text-0);background:var(--bg-4);}
.btn-danger{background:rgba(244,63,94,.12);color:var(--red);border:1px solid rgba(244,63,94,.2);}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-sm{padding:5px 12px;font-size:.78rem;border-radius:var(--r-xs);}
.icon-btn{background:none;border:none;color:var(--text-3);cursor:pointer;padding:5px;border-radius:var(--r-xs);font-size:.95rem;display:flex;align-items:center;transition:all .15s;flex-shrink:0;}
.icon-btn:hover{color:var(--text-0);background:var(--bg-4);}

/* ══ FRIENDS PAGE (estilo Discord) ══ */
.friends-tab-btn{background:none;border:none;color:var(--text-2);font-family:var(--font);font-size:.85rem;font-weight:600;cursor:pointer;padding:6px 4px;border-bottom:2px solid transparent;transition:all .15s;}
.friends-tab-btn:hover{color:var(--text-0);}
.friends-tab-btn.active{color:var(--text-0);}
.friend-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;cursor:pointer;border-top:1px solid var(--border);transition:background .1s;}
.friend-row:hover{background:var(--bg-3);}
.friend-row:hover .icon-btn{color:var(--text-1);}
#dm-search-input{font-size:.8rem!important;padding:7px 10px!important;}
.dm-nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;margin:0 8px 4px;transition:background .1s;color:var(--text-1);}
.dm-nav-item:hover{background:var(--bg-3);}
.dm-nav-item.active{background:var(--bg-4);color:var(--text-0);}

/* ══ LAYOUT ══ */
#app{display:none;height:100vh;}
#app.visible{display:flex;}

/* SERVER BAR — rounded squares, not circles */
#server-bar{width:var(--sidebar-w);background:var(--bg-0);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:2px;overflow:hidden;flex-shrink:0;border-right:1px solid var(--border);position:relative;}
/* BUG (this is why the pills/badges "don't show"): as a flex item inside
   #server-bar, which has align-items:center, this list shrinks to its
   content width — 44px, matching the icons — instead of the full
   --sidebar-w. Its own overflow-x:hidden then clips anything an icon
   positions outside that 44px box, which is exactly what the unread pill
   (left:-10px) and mention badge (right:-4px) do. Giving it the full
   width means those live within the list's own box instead of needing to
   escape it, so overflow-x:hidden no longer touches them. */
#server-icons-list{display:flex;flex-direction:column;align-items:center;gap:2px;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 200px);flex-shrink:0;width:100%;}
/* Sparky's right — even a color-only reveal on hover still reserves gutter
   width, and this list toggling between "needs to scroll" and "doesn't"
   (as servers are added/removed) was enough to shift the icons a few px.
   Zero width, always: still scrolls fine by wheel/trackpad/keyboard, just
   never visible and never reserves space to cause a shift. */
#server-icons-list::-webkit-scrollbar{width:0;height:0;}
#server-icons-list{scrollbar-width:none;}
.srvbar-fade{position:absolute;left:0;right:0;height:22px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:5;}
.srvbar-fade-a{top:58px;background:linear-gradient(to bottom,var(--bg-0),transparent);}
.srvbar-fade-b{bottom:58px;background:linear-gradient(to top,var(--bg-0),transparent);}
.srvbar-fade.show{opacity:1;}
.server-icon{width:44px;height:44px;border-radius:14px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.15rem;font-weight:700;color:var(--text-2);transition:border-radius .2s,background .15s,box-shadow .15s;position:relative;flex-shrink:0;user-select:none;border:1.5px solid transparent;}
.server-icon:hover{border-radius:12px;background:var(--bg-4);border-color:var(--border);}
.server-icon.active{border-radius:12px;background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 16px var(--accent-glow);}
/* Vive pegada al borde REAL del riel, no a un par de px del ícono — se
   calcula a partir de --sidebar-w en vez de un número fijo, para que
   siempre llegue exacto al borde sin importar cuánto mida el riel.
   Círculo chico cuando solo hay mensajes sin leer; pastilla alta cuando
   ese es el servidor activo — como en Discord. Ahora que .server-icon ya
   no tiene overflow:hidden, esto no se recorta.
   (--sidebar-w:0 en el media query móvil rompería esta cuenta — ahí se
   pisa con un valor fijo más abajo, donde el riel pasa a ser horizontal.) */
.server-unread-pill{position:absolute;left:calc((44px - var(--sidebar-w)) / 2);top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#fff;pointer-events:none;transition:height .15s,border-radius .15s;}
.server-unread-pill.active{height:40px;border-radius:4px;}
/* Ya no hace falta compensar el overflow:hidden del ícono (se sacó arriba) —
   vuelve a su posición natural, montada sobre el borde inferior derecho,
   como el badge de notificaciones de cualquier app. */
#dm-btn{position:relative;overflow:visible;}
.server-mention-badge{position:absolute;bottom:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:20px;background:var(--red);color:#fff;font-size:.66rem;font-weight:800;border:2px solid var(--bg-1);pointer-events:none;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.4);line-height:1;}
/* Green "live" badge on a voice/stage channel's own icon when someone's in
   the call — same circle+border+shadow treatment as .server-mention-badge,
   just green, sitting at the TOP of the icon instead of the bottom (so it
   doesn't collide with the unread/mention badge that lives at the far
   right of the row), and holding a tiny mic glyph instead of a number.  */
.ch-icon-wrap{position:relative;display:inline-flex;flex-shrink:0;}
.ch-live-dot{position:absolute;top:-4px;right:-5px;width:12px;height:12px;border-radius:50%;background:var(--accent-g,#3ba55d);border:2px solid var(--bg-1);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4);}
.ch-live-dot svg{width:7px;height:7px;}
/* Mismo indicador que .ch-live-dot, pero en el ícono del servidor (rail
   izquierdo) — se prende si HAY una llamada activa en CUALQUIER canal de voz
   de ese server, para que se note sin tener que entrar. El de canal (arriba)
   se deja tal cual como guía de CUÁL canal específico está en vivo. */
.server-live-dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--accent-g,#3ba55d);border:2px solid var(--bg-1);display:none;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none;}
.server-live-dot svg{width:8px;height:8px;}
.dm-rail-avatar{width:44px;height:44px;border-radius:50%;cursor:pointer;position:relative;flex-shrink:0;transition:border-radius .2s,box-shadow .15s;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1rem;margin-bottom:6px;}
.dm-rail-avatar:hover{border-radius:16px;}
.dm-rail-avatar img{width:100%;height:100%;object-fit:cover;}
#dm-avatar-rail{display:flex;flex-direction:column;align-items:center;}
.server-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.server-sep{width:28px;height:1px;background:var(--border);margin:4px 0;flex-shrink:0;}
.forum-posts-grid{display:flex;flex-direction:column;gap:10px;}
@media (min-width:769px){
  .forum-posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
}
#add-server-btn{color:var(--accent);font-size:1.3rem;border:1.5px dashed rgba(124,58,237,.3);}
#add-server-btn:hover{background:var(--accent);color:#fff;border-style:solid;border-color:var(--accent);}

/* CHANNELS PANEL */
#channels-panel{width:var(--channels-w);background:var(--bg-1);display:flex;flex-direction:column;flex-shrink:0;}
.panel-resize-handle{width:5px;flex-shrink:0;cursor:col-resize;position:relative;background:transparent;z-index:20;}
.panel-resize-handle::after{content:'';position:absolute;top:0;bottom:0;left:1px;right:1px;background:transparent;transition:background .15s;}
.panel-resize-handle:hover::after,.panel-resize-handle.dragging::after{background:var(--accent);}
#channels-header{padding:0 14px;height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0;gap:8px;}
/* Discord shows the server banner as a modest strip with the name bar
   overlaid on its bottom edge (a dark gradient keeps the text readable) —
   not as a tall full-bleed background image with the name floating below it,
   which is what this looked like before. has-banner is toggled by JS
   (renderChannelsPanel) whenever the current server has a bannerUrl set. */
#channels-banner-wrap.has-banner #channels-header{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.35) 70%, rgba(0,0,0,0));
  border-bottom:none;
}
#channels-banner-wrap.has-banner #server-name{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.server-name-tooltip{cursor:default;}
#server-name-tooltip-el{position:fixed;display:none;background:var(--bg-4);color:var(--text-0);font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:6px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:5000;pointer-events:none;}
#server-name{font-weight:700;font-size:.9rem;color:var(--text-0);cursor:pointer;flex:1;letter-spacing:-.01em;}
#server-name:hover{color:var(--accent-g);}
#server-name-viewport{overflow:hidden;min-width:0;flex:1;}
#server-name-text{display:inline-block;white-space:nowrap;will-change:transform;}
/* Nombres de servidor que no entran en el panel giran de un lado al otro en
   vez de cortarse con "..." — refreshServerNameMarquee() (server-folders.js)
   mide el overflow real y solo agrega esta clase (con --marquee-dist ya
   calculado) cuando de verdad hace falta; un nombre corto nunca se anima. */
#server-name-text.marquee{animation:server-name-marquee linear infinite;animation-duration:var(--marquee-duration,6s);}
@keyframes server-name-marquee{
  0%,12%{transform:translateX(0);}
  50%{transform:translateX(var(--marquee-dist,0));}
  88%,100%{transform:translateX(0);}
}
#server-name:hover #server-name-text.marquee{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  #server-name-text.marquee{animation:none;}
}
#channels-list{flex:1;overflow-y:auto;padding:8px 0 8px;}
.channel-group{margin-bottom:4px;}
.channel-group-header{display:flex;align-items:center;gap:4px;padding:6px 8px 3px 14px;cursor:pointer;color:var(--text-3);font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.channel-group-header:hover{color:var(--text-2);}
.channel-group-header .add-ch{margin-left:auto;font-size:.8rem;opacity:0;transition:opacity .15s;}
.channel-group-header:hover .add-ch{opacity:1;}
/* Channel — pill on hover/active */
.channel-item{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 14px;cursor:pointer;border-radius:var(--r-sm);margin:1px 6px;color:var(--text-3);font-size:.875rem;font-weight:500;transition:all .1s;position:relative;}
.channel-item:hover{background:var(--bg-3);color:var(--text-1);}
.channel-item.active{background:var(--bg-4);color:var(--text-0);font-weight:600;}
.unread-dot{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--text-0);pointer-events:none;}
.channel-item .ch-icon{font-size:.85rem;width:18px;text-align:center;flex-shrink:0;opacity:.7;}
.channel-item.active .ch-icon{opacity:1;}
.unread-badge{margin-left:auto;background:var(--bg-4);color:var(--text-2);font-size:.58rem;font-weight:700;border-radius:20px;padding:1px 6px;min-width:16px;text-align:center;}
.unread-badge.mention{background:var(--red);color:#fff;}
.ch-actions{margin-left:auto;display:none;gap:3px;}
.channel-item:hover .ch-actions{display:flex;}
.channel-item:hover .unread-badge{display:none;}

/* THEME BAR */
#theme-bar{display:flex;gap:6px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
#theme-bar span{font-size:.63rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
.theme-dot{width:16px;height:16px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0;}
.theme-dot:hover,.theme-dot.active{border-color:var(--text-0);transform:scale(1.2);}

/* USER BAR */
#user-bar{height:56px;background:var(--bg-0);display:flex;align-items:center;padding:0 10px;gap:10px;flex-shrink:0;border-top:1px solid var(--border);}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;cursor:pointer;overflow:hidden;position:relative;transition:all .15s;}
.user-avatar:hover{box-shadow:0 0 0 2px var(--accent);}
.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.user-status-dot{width:11px;height:11px;}
#username-display{flex:1;min-width:0;}
#username-display .uname{font-size:.83rem;font-weight:700;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#username-display .utag{font-size:.65rem;color:var(--text-3);}

/* CHAT AREA */
#chat-area{flex:1;display:flex;flex-direction:column;background:var(--bg-2);min-width:0;}
#chat-split-row{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;}
#call-stage-col{display:flex;flex-direction:column;flex-shrink:0;min-width:0;}
#chat-main-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;}
/* "Call stage" mode: active for the whole time a voice/stage channel is open
   (not just while someone's screen-sharing, like the old .split-view this
   replaces) — the call view is the primary content, same as Discord, and
   chat becomes an opt-in side panel you toggle with the bubble icon in the
   hero/header instead of always sitting full-height below a small call card. */
#chat-split-row.call-stage-mode{flex-direction:row;}
#chat-split-row.call-stage-mode #call-stage-col{display:flex;flex:1;min-width:0;overflow:hidden;background:radial-gradient(ellipse at center,#1a1b1e 0%,#000 75%);}
#chat-split-row.call-stage-mode #chat-main-col{flex:0 0 0;width:0;overflow:hidden;border-left:none;}
#chat-split-row.call-stage-mode.chat-open #chat-main-col{flex:0 0 360px;width:360px;border-left:1px solid var(--border);}
#chat-split-row.call-stage-mode #screen-share-area{flex:0 0 0;display:none;flex-wrap:wrap;gap:10px;padding:18px;align-content:center;align-items:center;justify-content:center;overflow:auto;}
/* Only actually takes space once the call is connected — otherwise (the
   pre-join hero, the stage lobby) this sat here empty at flex:1 inside the
   #call-stage-col column, splitting it in half with #voice-room-panel and
   squashing whatever the panel was showing into the bottom half (reported
   as "la pantalla cortada"). */
#chat-split-row.call-stage-mode.call-connected #screen-share-area{flex:1;display:flex;align-content:center;align-items:center;justify-content:center;}
#chat-split-row.call-stage-mode #screen-share-area.has-focused{align-content:flex-start;}
#chat-header{height:52px;display:flex;align-items:center;padding:0 16px;gap:10px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg-2);}
#chat-header .ch-name{font-weight:700;font-size:.9rem;color:var(--text-0);flex:1;min-width:0;letter-spacing:-.01em;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#chat-header .ch-name .ch-icon-hdr{font-size:.85rem;color:var(--text-3);}
.header-actions{display:flex;gap:2px;align-items:center;}
.header-actions .icon-btn.dm-hidden{display:none;}
#messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 16px 4px;display:flex;flex-direction:column;gap:0;}
#messages img,#messages video,#messages iframe{max-width:100%;height:auto;}
/* Video de YouTube incrustado: la regla de arriba (height:auto) lo dejaba en 150px de alto dentro de una
   caja 16:9 → franja negra abajo y reproductor recortado. Debe llenar toda la caja. */
.yt-embed{width:100%;}
.yt-embed iframe,#messages .yt-embed iframe{display:block;width:100%;height:100%;max-width:none;border:0;}

/* MESSAGES — no bubbles, clean look with a soft hover */
.msg-group{display:flex;gap:12px;margin-top:18px;padding:4px 0;}
.msg-avatar{width:36px;height:36px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;overflow:hidden;cursor:pointer;transition:opacity .15s;margin-top:1px;}
.msg-avatar:hover{opacity:.8;}
.msg-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.msg-body{flex:1;min-width:0;}
.msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
.msg-author{font-size:.85rem;font-weight:700;cursor:pointer;transition:color .1s;letter-spacing:-.01em;}
.msg-author:hover{color:var(--accent-g)!important;}
.msg-time{font-size:.67rem;color:var(--text-3);}
.msg-content{font-size:.9375rem;line-height:1.6;color:var(--text-1);word-break:break-word;white-space:pre-wrap;}
.msg-content .mention{background:rgba(124,58,237,.15);color:var(--accent-g);border-radius:4px;padding:1px 5px;cursor:pointer;font-weight:600;font-size:.875rem;}
.spoiler{background:var(--text-0);color:transparent;border-radius:3px;cursor:pointer;user-select:none;transition:background .1s;}
.spoiler.revealed{background:var(--bg-3);color:inherit;cursor:text;user-select:text;}
.msg-content code{background:var(--bg-3);border-radius:4px;padding:1px 5px;font-size:.875em;font-family:monospace;color:var(--accent-g);}
.msg-content pre{background:var(--bg-3);border-radius:var(--r-xs);padding:10px 12px;margin-top:6px;overflow-x:auto;font-size:.85em;font-family:monospace;}
.msg-img{max-width:min(320px,100%);max-height:300px;width:auto;height:auto;border-radius:var(--r-sm);margin-top:6px;cursor:pointer;display:block;border:1px solid var(--border);}
.msg-img-grid{display:flex;flex-wrap:wrap;gap:6px;max-width:min(420px,100%);}
.msg-img-grid .msg-img{max-width:140px;max-height:140px;width:140px;height:140px;object-fit:cover;margin-top:0;}
.msg-edited{font-size:.65rem;color:var(--text-3);}
/* Own message — subtle background */
.msg-mine .msg-content{color:var(--text-0);}
.msg-mine .msg-group{background:rgba(124,58,237,.04);border-radius:var(--r-sm);padding:6px 8px;margin:14px -8px 0;}
.msg-wrap{position:relative;padding:1px 8px;border-radius:var(--r-sm);transition:background .1s;}
.msg-wrap:hover{background:rgba(255,255,255,.03);}
.msg-continuation{display:flex;align-items:flex-start;gap:12px;padding-left:0;}
.cont-time{font-size:.62rem;color:transparent;width:36px;flex-shrink:0;text-align:right;padding-top:3px;transition:color .1s;}
.msg-wrap:hover .cont-time{color:var(--text-3);}
.msg-hover-actions{display:none;position:absolute;right:10px;top:-14px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 5px;gap:2px;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.msg-wrap:hover .msg-hover-actions{display:flex;}
.msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.reaction{background:var(--bg-3);border:1.5px solid var(--border);border-radius:20px;padding:3px 9px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:3px;transition:all .1s;}
.reaction:hover,.reaction.mine{background:var(--accent-glow);border-color:var(--accent);color:var(--accent-g);}
.reaction span{font-size:.7rem;color:var(--text-2);}
#dm-encrypt-btn.active{color:var(--green,#3ba55d);}
#dm-encrypt-btn.active:hover{color:var(--green,#3ba55d);}
.quick-react-popup{position:fixed;display:none;background:var(--bg-3);border:1px solid var(--border);border-radius:20px;padding:6px 8px;gap:4px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.quick-react-popup.open{display:flex;}
.quick-react-popup .qr-emoji{font-size:1.3rem;line-height:1;cursor:pointer;padding:5px;border-radius:50%;transition:background .12s,transform .12s;}
.quick-react-popup .qr-emoji:hover{background:var(--accent-glow);transform:scale(1.2);}
.quick-react-popup .qr-more{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--text-2);cursor:pointer;transition:background .12s,color .12s;}
.quick-react-popup .qr-more:hover{background:var(--accent-glow);color:var(--accent-g);}
.reply-preview{background:rgba(124,58,237,.07);border-left:2px solid var(--accent);padding:3px 8px;margin-bottom:2px;border-radius:0 var(--r-xs) var(--r-xs) 0;font-size:.75rem;color:var(--text-2);cursor:pointer;transition:background .15s;}
.reply-preview:hover{background:rgba(124,58,237,.15);}
.msg-wrap.jump-flash{animation:jumpFlash 1.6s ease;}
@keyframes jumpFlash{0%{background:rgba(124,58,237,.22);}100%{background:transparent;}}

/* TYPING */
.typing-indicator{padding:3px 16px;font-size:.75rem;color:var(--text-3);height:22px;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.typing-dots{display:flex;gap:3px;align-items:center;}
.typing-dots span{width:4px;height:4px;border-radius:50%;background:var(--accent-g);animation:bounce 1.2s ease-in-out infinite;}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* REPLY BAR */
.reply-bar{background:rgba(124,58,237,.06);border-top:1px solid rgba(124,58,237,.15);padding:7px 16px;margin:0;font-size:.78rem;color:var(--text-2);display:none;align-items:center;justify-content:space-between;flex-shrink:0;}
.reply-bar.show{display:flex;}

/* INPUT — pill moderno */
#input-area{padding:0 16px 16px;flex-shrink:0;position:relative;}
#mobile-input-spacer{display:none;}
#input-box{background:var(--bg-3);border-radius:14px;display:flex;align-items:flex-end;gap:6px;padding:8px 10px;border:1.5px solid var(--border);transition:all .15s;}
#input-box:focus-within{border-color:rgba(124,58,237,.4);box-shadow:0 0 0 3px var(--accent-glow);}
#msg-input{flex:1;background:none;border:none;outline:none;color:var(--text-0);font-family:var(--font);font-size:.9375rem;resize:none;max-height:200px;min-height:24px;line-height:1.55;padding:0;}
#msg-input::placeholder{color:var(--text-3);}
.input-btn{background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px 5px;border-radius:var(--r-xs);font-size:1.05rem;line-height:1;transition:all .1s;flex-shrink:0;}
.input-btn:hover{color:var(--accent-g);background:var(--bg-4);}

/* ══ PICKER — premium design ══ */
.picker-popup{
  position:absolute;bottom:82px;right:16px;
  background:var(--bg-1);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  width:420px;max-height:480px;
  display:none;flex-direction:column;
  z-index:200;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
}
.picker-popup.open{display:flex;}
/* Header with search */
.picker-header{padding:12px 12px 0;flex-shrink:0;}
.picker-search-wrap{display:flex;align-items:center;gap:8px;background:var(--bg-3);border-radius:10px;padding:8px 12px;border:1px solid var(--border);margin-bottom:10px;}
.picker-search-wrap svg{width:14px;height:14px;fill:var(--text-3);flex-shrink:0;}
.picker-search{background:none;border:none;outline:none;color:var(--text-0);font-family:var(--font);font-size:.875rem;flex:1;min-width:0;}
.picker-search::placeholder{color:var(--text-3);}
/* Tabs */
.picker-tabs{display:flex;gap:4px;padding:0 12px 10px;}
.picker-tab{flex:1;padding:6px 4px;border:none;background:none;color:var(--text-3);font-family:var(--font);font-size:.72rem;font-weight:700;cursor:pointer;border-radius:8px;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:2px;}
.picker-tab span.tab-icon{font-size:1.1rem;}
.picker-tab span.tab-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;}
.picker-tab:hover{background:var(--bg-3);color:var(--text-1);}
.picker-tab.active{background:var(--accent-glow);color:var(--accent-g);border:1px solid rgba(124,58,237,.2);}
/* Body scrollable */
.picker-body{flex:1;overflow-y:auto;padding:0 12px 12px;}
.picker-body::-webkit-scrollbar{width:3px;}
.picker-body::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:2px;}
/* Category headers */
.emoji-cat-title{font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:8px 2px 5px;position:sticky;top:0;background:var(--bg-1);z-index:1;}
/* Emoji grid */
.picker-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;margin-bottom:4px;}
.picker-item{font-size:1.5rem;text-align:center;cursor:pointer;border-radius:8px;padding:5px 2px;transition:background .1s,transform .1s;line-height:1.2;}
.picker-item:hover{background:var(--bg-4);transform:scale(1.2);}
/* Custom emoji grid */
.custom-emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.custom-emoji-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border-radius:8px;padding:6px 4px;transition:background .1s;}
.custom-emoji-item:hover{background:var(--bg-4);}
.custom-emoji-item img{width:32px;height:32px;object-fit:contain;border-radius:4px;}
.custom-emoji-item .ce-label{font-size:.55rem;color:var(--text-3);text-align:center;max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Sticker grid */
.sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sticker-item{background:var(--bg-3);border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;font-size:2.8rem;transition:all .15s;border:1.5px solid transparent;}
.sticker-item:hover{background:var(--bg-4);transform:scale(1.05);border-color:var(--accent);}
.sticker-label{font-size:.62rem;color:var(--text-2);margin-top:4px;display:block;font-weight:600;}
/* Custom image sticker grid (server settings + picker) */
.img-sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.img-sticker-item{background:var(--bg-3);border-radius:12px;padding:8px;text-align:center;cursor:pointer;transition:all .15s;border:1.5px solid transparent;}
.img-sticker-item:hover{background:var(--bg-4);transform:scale(1.05);border-color:var(--accent);}
.img-sticker-item img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;}
/* Inline custom emoji inside message text — slightly larger than text, Discord-like */
.msg-content img.inline-emoji{width:22px;height:22px;object-fit:contain;vertical-align:-6px;margin:0 1px;}
/* Emoji-only message: no text alongside, render big like Discord/WhatsApp */
.msg-content.emoji-only{font-size:2.6rem;line-height:1.3;}
.msg-content.emoji-only img.inline-emoji{width:2.6rem;height:2.6rem;vertical-align:-.5rem;margin:0 2px;}
/* GIF badge */
.gif-badge{display:inline-block;background:var(--accent);color:#fff;font-size:.5rem;font-weight:800;border-radius:3px;padding:1px 3px;vertical-align:super;margin-left:2px;}


/* MEMBERS — tarjetas compactas */
#members-panel{width:var(--members-w);background:var(--bg-1);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s;}
#members-panel.hidden{width:0;overflow:hidden;}
/* dm-mode used to hide this panel entirely; now it shows friends' activity instead, so no hiding rule here. */
#members-header{height:52px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--border);font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);flex-shrink:0;}
#members-list{flex:1;overflow-y:auto;padding:8px 0;}
/* ── SERVER ACTIVITY WIDGET (como Discord) ── */
#members-activity-widget{display:none;flex-shrink:0;border-bottom:1px solid var(--border);padding-bottom:8px;}
/* Sección aparte para mobile (pedido explícito: no depender de abrir el
   panel de Miembros para ver esto) — arriba de la lista de canales, visible
   directamente. Mismas tarjetas (.activity-artist-card) que la versión de
   desktop, pero sin el toggle colapsable: en un espacio ya angosto no vale
   la pena esconderlo detrás de un tap más. */
#channels-activity-widget-mobile{display:none;flex-shrink:0;border-bottom:1px solid var(--border);padding-bottom:8px;}
.mobile-activity-header{padding:10px 14px 4px;font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);}
.mobile-activity-body{display:flex;flex-direction:column;}
.members-activity-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);cursor:pointer;user-select:none;}
.activity-artist-card{display:flex;align-items:center;gap:10px;margin:0 8px 6px;padding:8px;background:var(--bg-3);border-radius:10px;}
.activity-artist-card img,.activity-artist-fallback{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--bg-4);display:flex;align-items:center;justify-content:center;color:var(--text-2);}
.activity-artist-name{font-size:.82rem;font-weight:700;color:var(--text-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.activity-artist-count{font-size:.7rem;color:var(--text-2);margin-top:1px;}
.members-category{padding:14px 8px 4px 14px;font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);}
.active-now-title{padding:14px 14px 10px;font-size:.95rem;font-weight:800;color:var(--text-0);}
.friend-active-card{margin:0 8px 8px;background:var(--bg-3);border-radius:12px;cursor:pointer;transition:background .12s;overflow:hidden;}
.friend-active-card:hover{background:var(--bg-4);}
.friend-active-card .member-name{font-size:.85rem;font-weight:700;color:var(--text-0);}
.friend-active-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.friend-active-row1{display:flex;align-items:center;gap:10px;padding:10px 12px;}
.friend-active-row2{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(0,0,0,.18);border-top:1px solid var(--border);}
.friend-active-row2 svg{flex-shrink:0;color:var(--text-3);}
.member-item{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 10px;border-radius:var(--r-sm);margin:1px 6px;cursor:pointer;transition:background .1s;}
.member-item:hover{background:var(--bg-3);}
.member-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;overflow:hidden;position:relative;}
.member-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.member-status{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--bg-1);z-index:3;pointer-events:none;}
.member-item{position:relative;}.member-avatar-wrap{position:relative;flex-shrink:0;}
.member-info{flex:1;min-width:0;}
.member-name{font-size:.83rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.member-item:hover .member-name{color:var(--text-0);}
.member-activity{font-size:.7rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px;margin-top:1px;}
.member-activity svg{flex-shrink:0;opacity:.85;}
.role-badge{display:inline-block;border-radius:4px;padding:1px 5px;font-size:.6rem;font-weight:700;}

/* DM */
.dm-item{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-sm);margin:1px 6px;cursor:pointer;transition:all .1s;position:relative;}
.dm-item:hover{background:var(--bg-3);}
.dm-item.active{background:var(--bg-4);}
.dm-unread{position:absolute;right:10px;background:var(--red);color:#fff;font-size:.58rem;font-weight:700;border-radius:20px;padding:1px 6px;}

/* CALL BAR */
#call-bar{background:rgba(16,185,129,.07);border-bottom:1px solid rgba(16,185,129,.15);padding:8px 16px;display:none;align-items:center;gap:12px;flex-shrink:0;}
#call-bar.active{display:flex;}
.call-info{flex:1;font-size:.875rem;color:var(--text-1);}
.call-timer{font-size:.78rem;color:var(--green);font-family:monospace;font-weight:700;}
.call-btn{padding:5px 14px;border-radius:var(--r-xs);border:none;font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;}
.call-btn.end{background:var(--red);color:#fff;}
#screen-share-btn.active{background:var(--green)!important;color:#fff!important;}
/* BUG FIX: this used to be unconditionally display:flex, so once a call had
   any tiles in it (see subscribeVoiceRoom), they kept showing here no
   matter which channel you switched to afterward — reported as "half the
   screen is covered" when you leave the voice channel for a text channel
   while still on a call. The persistent #call-bar strip at the top is the
   only thing that should follow you around; the actual tile grid should
   only show while you're looking at the call channel itself (mobile's
   simple stacked layout here, or the wide-screen split view further down).
   See .viewing-call-channel, toggled in _updateCallStageMode(). */
#screen-share-area{display:none;}
/* Requiere .call-connected además de .viewing-call-channel: antes esta regla
   sola ya mostraba #screen-share-area apenas se entraba al canal de voz, sin
   esperar a estar conectado — la protección de "no ocupar espacio hasta
   estar conectado" solo existía en la versión de escritorio ancho
   (.call-stage-mode.call-connected, más abajo). En mobile (donde
   .call-stage-mode nunca se aplica, ver _updateCallStageMode) el tile de
   Jitsi se montaba acá apenas tocabas "Unirse a voz"/"Solo escuchar" —
   incluso si el join fallaba después — y esa área con contenido real
   (aspect-ratio 16/9) empujaba/tapaba la tarjeta de "Unirse a voz" que
   seguía mostrándose debajo. Con .call-connected acá, la regla queda además
   más específica que la de .call-stage-mode de abajo, así que ya no depende
   del orden en la hoja de estilos. */
#chat-split-row.viewing-call-channel.call-connected #screen-share-area{display:flex;flex-wrap:wrap;gap:10px;padding:10px 16px 0;flex-shrink:0;}
#activity-stage{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:24px;overflow:auto;}
#chat-split-row.viewing-call-channel #activity-stage:not(:empty){display:flex;}
/* Mientras hay una activity corriendo, no tiene sentido mostrar la grilla
   de video al mismo tiempo — igual que Discord, la activity pasa a ser lo
   principal (los participantes se ven arriba en el header de la llamada). */
#chat-split-row.viewing-call-channel #screen-share-area:has(~ #activity-stage:not(:empty)){display:none;}

/* ── Activities: lanzador + Trivia ── */
.activity-launcher-card{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s;}
.activity-launcher-card:hover{background:var(--bg-4);border-color:var(--accent);}
.activity-launcher-emoji{font-size:1.6rem;width:40px;text-align:center;flex-shrink:0;}
.activity-launcher-name{font-weight:700;font-size:.9rem;color:var(--text-0);}
.activity-launcher-desc{font-size:.76rem;color:var(--text-2);margin-top:1px;line-height:1.35;}
.trivia-card{position:relative;width:100%;max-width:420px;background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;}
.trivia-question{font-size:1.05rem;font-weight:700;color:var(--text-0);margin-bottom:14px;line-height:1.4;}
.trivia-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.trivia-option-btn{width:100%;padding:10px 14px;background:var(--bg-3);border:1.5px solid var(--border);border-radius:10px;color:var(--text-0);font-family:var(--font);font-size:.85rem;font-weight:600;cursor:pointer;text-align:left;transition:background .15s,border-color .15s;}
.trivia-option-btn:hover:not(:disabled){background:var(--bg-4);border-color:var(--accent);}
.trivia-option-btn.selected{background:var(--accent);border-color:var(--accent);color:#fff;}
.trivia-option-btn:disabled{cursor:default;opacity:.75;}
.trivia-meta{font-size:.76rem;color:var(--text-2);margin-top:4px;}
.trivia-meta a{color:var(--accent);text-decoration:none;font-weight:600;}
.trivia-correct{font-size:.95rem;font-weight:700;color:var(--green,#3ba55c);margin-bottom:8px;}
.trivia-input{width:100%;background:var(--bg-3);border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-0);font-family:var(--font);font-size:.85rem;outline:none;}
.screen-share-box{background:#000;border-radius:var(--r-sm);overflow:hidden;position:relative;flex:2 1 420px;width:min(420px,100%);max-width:min(900px,90%);aspect-ratio:16/9;}
.screen-share-box video{width:100%;height:100%;object-fit:contain;background:#000;}
.screen-share-label{position:absolute;bottom:0;left:0;right:0;padding:6px 10px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:.75rem;font-weight:600;}
/* NOTA: hasta hace poco acá vivía .screen-tile-avatar, una placa chica con
   el avatar de quien comparte superpuesta sobre el video. Se sacó porque
   quedaba redundante: esa persona ya tiene su propio tile de avatar/cámara
   aparte en la grilla (ver tileHtml en voice-stage-radio.js, que SIEMPRE se
   muestra junto al de video, no solo cuando hay cámara) — el tile de video
   ahora solo lleva el nombre superpuesto, como en Discord. */
/* Call tiles — both the screen-share box above (given this class too, see
   _renderRemoteTrack/toggleScreenShare) and the plain avatar tiles for
   participants who aren't sharing anything, so they lay out together in
   #screen-share-area as one grid. Click any tile to focus it — matches
   Sparky's reference: it grows to a big tile up top and the rest shrink
   into a thumbnail strip, instead of a real draggable PIP. */
.call-tile{background:#18191c;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 280px;max-width:640px;aspect-ratio:16/9;cursor:pointer;}
.call-tile.focused{flex-basis:100%;max-width:none;order:-1;aspect-ratio:auto;height:min(65vh,560px);}
#screen-share-area.has-focused .call-tile:not(.focused){flex:0 0 150px;max-width:150px;aspect-ratio:16/9;}
.call-tile .tile-avatar{width:30%;aspect-ratio:1;max-width:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;color:#fff;}
#screen-share-area.has-focused .call-tile:not(.focused) .tile-avatar{font-size:.9rem;}
.call-tile .tile-name{position:absolute;left:8px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:6px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.call-tile .tile-mute-icon{position:absolute;right:8px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.call-btn.mute{background:var(--bg-4);color:var(--text-1);}

/* VIDEO MODAL */
#video-modal{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:5000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
#video-modal.open{display:flex;}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;max-width:880px;width:100%;padding:0 16px;}
.video-box{background:var(--bg-2);border-radius:16px;overflow:hidden;aspect-ratio:16/9;position:relative;border:1px solid var(--border);}
.video-box video{width:100%;height:100%;object-fit:cover;}
.video-box .vid-name{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.65);color:#fff;font-size:.78rem;padding:3px 8px;border-radius:var(--r-xs);backdrop-filter:blur(6px);}
.video-controls{display:flex;gap:12px;}
.vid-btn{width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.vid-btn.cam,.vid-btn.mic{background:var(--bg-3);color:var(--text-1);}
.vid-btn.cam:hover,.vid-btn.mic:hover{background:var(--bg-4);}
.vid-btn.hangup{background:var(--red);color:#fff;}
.vid-btn.off{background:var(--red);}

/* PROFILE POPUP */
#profile-popup{position:fixed;background:var(--bg-2);border:1px solid var(--border);border-radius:16px;width:276px;z-index:2000;box-shadow:0 16px 48px rgba(0,0,0,.6);display:none;overflow:hidden;}
#profile-popup.open{display:block;}
.profile-banner{height:68px;}
.profile-body{padding:0 16px 16px;}
.profile-ava{width:68px;height:68px;border-radius:18px;border:4px solid var(--bg-2);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;color:#fff;}
.profile-ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.profile-name{font-size:.95rem;font-weight:700;color:var(--text-0);margin-top:8px;letter-spacing:-.01em;}
.profile-tag{font-size:.7rem;color:var(--text-3);}
.profile-status{font-size:.78rem;color:var(--text-2);margin-top:4px;font-style:italic;}
.profile-roles{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;}
.profile-actions{display:flex;gap:8px;margin-top:12px;}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .15s;}
.modal-overlay.open{opacity:1;pointer-events:all;backdrop-filter:blur(6px);}
.modal{background:var(--bg-2);border:1px solid var(--border);border-radius:20px;padding:28px;width:500px;max-width:95vw;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 0 0 1px var(--border),0 40px 80px rgba(0,0,0,.6);}
.ch-type-warning{font-size:.78rem;color:var(--text-2);background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:-6px 0 10px;line-height:1.4;}
/* Card-based channel type picker (create/edit channel modals) — radio-style
   cards with icon + title + description, replacing the old plain <select>.
   The <select> itself stays in the DOM (hidden) as the actual source of
   truth every other function reads/writes — selectChannelTypeCard() just
   keeps it in sync so nothing else in the file needs to change. */
.ch-type-cards{max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:12px;}
.ch-type-card{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;}
.ch-type-card:last-child{border-bottom:none;}
.ch-type-card:hover{background:var(--bg-3);}
.ch-type-card.selected{background:color-mix(in srgb, var(--accent) 14%, transparent);}
.ch-type-card-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--text-3);flex-shrink:0;margin-top:2px;position:relative;transition:border-color .1s;}
.ch-type-card.selected .ch-type-card-radio{border-color:var(--accent);}
.ch-type-card.selected .ch-type-card-radio::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--accent);}
.ch-type-card-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-2);margin-top:1px;}
.ch-type-card.selected .ch-type-card-icon{color:var(--accent);}
.ch-type-card-info{flex:1;min-width:0;}
.ch-type-card-title{font-size:.875rem;font-weight:600;color:var(--text-0);display:flex;align-items:center;gap:5px;}
.ch-type-card-desc{font-size:.75rem;color:var(--text-3);margin-top:2px;line-height:1.35;}
/* Subcategory divider inside a channel category — groups the channels listed
   under it without making them all forums. Purely structural, not clickable. */
.channel-divider{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:10px 8px 3px 14px;user-select:none;}
.channel-divider::after{content:"";flex:1;height:1px;background:var(--border);}
/* Folder ("carpeta de canal"): a collapsible group of channels, unlike the flat
   divider above — click toggles which channels under it are shown at all. */
.channel-folder{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 10px;border-radius:var(--r-xs);cursor:pointer;font-size:.78rem;font-weight:700;color:var(--text-2);user-select:none;}
.channel-folder:hover{background:var(--bg-3);color:var(--text-0);}
.channel-folder .ch-chevron{transition:transform .12s;flex-shrink:0;color:var(--text-3);}
.channel-folder.collapsed .ch-chevron{transform:rotate(-90deg);}
.channel-folder .ch-actions{margin-left:auto;display:none;gap:2px;}
.channel-folder:hover .ch-actions{display:flex;}
.channel-item.in-folder{padding-left:30px;}
/* Visually tie a folder header to the channels grouped under it — a shared
   tinted box (rounded top on the header, rounded bottom on the last member)
   instead of just indentation, closer to how a forum's grouping reads. */
.channel-folder.has-members{background:var(--bg-3);border-radius:var(--r-sm) var(--r-sm) 0 0;margin:1px 6px 0;}
.channel-item.in-folder{background:var(--bg-3);border-radius:0;margin:0 6px;}
.channel-item.in-folder.last-in-folder{border-radius:0 0 var(--r-sm) var(--r-sm);margin-bottom:2px;}
.channel-item.in-folder.active{background:var(--bg-4);}
.modal-content{background:var(--bg-2);border:1px solid var(--border);border-radius:20px;width:500px;max-width:95vw;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 0 0 1px var(--border),0 40px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;}
.modal-content>*:not(.modal-header){padding-left:24px;padding-right:24px;}
.modal-content>*:last-child{padding-bottom:24px;}
.modal-content>.modal-header+*{padding-top:20px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-header h2{font-size:1.15rem;font-weight:700;color:var(--text-0);letter-spacing:-.02em;display:flex;align-items:center;gap:8px;margin:0;}
.modal h2{font-size:1.15rem;font-weight:700;color:var(--text-0);margin-bottom:6px;letter-spacing:-.02em;}
.modal .sub{color:var(--text-2);font-size:.85rem;margin-bottom:18px;}
.modal label{display:block;font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px;margin-top:14px;}
.modal input:not([type="checkbox"]):not([type="radio"]),.modal select,.modal textarea{width:100%;background:var(--bg-3);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;color:var(--text-0);font-family:var(--font);font-size:.9rem;outline:none;transition:all .15s;}
.modal input[type="checkbox"],.modal input[type="radio"]{width:auto;flex-shrink:0;}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.modal textarea{resize:vertical;min-height:70px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}
.modal .close-btn{position:absolute;top:14px;right:14px;background:var(--bg-4);border:none;color:var(--text-2);font-size:.85rem;cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.modal .close-btn:hover{background:var(--bg-5);color:var(--text-0);}
.tab-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px;}
.tab-btn{padding:8px 14px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-2);font-family:var(--font);font-size:.875rem;cursor:pointer;transition:all .15s;margin-bottom:-1px;}
.tab-btn.active{color:var(--accent-g);border-bottom-color:var(--accent);}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* MISC */
.color-dot{width:18px;height:18px;border-radius:6px;display:inline-block;border:2px solid transparent;cursor:pointer;transition:all .15s;}
.color-dot.selected{border-color:#fff;transform:scale(1.1);}
.color-picker-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center;}
.color-picker-row input[type="color"]{width:26px;height:26px;padding:2px;border-radius:6px;cursor:pointer;flex-shrink:0;}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-3);}
.spin-loader svg{animation:spinLoader .8s linear infinite;}
@keyframes spinLoader{to{transform:rotate(360deg)}}
.empty-state .big-icon{font-size:3.5rem;}
.empty-state h3{font-size:.95rem;font-weight:600;color:var(--text-2);}
/* VOICE CHANNEL — pre-join hero (Discord-style gradient screen with a
   participant preview and a big join button). #voice-room-panel is hidden
   entirely once connected — see renderVoiceRoom — the live call view is
   #screen-share-area's tile grid instead, styled up near .call-tile. */
#voice-room-panel{flex:1;display:flex;flex-direction:column;min-height:0;}
.voice-hero{flex:1;display:flex;flex-direction:column;min-height:0;background:radial-gradient(circle at 30% 20%,color-mix(in srgb, var(--accent) 55%, #1a1440) 0%,#241a4d 45%,#100c26 100%);color:#fff;position:relative;overflow:hidden;}
.voice-hero-header{position:absolute;top:16px;left:18px;display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.85);}
.voice-hero-header-icon{opacity:.85;display:flex;}
.voice-hero-center{margin:auto;text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;}
.voice-hero-preview{display:grid;grid-template-columns:repeat(2,64px);gap:6px;margin-bottom:18px;}
.voice-hero-preview:empty{display:none;}
.voice-hero-preview-tile{width:64px;height:64px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;color:#fff;overflow:hidden;}
.voice-hero-icon-big{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.voice-hero-title{font-size:1.3rem;font-weight:800;}
.voice-hero-sub{font-size:.85rem;color:rgba(255,255,255,.75);margin-top:4px;max-width:340px;}
.voice-hero-buttons{display:flex;gap:10px;margin-top:20px;}
.voice-hero-buttons .btn{border-radius:24px;padding:9px 20px;font-weight:700;}
.voice-hero-buttons .voice-room-join{background:#fff;color:#1a1440;}
.voice-hero-buttons .voice-room-join.btn-ghost{background:rgba(255,255,255,.12);color:#fff;}
.voice-hero-text{display:contents;}
.voice-hero-join .voice-hero-preview{order:-1;}
.voice-hero-join .voice-hero-icon-big{order:0;}
/* STAGE LOBBY — "Esperando a que inicie el escenario" waiting room, shown
   instead of the normal voice-hero while calls/{id}/stage.started is false.
   See renderStageLobby / subscribeStageState. */
.stage-lobby-options{display:flex;flex-direction:column;gap:8px;margin-top:22px;width:340px;max-width:88vw;text-align:left;}
.stage-lobby-option{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:10px;padding:12px 14px;cursor:pointer;transition:background .15s;}
.stage-lobby-option:hover{background:rgba(255,255,255,.16);}
.stage-lobby-option-icon{flex-shrink:0;width:20px;display:flex;align-items:center;justify-content:center;opacity:.9;}
.stage-lobby-option-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.stage-lobby-option-text strong{font-size:.85rem;font-weight:700;}
.stage-lobby-option-text small{font-size:.72rem;color:rgba(255,255,255,.6);}
.stage-lobby-option-chevron{opacity:.5;font-size:1.1rem;flex-shrink:0;}
.stage-lobby-waiting{margin-top:16px;font-size:.78rem;color:rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;gap:6px;min-height:16px;}
.stage-lobby-waiting:empty{margin-top:0;}
.stage-lobby-waiting-dot{width:7px;height:7px;border-radius:50%;background:#e8a33d;display:inline-block;flex-shrink:0;}
.notification-toast{position:fixed;bottom:24px;right:24px;background:var(--bg-3);border:1px solid var(--border);border-radius:14px;padding:12px 18px;font-size:.85rem;color:var(--text-0);z-index:9999;transform:translateX(130%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 32px rgba(0,0,0,.4);max-width:280px;}
.notification-toast.show{transform:translateX(0);}
#context-menu{position:fixed;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:6px;z-index:3000;box-shadow:0 12px 40px rgba(0,0,0,.5);min-width:180px;display:none;opacity:0;transform:scale(.95);transition:opacity .12s ease,transform .12s ease;}
#context-menu.open{display:block;opacity:1;transform:scale(1);}
.ctx-item{padding:7px 12px;border-radius:var(--r-xs);font-size:.85rem;cursor:pointer;color:var(--text-1);display:flex;align-items:center;gap:8px;transition:background .1s;}
.ctx-item:hover{background:var(--accent);color:#fff;}
.ctx-item.danger:hover{background:var(--red);}
.ctx-sep{height:1px;background:var(--border);margin:4px 0;}
.toggle{width:38px;height:20px;background:var(--bg-5);border-radius:10px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;display:inline-block;}
.toggle.on{background:var(--accent);}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;}
.toggle.on::after{left:20px;}
.online-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:3px 10px;font-size:.68rem;color:var(--text-2);font-weight:500;}
.online-pulse{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;}
.nova-tag{color:var(--accent-g);font-weight:700;}
.bot-badge{display:inline-block;background:var(--accent);color:#fff;font-size:.56rem;font-weight:700;border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:middle;}
.gradient-text{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-g) 50%,var(--pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
input[type=color]{width:32px;height:32px;border:none;border-radius:var(--r-xs);cursor:pointer;padding:0;background:none;}
.list-item-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-3);border-radius:var(--r-sm);margin-bottom:6px;transition:background .1s;}
.list-item-row:hover{background:var(--bg-4);}
.section-title{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px;margin-top:18px;}
.invite-code-box{background:var(--bg-3);border-radius:var(--r-sm);padding:10px 14px;font-family:monospace;font-size:.875rem;color:var(--accent-g);display:flex;align-items:center;justify-content:space-between;margin-top:8px;border:1.5px solid var(--border);}
/* THEME CARDS in settings */
.theme-card{background:var(--bg-3);border:2px solid var(--border);border-radius:var(--r-sm);padding:8px;cursor:pointer;text-align:center;transition:all .15s;font-size:.78rem;color:var(--text-2);font-weight:600;}
.theme-card:hover{border-color:var(--accent);color:var(--text-0);}
.theme-card.active{border-color:var(--accent);color:var(--accent-g);background:var(--accent-glow);}
.theme-preview{height:40px;border-radius:var(--r-xs);margin-bottom:6px;}
/* THEME BAR — hidden, moved to settings */
#theme-bar{display:none;}
.live-badge{display:inline-flex;}
#server-bar-toggle{display:none;}
/* ══ SCROLLBARS ══ */
*{scrollbar-width:thin;scrollbar-color:var(--bg-5) transparent;}
*::-webkit-scrollbar{width:4px;height:4px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:4px;}
*::-webkit-scrollbar-thumb:hover{background:var(--accent);}
.pinned-bar{background:rgba(245,158,11,.07);border-left:3px solid var(--yellow);padding:6px 12px;margin:0 16px 8px;border-radius:0 var(--r-xs) var(--r-xs) 0;font-size:.78rem;color:var(--yellow);display:none;}
.pinned-bar.show{display:block;}

/* ══ RESPONSIVE MOBILE ══ */
@media (max-width: 768px) {
  :root{--sidebar-w:0px;--channels-w:100vw;--members-w:0px;}
  /* The edge-hugging calc above needs a real --sidebar-w to divide by —
     it's 0 here since the rail becomes a horizontal row on mobile, so pin
     back to a fixed small offset instead of letting the calc go haywire. */
  .server-unread-pill{left:-10px;}
  .panel-resize-handle{display:none;}
  #channels-activity-widget-mobile:not(:empty){display:block;}

  /* App container full screen */
  #app{position:fixed;inset:0;overflow:hidden;}

  /* Server settings modal: the desktop version puts a 220px-fixed sidebar
     next to the content, side by side — on a narrow phone that left almost
     no room for the content (a 375px-wide screen only had ~155px left),
     which is what made it "look terrible" on mobile. Now it behaves like
     Discord's mobile settings: full-screen category list by default, and
     tapping a category swaps to a full-screen view of just that section
     with a back button, via the .ss-mobile-viewing class toggled by
     openSsSection()/closeSsMobileSection() in JS. */
  #server-settings-modal{padding:0;}
  #ss-layout{max-width:100%;width:100%;height:100%;border-radius:0;}
  #ss-sidebar{width:100%;padding-top:56px;}
  #ss-main-content{display:none;}
  #server-settings-modal.ss-mobile-viewing #ss-sidebar{display:none;}
  #server-settings-modal.ss-mobile-viewing #ss-main-content{display:block;width:100%;}
  #server-settings-modal.ss-mobile-viewing #ss-mobile-back{display:flex;}

  /* Bottom nav bar (servers) */
  #server-bar{
    position:fixed;bottom:0;left:0;right:0;top:auto;
    width:100%;height:60px;
    flex-direction:row;justify-content:flex-start;
    padding:0 10px;
    border-right:none;border-top:1px solid var(--border);
    z-index:200;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    gap:4px;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  #server-bar::-webkit-scrollbar{height:0;}
  #server-bar{scrollbar-width:none;}
  /* Same fix as the desktop width:100% above, but for the perpendicular axis:
     in this row-direction mobile bar, #server-icons-list shrinks to content
     HEIGHT instead of width, so a badge/pill using top/bottom offsets was
     getting clipped here even after the desktop fix. */
  #server-icons-list{height:100%;}
  #server-bar .server-sep{width:1px;height:28px;margin:0 4px;flex-shrink:0;}
  #server-bar .server-icon{flex-shrink:0;}
  #server-bar #dm-avatar-rail{flex-direction:row;gap:4px;}
  #server-bar .dm-rail-avatar{margin-bottom:0;}
  #server-bar #dm-avatar-rail-sep{width:1px;height:28px;margin:0 4px;}
  #server-bar #dm-btn,#server-bar #add-server-btn{flex-shrink:0;}
  /* Key to the fix: in flexbox, a child without flex-shrink:0 or its own width
     shrinks to fit its parent instead of overflowing — that kept
     #server-bar from detecting content to scroll, so no more than
     ~4 servers would show up on mobile. We force the list to grow with its
     real content and never shrink. */
  #server-icons-list{
    flex-direction:row;align-items:center;gap:4px;
    overflow-y:visible;overflow-x:visible;max-height:none;
    flex-shrink:0;width:max-content;
  }
  .srvbar-fade{top:0;bottom:0;left:auto;right:auto;width:16px;height:auto;}
  .srvbar-fade-a{left:0;background:linear-gradient(to right,var(--bg-0),transparent);}
  .srvbar-fade-b{right:0;background:linear-gradient(to left,var(--bg-0),transparent);}

  /* Toggle button to hide/show the server bar — mobile only */
  #server-bar-toggle{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:10px;bottom:66px;
    width:30px;height:30px;border-radius:50%;
    background:var(--bg-3);border:1px solid var(--border);
    color:var(--text-2);z-index:201;cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    transition:bottom .25s cubic-bezier(.4,0,.2,1);
  }
  body.server-bar-hidden #server-bar{transform:translateY(100%);}
  /* Antes esto bajaba el botón a bottom:10px al ocultar la barra de
     servidores, para "llenar" visualmente el espacio que dejaba — pero esa
     posición cae justo encima del botón de enviar mensaje del input,
     tapándolo. Se queda fijo en la misma altura siempre, nunca lo tapa. */
  body.server-bar-hidden #chat-area{bottom:0;}
  body.server-bar-hidden #channels-panel{bottom:0;}
  body.server-bar-hidden #mobile-overlay{bottom:0;}
  body.server-bar-hidden .notification-toast{bottom:14px;}

  /* Slide-in sidebar (channels panel) */
  #channels-panel{
    position:fixed;
    top:0;left:0;bottom:60px;
    width:min(300px,85vw);
    z-index:150;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  #channels-panel.mobile-open{
    transform:translateX(0);
    box-shadow:8px 0 40px rgba(0,0,0,.5);
  }

  /* Overlay when sidebar is open */
  #mobile-overlay{
    display:none;
    position:fixed;inset:0;bottom:60px;
    background:rgba(0,0,0,.55);
    z-index:140;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  #mobile-overlay.show{display:block;}

  /* Chat area fills remaining space */
  #chat-area{
    position:fixed;
    top:0;left:0;right:0;
    bottom:60px;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* Messages scrollable area */
  #messages{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 10px 4px;
    overscroll-behavior:contain;
  }

  /* Input stays above bottom bar */
  #input-area{padding:0 8px 10px;flex-shrink:0;}
  #input-box{border-radius:12px;}
  #msg-input{font-size:16px;} /* Prevents iOS zoom on focus */

  /* Spacer between the messages and the input — keeps #server-bar-toggle
     (the floating show/hide communities button) from covering the send button */
  #mobile-input-spacer{display:block;flex-shrink:0;height:44px;transition:height .25s cubic-bezier(.4,0,.2,1);}
  body.server-bar-hidden #mobile-input-spacer{height:0;}

  /* Picker popup repositioned for mobile */
  .picker-popup{
    position:fixed;
    bottom:70px;
    left:4px;right:4px;
    width:auto;
    max-height:55vh;
    border-radius:16px;
  }

  /* Header */
  #chat-header{padding:0 10px;gap:6px;flex-shrink:0;}
  #chat-header .ch-name{font-size:.85rem;}
  #mobile-menu-btn{display:flex!important;}

  /* Hide overflow header buttons on mobile */
  .mobile-hide{display:none!important;}
  #mobile-more-btn{display:flex!important;}

  /* Header actions don't wrap */
  .header-actions{flex-shrink:0;gap:0;}

  /* Members panel hidden on mobile by default — but can be opened as a
     slide-in overlay via toggleMembers() (see JS), since the button existed
     but the function it called never did, so tapping it silently did
     nothing and there was no other way to see who's in the server. */
  #members-panel{display:none!important;}
  #members-panel.mobile-visible{
    display:flex!important;position:fixed;top:0;right:0;bottom:0;
    width:78vw;max-width:300px;z-index:500;
    box-shadow:-8px 0 32px rgba(0,0,0,.5);
  }
  #members-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:499;}
  #members-backdrop.show{display:block;}

  /* Profile popup full-width on mobile */
  #profile-popup{width:calc(100vw - 24px);left:12px!important;right:12px!important;max-height:calc(100vh - 24px);overflow-y:auto;}

  /* Context menu safe positioning */
  #context-menu{max-width:calc(100vw - 24px);}

  /* Modals: centered on mobile (not a bottom-sheet) so they never get cut off by the viewport */
  .modal-overlay{align-items:center;padding:16px;}
  .modal,.modal-content{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100vh - 32px)!important;
    border-radius:16px!important;
    margin:0;
  }
  .modal{padding:20px 16px;}

  /* Server settings modal */
  #server-settings-modal{max-height:92vh!important;border-radius:20px 20px 0 0;overflow:hidden;}

  /* Toast position */
  .notification-toast{bottom:70px;right:12px;left:12px;max-width:none;text-align:center;}
  /* Same reasoning as the toast above: the 60px bottom nav bar would
     otherwise sit on top of (or under) this fixed-position mini-bar. */
  #radio-mini-bar{bottom:70px;left:10px;right:10px;max-width:none;}

  /* Live badge ahora vive dentro de #channels-header (flujo normal), ya no necesita override de posición en mobile */
  /* En mobile no alcanza el ancho para el nombre completo + la pill juntos
     (la pill no se achica, así que el nombre terminaba recortado a unos
     pocos caracteres) — se oculta acá, el nombre tiene prioridad. */
  #channels-header .live-badge{display:none;}

  /* Message actions on touch: ya NO se muestran siempre — se abren manteniendo
     presionado el mensaje (hoja inferior, ver bloque "TÁCTIL" al final). */

  /* Call bar en mobile: antes era la misma tira de pastillas con texto de
     escritorio nomás con flex-wrap — con 7 botones de texto eso se
     amontonaba en 2-3 filas feas arriba de la pantalla. Ahora es una barra
     flotante de íconos circulares, pegada abajo (estilo la referencia de
     Discord que pasó Fernando), arriba del bottom nav de servers
     (#server-bar, 60px) — mismo criterio que .notification-toast/
     #radio-mini-bar más arriba en este archivo. call-info/call-timer/
     call-participants se ocultan: el nombre del canal ya se ve en
     #chat-header arriba, no hace falta repetirlo acá abajo. */
  #call-bar.active{
    /* Controles de la llamada EN el flujo, justo debajo del header del canal. Antes flotaban
       encima de la caja de escribir (se superponían con el input y con el último mensaje). */
    position:static;transform:none;width:auto;max-width:none;
    background:linear-gradient(#1c1d21,#17181b);
    border:none;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;
    padding:6px 10px;gap:10px;justify-content:center;
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    box-shadow:none;z-index:auto;
  }
  #call-bar.active::-webkit-scrollbar{display:none;}
  #call-bar.active .call-info,#call-bar.active #call-participants{display:none;}
  /* En celular el chat siempre está visible: el botón de mostrar/ocultar chat sobra. */
  #call-bar.active .call-btn[onclick="toggleCallChat()"]{display:none;}
  #call-bar.active .call-btn{
    flex:0 0 auto;width:42px;height:42px;min-width:0;padding:0;margin:0;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
  }
  #call-bar.active .call-btn span{display:none;} /* solo ícono en mobile */
  #call-bar.active .call-btn svg{width:18px;height:18px;flex-shrink:0;}
  #call-bar.active .call-btn.mute.muted{background:var(--red);color:#fff;}
  #call-bar.active .call-btn.end{width:56px;border-radius:21px;order:99;}

  /* Participantes en celular: UNA tira horizontal compacta (avatar + nombre) en vez de una grilla
     de 2 columnas de cuadrados enormes que se comía la pantalla. Las pantallas compartidas /
     cámaras sí son tarjetas grandes dentro de la misma tira (deslizable). */
  #chat-split-row.viewing-call-channel.call-connected #screen-share-area{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;padding:10px 12px 12px;align-items:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0;
    background:radial-gradient(ellipse at top,#241a4d 0%,#100c26 100%);border-bottom:1px solid rgba(255,255,255,.06);
  }
  #screen-share-area::-webkit-scrollbar{display:none;}
  #screen-share-area .call-tile:not(.screen-share-box),
  #screen-share-area.has-focused .call-tile:not(.focused):not(.screen-share-box){
    flex:0 0 64px;width:64px;max-width:64px;aspect-ratio:auto;background:transparent;border-radius:0;
    flex-direction:column;justify-content:flex-start;gap:5px;overflow:visible;cursor:default;
  }
  #screen-share-area .call-tile:not(.screen-share-box) .tile-avatar{width:54px;height:54px;max-width:none;font-size:1.25rem;flex-shrink:0;}
  #screen-share-area .call-tile:not(.screen-share-box) .tile-name{position:static;background:none;padding:0 0 2px;max-width:64px;font-size:.68rem;line-height:1.35;color:var(--text-1);text-align:center;}
  #screen-share-area .call-tile:not(.screen-share-box) .tile-mute-icon{right:6px;top:36px;bottom:auto;}
  #screen-share-area .call-tile.screen-share-box{flex:0 0 min(78vw,360px);aspect-ratio:16/10;max-width:none;}
  #screen-share-area .call-tile.screen-share-box.focused{flex:0 0 100%;aspect-ratio:16/10;height:auto;order:-1;}

  /* Voice channel pre-join hero: el mismo motivo que el call-bar de arriba
     — el nombre del canal ya está en #chat-header, repetirlo en la
     esquinita de .voice-hero-header (pensada para cuando el hero ocupa una
     columna aparte en escritorio) era ruido puro en mobile. Además, en
     mobile #call-stage-col se apila ARRIBA de #chat-main-col en vez de al
     lado (#chat-split-row es flex-column por default, ver más arriba en
     este archivo) — así que un hero de tamaño escritorio se comía media
     pantalla y empujaba el chat (que las voice channels muestran siempre,
     no es un modal aparte) bien abajo. Se achica todo — ícono, textos,
     botones — para que quede una franja compacta arriba, estilo la tarjeta
     chica que Discord mobile pone sobre el chat de un canal de voz, y el
     resto de la pantalla quede para los mensajes. */
  .voice-hero-header{display:none;}
  .voice-hero-center{padding:14px 20px;}
  .voice-hero-preview{grid-template-columns:repeat(2,44px);gap:5px;margin-bottom:10px;}
  .voice-hero-preview-tile{width:44px;height:44px;font-size:.95rem;}
  .voice-hero-icon-big{width:44px;height:44px;margin-bottom:8px;}
  .voice-hero-icon-big svg{width:20px;height:20px;}
  .voice-hero-title{font-size:1.05rem;}
  .voice-hero-sub{font-size:.78rem;margin-top:2px;}
  .voice-hero-buttons{margin-top:12px;gap:8px;}
  .voice-hero-buttons .btn{padding:7px 16px;font-size:.82rem;}

  /* Pre-join en celular: una sola franja de ~60px (ícono · nombre y estado · avatares · botones)
     en vez de una tarjeta de ~195px. Solo para .voice-hero-join (el lobby de escenarios no cambia). */
  .voice-hero-join{flex:none;}
  .voice-hero-join .voice-hero-center{margin:0;width:100%;padding:10px 12px;flex-direction:row;align-items:center;gap:10px;text-align:left;}
  .voice-hero-join .voice-hero-icon-big{width:38px;height:38px;margin:0;flex-shrink:0;order:0;}
  .voice-hero-join .voice-hero-icon-big svg{width:18px;height:18px;}
  .voice-hero-join .voice-hero-text{display:block;flex:1;min-width:0;}
  /* El nombre del canal ya está en el header del chat, justo debajo: acá el texto principal es
     el estado (quién está en la sala), que es lo que de verdad importa antes de unirse. */
  .voice-hero-join .voice-hero-title{display:none;}
  .voice-hero-join .voice-hero-sub{font-size:.88rem;font-weight:600;color:#fff;margin-top:0;max-width:none;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .voice-hero-join .voice-hero-preview{order:0;display:flex;grid-template-columns:none;gap:0;margin:0;flex-shrink:0;}
  .voice-hero-join .voice-hero-preview-tile{width:26px;height:26px;border-radius:50%;font-size:.7rem;border:2px solid #241a4d;margin-left:-8px;}
  .voice-hero-join .voice-hero-preview-tile:first-child{margin-left:0;}
  .voice-hero-join .voice-hero-buttons{margin:0;gap:6px;flex-shrink:0;}
  .voice-hero-join .voice-hero-buttons .btn{padding:8px 14px;font-size:.8rem;border-radius:20px;white-space:nowrap;}
  .voice-hero-join .voice-hero-buttons .btn-ghost:not(:only-child){padding:8px 10px;}
  .voice-hero-join .voice-hero-buttons .btn-ghost:not(:only-child) .vr-label{display:none;}

  /* Video modal controls */
  .video-controls{gap:8px;}
  .vid-btn{width:44px;height:44px;}
}

/* ══ SMALL PHONES (≤480px) ══ */
@media (max-width: 480px) {
  /* Auth */
  #auth-screen{padding:0;align-items:flex-end;}
  .auth-card{
    width:100%;
    border-radius:20px 20px 0 0;
    padding:28px 20px 32px;
    max-height:94vh;
    overflow-y:auto;
  }
  .auth-card h1{font-size:1.45rem;}

  /* Messages */
  .msg-group{gap:8px;margin-top:14px;}
  .msg-avatar{width:30px;height:30px;border-radius:8px;}
  .msg-content{font-size:.875rem;}
  .msg-continuation{gap:8px;}
  .cont-time{width:30px;}

  /* Input */
  #input-area{padding:0 6px 8px;}
  .input-btn{padding:3px 4px;font-size:.95rem;}

  /* Header buttons hidden on very small screens — pero el de Miembros
     siempre tiene que quedar accesible, es la única forma de ver quién está
     en el server desde el celular (el resto de las opciones ocultas acá
     también están en el menú "..." de overflow, este botón no). */
  .header-actions .icon-btn:nth-child(n+4){display:none;}
  .header-actions .icon-btn.members-toggle-btn{display:flex!important;}
  .header-actions .icon-btn.members-toggle-btn.dm-hidden{display:none!important;}

  /* Picker */
  .picker-grid{grid-template-columns:repeat(7,1fr);}
  .picker-item{font-size:1.3rem;padding:4px 2px;}

  /* Emoji/sticker compact */
  .sticker-grid{grid-template-columns:repeat(3,1fr);}
}

/* ══ TABLET (769px–1024px) ══ */
@media (min-width:769px) and (max-width:1024px){
  :root{--members-w:0px;}
  #members-panel{display:none!important;}
  #members-panel.mobile-visible{
    display:flex!important;position:fixed;top:0;right:0;bottom:0;
    width:320px;z-index:500;box-shadow:-8px 0 32px rgba(0,0,0,.5);
  }
  #members-backdrop.show{display:block;}
  .picker-popup{right:8px;}
}

/* ══ SERVER SETTINGS PANEL ══ */
/* BUG: this used to set width:960px directly on #server-settings-modal —
   but that element IS the .modal-overlay itself (unlike every other modal,
   which wraps its sizing in a nested .modal/.modal-content child). .modal-overlay
   uses position:fixed + inset:0 to span the full screen; adding an explicit
   width on the SAME element over-constrains it (left:0 + right:0 + width:960px
   all set at once), so the browser drops 'right' and the box ends up pinned
   to the left edge instead of centered — never mind that .modal-overlay's
   flex centering (align-items/justify-content:center) was meant to center
   the INSIDE of this box, not the box itself. Fix: don't touch the overlay's
   own size — let it stay full-screen like every other modal-overlay, and
   size/center the actual panel via #ss-layout below instead. This also fixes
   the "covers only part of the screen" issue: since the overlay was only
   960px wide, its dark/blur background never reached the right side of the
   screen either, so the app behind it (e.g. the Members list) showed through
   completely untouched instead of being covered. */
#server-settings-modal{padding:0;}
/* Discord's Settings doesn't blur the app behind it — it's a solid opaque
   page. Override just this modal's backdrop (higher specificity than
   .modal-overlay.open, no !important needed) so the empty gutter on the
   sides is a flat matching color instead of a blurred/translucent view of
   the chat behind it. */
#server-settings-modal.open{background:var(--bg-1);backdrop-filter:none;}
.ss-nav-cat{font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:16px 10px 4px;}
.ss-nav-item{width:100%;background:none;border:none;color:var(--text-2);font-family:var(--font);font-size:.9rem;font-weight:500;padding:7px 10px;border-radius:var(--r-xs);text-align:left;cursor:pointer;transition:all .1s;display:block;}
.ss-nav-item:hover{background:var(--bg-3);color:var(--text-0);}
.ss-nav-item.active{background:var(--bg-4);color:var(--text-0);font-weight:600;}
.ss-nav-item.danger{color:var(--red);}
.ss-nav-item.danger:hover{background:rgba(244,63,94,.1);}
.ss-section{display:none;padding:32px 40px;max-width:680px;}
.ss-section.active{display:block;}
.ss-section-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.ss-section-title{font-size:1.25rem;font-weight:800;color:var(--text-0);letter-spacing:-.02em;margin-bottom:4px;}
.ss-section-desc{font-size:.85rem;color:var(--text-2);line-height:1.5;}
.ss-field-label{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);}
/* Emoji table rows */
.ce-table-row{display:grid;grid-template-columns:60px 1fr 1fr auto;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .1s;}
.ce-table-row:last-child{border-bottom:none;}
.ce-table-row:hover{background:var(--bg-4);}
/* Members table */
.ss-member-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.ss-member-row:last-child{border-bottom:none;}
/* Tags */
.ss-tag{display:inline-flex;align-items:center;gap:6px;background:var(--bg-4);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:.8rem;color:var(--text-1);}
.ss-tag button{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:.75rem;line-height:1;}
.ss-tag button:hover{color:var(--red);}

.re-role-item{padding:7px 10px;border-radius:var(--r-xs);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;transition:background .1s;border:1.5px solid transparent;}
.re-role-item:hover{background:var(--bg-4);}
.re-role-item.active{background:var(--bg-4);border-color:var(--border);}
.re-role-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.perm-row{display:flex;align-items:flex-start;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:12px;}
.perm-row:last-child{border-bottom:none;}
.perm-info{flex:1;}
.perm-name{font-size:.875rem;font-weight:600;color:var(--text-0);}
.perm-desc{font-size:.72rem;color:var(--text-3);margin-top:2px;line-height:1.4;}
/* ══ POLLS ══ */
.poll-card{background:var(--bg-3);border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:8px;}
.poll-question{font-weight:700;font-size:.95rem;color:var(--text-0);margin-bottom:12px;}
.poll-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:all .15s;margin-bottom:6px;position:relative;overflow:hidden;border:1.5px solid var(--border);}
.poll-option:hover{border-color:var(--accent);}
.poll-option.voted{border-color:var(--accent);background:var(--accent-glow);}
.poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(124,58,237,.12);transition:width .4s ease;z-index:0;border-radius:var(--r-xs);}
.poll-opt-text{flex:1;font-size:.875rem;position:relative;z-index:1;}
.poll-pct{font-size:.75rem;font-weight:700;color:var(--accent-g);position:relative;z-index:1;}
.poll-meta{font-size:.72rem;color:var(--text-3);margin-top:8px;display:flex;align-items:center;gap:10px;}
/* ══ EVENTS ══ */
.event-card{background:linear-gradient(135deg,var(--bg-3),var(--bg-4));border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:8px;position:relative;overflow:hidden;}
.event-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-g));}
.event-title{font-weight:700;font-size:.95rem;color:var(--text-0);margin-bottom:4px;}
.event-date-str{font-size:.78rem;color:var(--accent-g);font-weight:600;margin-bottom:6px;}
.event-desc-txt{font-size:.82rem;color:var(--text-2);margin-bottom:10px;line-height:1.5;}
/* ══ XP / LEVELS ══ */
.xp-bar-wrap{background:var(--bg-4);border-radius:10px;height:5px;overflow:hidden;}
.xp-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-g));border-radius:10px;transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.level-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,var(--accent),var(--accent-g));color:#fff;border-radius:20px;padding:2px 8px;font-size:.65rem;font-weight:800;}
.leaderboard-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);margin-bottom:4px;background:var(--bg-3);}
.leaderboard-rank{width:24px;font-size:.78rem;font-weight:800;color:var(--text-3);text-align:center;flex-shrink:0;}
.leaderboard-rank.gold{color:#f59e0b;}.leaderboard-rank.silver{color:#9ca3af;}.leaderboard-rank.bronze{color:#b45309;}
/* ══ THREADS ══ */
.thread-item{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 24px;cursor:pointer;border-radius:var(--r-sm);margin:1px 6px;color:var(--text-3);font-size:.8rem;transition:all .1s;}
.thread-item:hover{background:var(--bg-3);color:var(--text-1);}
.thread-item.active{background:var(--bg-4);color:var(--text-0);}
.ch-voice-members{display:flex;flex-direction:column;gap:3px;padding:2px 8px 4px 30px;}
.ch-voice-member{display:flex;align-items:center;gap:6px;}
.ch-voice-member span{font-size:.76rem;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ── LINK EMBED CARD ── */
/* FIX: pedido reducir a la mitad de alto — bajé padding vertical, gap,
   tamaño de ícono y line-height de las dos líneas de texto. */
.link-embed-card{display:flex;width:fit-content;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:6px;max-width:min(360px,100%);padding:3px 8px;background:var(--bg-3);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);text-decoration:none;transition:background .15s,border-color .15s;}
.link-embed-card:hover{background:var(--bg-4);border-color:var(--accent);}
.link-embed-icon{width:15px;height:15px;min-width:15px;max-width:15px;max-height:15px;border-radius:4px;flex-shrink:0;background:var(--bg-4);object-fit:contain;padding:1px;display:block;}
.link-embed-info{flex:1;min-width:0;line-height:1.1;}
.link-embed-domain{font-size:.72rem;font-weight:600;color:var(--text-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1;}
.link-embed-path{font-size:.62rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;line-height:1.1;}
.link-embed-arrow{color:var(--text-3);flex-shrink:0;}

/* ── Bot embeds (tarjetas con botones, ver README del backend) ── */
.embed-card{display:flex;gap:12px;margin-top:8px;max-width:440px;padding:12px 14px;background:var(--bg-3);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r-sm);white-space:normal;}
.embed-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--bg-4);}
.embed-body{flex:1;min-width:0;}
.embed-title{font-weight:700;font-size:.9rem;color:var(--text-0);margin-bottom:3px;}
.embed-desc{font-size:.82rem;color:var(--text-1);line-height:1.45;white-space:pre-wrap;overflow-wrap:break-word;}
.embed-fields{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;}
.embed-field{min-width:0;}
.embed-field-inline{flex:1 1 100px;}
.embed-field:not(.embed-field-inline){flex:1 1 100%;}
.embed-field-name{font-size:.72rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px;}
.embed-field-value{font-size:.82rem;color:var(--text-1);overflow-wrap:break-word;}
.embed-image{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:8px;margin-top:8px;}
.embed-card-frame{align-items:flex-start;}
.embed-frame{display:block;width:100%;max-width:400px;border:none;background:transparent;}
.embed-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.embed-btn{width:auto;box-shadow:none;text-decoration:none;}
.embed-footer{font-size:.7rem;color:var(--text-3);margin-top:8px;}


/* moved from an inline <style> tag near the loading screen markup */
@keyframes loadBar{0%{width:0%;margin-left:0}50%{width:60%;margin-left:20%}100%{width:0%;margin-left:100%}}


/* ── TÁCTIL (celular/tablet): como Discord móvil ──
   Los botones de acción de mensajes y canales NO se muestran: se abren
   manteniendo presionado el mensaje o el canal (ver initLongPress en
   ui-modals-mobile-theme.js). En escritorio con mouse todo sigue igual (hover). */
@media (hover:none), (max-width:768px){
  .msg-hover-actions,
  .msg-wrap:hover .msg-hover-actions{display:none !important;}
  .ch-actions,
  .channel-item:hover .ch-actions,
  .channel-folder .ch-actions,
  .channel-folder:hover .ch-actions{display:none !important;}
}
@media (hover:none){
  /* sin esto, mantener presionado selecciona texto / abre el menú del sistema en vez del nuestro */
  .msg-wrap,.channel-item,.channel-folder,.server-icon{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
}
/* Mismo comportamiento cuando JS detecta puntero táctil (cubre navegadores que
   reportan hover:hover o pantallas >768px, y el :hover "pegado" tras un toque). */
html.touch-ui .msg-hover-actions,
html.touch-ui .msg-wrap:hover .msg-hover-actions,
html.touch-ui .ch-actions,
html.touch-ui .channel-item:hover .ch-actions,
html.touch-ui .channel-folder .ch-actions,
html.touch-ui .channel-folder:hover .ch-actions{display:none !important;}
html.touch-ui .msg-wrap,html.touch-ui .channel-item,html.touch-ui .channel-folder,html.touch-ui .server-icon{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
html.touch-ui .msg-wrap:hover{background:transparent;}
.msg-wrap.msg-selected,html.touch-ui .msg-wrap.msg-selected{background:rgba(124,58,237,.14);}

/* Menú contextual como hoja inferior (táctil) */
#ctx-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2999;opacity:0;transition:opacity .15s ease;}
#ctx-backdrop.open{opacity:1;}
#context-menu.ctx-sheet{left:0 !important;right:0;top:auto !important;bottom:0;width:100%;max-width:100vw !important;min-width:0;
  border-radius:16px 16px 0 0;border-bottom:none;padding:8px 10px calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 32px rgba(0,0,0,.5);max-height:78vh;overflow-y:auto;transform:none;}
#context-menu.ctx-sheet.open{animation:ctxSheetUp .2s ease-out;}
@keyframes ctxSheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
#context-menu.ctx-sheet::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:var(--border);margin:2px auto 10px;}
#context-menu.ctx-sheet .ctx-item{padding:14px 14px;font-size:1rem;gap:14px;border-radius:12px;}
#context-menu.ctx-sheet .ctx-item:hover{background:transparent;color:var(--text-1);}
#context-menu.ctx-sheet .ctx-item.danger:hover{color:var(--red);}
#context-menu.ctx-sheet .ctx-item:active{background:var(--accent);color:#fff;}
#context-menu.ctx-sheet .ctx-item.danger:active{background:var(--red);color:#fff;}
#context-menu.ctx-sheet .ctx-item.danger{color:var(--red);}
.sheet-react-row{display:flex;gap:8px;justify-content:space-between;padding:4px 2px 10px;margin-bottom:6px;border-bottom:1px solid var(--border);}
.sheet-react-row .sr-emoji{flex:1;max-width:52px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.55rem;background:var(--bg-3);border-radius:50%;cursor:pointer;}
.sheet-react-row .sr-emoji:active{background:var(--accent);}