/* ═══════════════════════════════════════════════════════════
   ÓRBITA — hoja de estilos
   Tema: workspace claro y cálido ("diurno"). Fondo hueso, tinta
   cálida, acento terracota. Layout de una sola barra lateral
   con mundos anidados (estilo Notion / Linear).
   Tipografía: Bricolage Grotesque (display) + Instrument Sans (UI)
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #ffffff;              /* contenido / chat */
  --bg-side: #f6f3ec;         /* barra lateral y paneles */
  --bg-side-2: #f1ede4;       /* secciones hundidas */
  --bg-sink: #f0ece3;         /* inputs */
  --bg-hover: rgba(38, 34, 30, 0.05);
  --bg-active: #fbe9e0;       /* item activo (acento tenue) */
  --ink: #26221e;             /* texto principal (casi negro cálido) */
  --ink-soft: #5f584f;        /* secundario */
  --ink-faint: #968d81;       /* terciario / muted */
  --line: rgba(38, 34, 30, 0.11);
  --line-soft: rgba(38, 34, 30, 0.06);
  --accent: #db6b47;          /* terracota */
  --accent-strong: #bf5330;   /* hover / texto sobre claro */
  --accent-tint: #fbe9e0;
  --green: #2f9e63;
  --red: #cf4a3f;
  --amber: #d89430;
  --shadow-sm: 0 2px 8px rgba(38, 28, 20, 0.08);
  --shadow: 0 14px 40px rgba(38, 28, 20, 0.16), 0 0 0 1px var(--line-soft);
  --font-display: 'Bricolage Grotesque', 'Avenir Next', sans-serif;
  --font-ui: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 16px;
}

/* ── Set de íconos propio (PNG monocromo + mask-image = recoloreable con currentColor) ── */
.ico {
  display: inline-block;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: middle;
  flex-shrink: 0;
}
.ico-megafono { -webkit-mask-image: url('/icons/01-megafono.png'); mask-image: url('/icons/01-megafono.png'); }
.ico-foro { -webkit-mask-image: url('/icons/02-foro.png'); mask-image: url('/icons/02-foro.png'); }
.ico-voz { -webkit-mask-image: url('/icons/03-voz.png'); mask-image: url('/icons/03-voz.png'); }
.ico-microfono { -webkit-mask-image: url('/icons/04-microfono.png'); mask-image: url('/icons/04-microfono.png'); }
.ico-microfono-silenciado { -webkit-mask-image: url('/icons/05-microfono-silenciado.png'); mask-image: url('/icons/05-microfono-silenciado.png'); }
.ico-auriculares { -webkit-mask-image: url('/icons/06-auriculares.png'); mask-image: url('/icons/06-auriculares.png'); }
.ico-auriculares-ensordecido { -webkit-mask-image: url('/icons/07-auriculares-ensordecido.png'); mask-image: url('/icons/07-auriculares-ensordecido.png'); }
.ico-compartir-pantalla { -webkit-mask-image: url('/icons/08-compartir-pantalla.png'); mask-image: url('/icons/08-compartir-pantalla.png'); }
.ico-colgar-llamada { -webkit-mask-image: url('/icons/09-colgar-llamada.png'); mask-image: url('/icons/09-colgar-llamada.png'); }
.ico-mano-levantada { -webkit-mask-image: url('/icons/10-mano-levantada.png'); mask-image: url('/icons/10-mano-levantada.png'); }
.ico-bajar-escenario { -webkit-mask-image: url('/icons/11-bajar-escenario.png'); mask-image: url('/icons/11-bajar-escenario.png'); }
.ico-mover-canal { -webkit-mask-image: url('/icons/12-mover-canal.png'); mask-image: url('/icons/12-mover-canal.png'); }
.ico-candado { -webkit-mask-image: url('/icons/13-candado.png'); mask-image: url('/icons/13-candado.png'); }
.ico-pin { -webkit-mask-image: url('/icons/14-pin.png'); mask-image: url('/icons/14-pin.png'); }
.ico-editar { -webkit-mask-image: url('/icons/15-editar.png'); mask-image: url('/icons/15-editar.png'); }
.ico-papelera { -webkit-mask-image: url('/icons/16-papelera.png'); mask-image: url('/icons/16-papelera.png'); }
.ico-aceptar { -webkit-mask-image: url('/icons/17-aceptar.png'); mask-image: url('/icons/17-aceptar.png'); }
.ico-rechazar { -webkit-mask-image: url('/icons/18-rechazar.png'); mask-image: url('/icons/18-rechazar.png'); }
.ico-agregar-persona { -webkit-mask-image: url('/icons/19-agregar-persona.png'); mask-image: url('/icons/19-agregar-persona.png'); }
.ico-grupo { -webkit-mask-image: url('/icons/20-grupo.png'); mask-image: url('/icons/20-grupo.png'); }
.ico-chat { -webkit-mask-image: url('/icons/21-chat.png'); mask-image: url('/icons/21-chat.png'); }
.ico-link-invitacion { -webkit-mask-image: url('/icons/22-link-invitacion.png'); mask-image: url('/icons/22-link-invitacion.png'); }
.ico-paleta { -webkit-mask-image: url('/icons/23-paleta.png'); mask-image: url('/icons/23-paleta.png'); }
.ico-roles { -webkit-mask-image: url('/icons/24-roles.png'); mask-image: url('/icons/24-roles.png'); }
.ico-banear { -webkit-mask-image: url('/icons/25-banear.png'); mask-image: url('/icons/25-banear.png'); }
.ico-llave { -webkit-mask-image: url('/icons/26-llave.png'); mask-image: url('/icons/26-llave.png'); }
.ico-passkey { -webkit-mask-image: url('/icons/27-passkey.png'); mask-image: url('/icons/27-passkey.png'); }
.ico-corona { -webkit-mask-image: url('/icons/28-corona.png'); mask-image: url('/icons/28-corona.png'); }
.ico-camara { -webkit-mask-image: url('/icons/29-camara.png'); mask-image: url('/icons/29-camara.png'); }
.ico-imagen { -webkit-mask-image: url('/icons/30-imagen.png'); mask-image: url('/icons/30-imagen.png'); }
.ico-everyone { -webkit-mask-image: url('/icons/31-everyone.png'); mask-image: url('/icons/31-everyone.png'); }
.ico-ajustes { -webkit-mask-image: url('/icons/32-ajustes.png'); mask-image: url('/icons/32-ajustes.png'); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font-family: inherit; font-size: inherit; color: var(--ink); }
a { color: var(--accent-strong); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(38, 34, 30, 0.16); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(38, 34, 30, 0.28); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.screen { position: fixed; inset: 0; }

/* ─────────────── Pantalla de carga ─────────────── */
#loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background:
    radial-gradient(1000px 620px at 80% -5%, #fdeee6, transparent 60%),
    radial-gradient(760px 520px at 8% 108%, #f3efe4, transparent 60%),
    #f7f3ec;
  z-index: 20;
  transition: opacity .25s ease;
}
#loading.hidden { display: flex; opacity: 0; pointer-events: none; }
.load-orbit { width: 148px; height: 148px; }
.load-orbit svg { width: 100%; height: 100%; overflow: visible; }
.lo-glow { fill: var(--accent); opacity: .16; animation: lo-pulse 2s ease-in-out infinite; transform-origin: 50px 50px; }
.lo-planet { fill: var(--accent); filter: drop-shadow(0 6px 14px rgba(219, 107, 71, 0.4)); }
.lo-ring { fill: none; stroke: var(--ink); stroke-width: 4.5; opacity: .82; }
.lo-moon1 { fill: var(--amber); }
.lo-moon2 { fill: #e0a35a; }
.lo-moon3 { fill: #f0b57a; }
.lo-moon {
  offset-path: path('M 9,50 A 41,15 0 1,0 91,50 A 41,15 0 1,0 9,50');
  animation: lo-orbit 2.4s linear infinite;
}
.lo-moon1 { animation-delay: 0s; }
.lo-moon2 { animation-delay: -.8s; }
.lo-moon3 { animation-delay: -1.6s; }
.lo-sparkle { fill: #ec8158; opacity: .8; transform-origin: 78px 16px; animation: lo-twinkle 1.8s ease-in-out infinite; }
.lo-bob { animation: lo-bob 2.2s ease-in-out infinite; }
@keyframes lo-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes lo-bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes lo-pulse { 0%, 100% { opacity: .16; scale: 1; } 50% { opacity: .3; scale: 1.08; } }
@keyframes lo-twinkle { 0%, 100% { opacity: .3; scale: .7; } 50% { opacity: 1; scale: 1; } }
.load-text { color: var(--ink-soft); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 2px; }
.load-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.load-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: lo-dots 1.2s infinite; }
.load-dots i:nth-child(2) { animation-delay: .15s; }
.load-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lo-dots { 30% { translate: 0 -4px; opacity: 1; } 60% { translate: 0 0; opacity: .5; } }

/* ─────────────── Pantalla de acceso ─────────────── */
#auth {
  display: grid;
  place-items: center;
  background:
    radial-gradient(1000px 620px at 80% -5%, #fdeee6, transparent 60%),
    radial-gradient(760px 520px at 8% 108%, #f3efe4, transparent 60%),
    #f7f3ec;
}
.auth-orbits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.orbit {
  position: absolute; left: 50%; top: 50%;
  border: 1.5px solid rgba(219, 107, 71, 0.16);
  border-radius: 50%;
  translate: -50% -50%;
}
.orbit::before {
  content: '';
  position: absolute; top: -4px; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(219, 107, 71, 0.14);
}
.o1 { width: 520px; height: 520px; animation: spin 42s linear infinite; }
.o2 { width: 800px; height: 800px; animation: spin 72s linear infinite reverse; }
.o2::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(216, 148, 48, 0.14); }
.o3 { width: 1120px; height: 1120px; animation: spin 115s linear infinite; }
.o3::before { background: #6f9e8a; box-shadow: 0 0 0 4px rgba(111, 158, 138, 0.14); }
@keyframes spin { to { rotate: 360deg; } }

.auth-card {
  position: relative;
  width: min(400px, calc(100vw - 40px));
  padding: 38px 34px 30px;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.auth-card > * { animation: rise .5s cubic-bezier(.2, .9, .3, 1) backwards; }
.auth-card > *:nth-child(2) { animation-delay: .07s; }
.auth-card > *:nth-child(3) { animation-delay: .14s; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }

.brand { text-align: center; margin-bottom: 26px; }
.brand .logo { width: 66px; height: 66px; filter: drop-shadow(0 6px 12px rgba(219, 107, 71, 0.25)); }
.brand h1 {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 8px;
}
.tagline { color: var(--ink-faint); font-size: 14px; margin-top: 2px; }

.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-sink);
  border-radius: 11px;
  padding: 4px; gap: 4px;
  margin-bottom: 20px;
}
.auth-tabs button {
  padding: 9px; border-radius: 8px;
  color: var(--ink-faint); font-weight: 600; font-size: 14px;
  transition: all .16s;
}
.auth-tabs button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.field { display: block; margin-bottom: 14px; }
.field span {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft); margin-bottom: 6px;
}
.field input, .m-field input, .m-field textarea {
  width: 100%;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .m-field input:focus, .m-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(219, 107, 71, 0.15);
}
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 18px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
  transition: filter .15s, background .15s, translate .1s, border-color .15s;
}
.btn:active { translate: 0 1px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-faint); background: var(--bg-hover); }
.btn-danger { background: #fff; border: 1px solid rgba(207, 74, 63, 0.4); color: var(--red); }
.btn-danger:hover { background: rgba(207, 74, 63, 0.08); }
.btn-big { width: 100%; padding: 13px; font-size: 15.5px; border-radius: 12px; }
.auth-error { color: var(--red); font-size: 13.5px; text-align: center; margin-top: 12px; min-height: 18px; }
.auth-provider { margin-top: 3px; }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 13px;
  color: var(--ink-faint); font-size: 11.5px; font-weight: 600;
}
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.google-button-slot { min-height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; }
.google-button-slot.loading { opacity: .58; pointer-events: none; }
.google-button-slot:has(.google-setup-button),
.google-button-slot:has(iframe) {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.google-button-slot:has(.google-setup-button)::before,
.google-button-slot:has(iframe)::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 5px 13px;
  border-radius: 14px;
  background: linear-gradient(100deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
  background-size: 220% 100%;
  filter: blur(12px);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
}
.google-button-slot:has(.google-setup-button):hover::before,
.google-button-slot:has(.google-setup-button):focus-within::before,
.google-button-slot:has(iframe):hover::before,
.google-button-slot:has(iframe):focus-within::before {
  opacity: .78;
  transform: scale(1.04);
  animation: google-color-glow 2.4s linear infinite;
}
.google-button-slot:has(iframe) > div,
.google-button-slot:has(iframe) iframe {
  position: relative;
  z-index: 1;
  border-radius: 10px;
}
.google-setup-button {
  width: min(330px, 100%);
  min-height: 42px;
  padding: 0 14px;
  position: relative;
  z-index: 1;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  color: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  box-shadow: 0 1px 2px rgba(60,64,67,.08);
  transition: background .18s, box-shadow .18s, border-color .18s, transform .18s;
}
.google-setup-button svg { position: absolute; left: 14px; width: 18px; height: 18px; }
.google-setup-button:hover,
.google-setup-button:focus-visible {
  background: #fff;
  border-color: rgba(66,133,244,.34);
  box-shadow:
    -9px 0 18px rgba(66,133,244,.22),
    9px 0 18px rgba(234,67,53,.20),
    0 -7px 16px rgba(52,168,83,.18),
    0 8px 17px rgba(251,188,5,.20),
    0 5px 16px rgba(60,64,67,.13);
  transform: translateY(-1px);
}
.google-setup-button:active { background: #f8faff; transform: translateY(0); }
.google-setup-button:focus-visible { outline: 3px solid rgba(66,133,244,.24); outline-offset: 2px; }
@keyframes google-color-glow {
  to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .google-button-slot:has(.google-setup-button):hover::before,
  .google-button-slot:has(.google-setup-button):focus-within::before,
  .google-button-slot:has(iframe):hover::before,
  .google-button-slot:has(iframe):focus-within::before { animation: none; }
}
.google-link-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.google-link-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.google-link-copy svg { flex: 0 0 auto; }
.google-link-copy div { min-width: 0; }
.google-link-copy p { margin-top: 2px; }
.auth-foot { position: absolute; bottom: 22px; width: 100%; text-align: center; color: var(--ink-faint); font-size: 13px; }

/* ─────────────── Layout principal ─────────────── */
#app {
  display: grid;
  grid-template-columns: 74px 268px 1fr auto;
  background: var(--bg);
}

/* ── Barra lateral ── */
#sidebar {
  background: var(--bg-side);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-width: 0;
}
#sidebar-brand {
  height: 56px; flex-shrink: 0;
  padding: 0 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
/* cuando muestra la cabecera de un mundo con banner, la altura se adapta al contenido en vez de recortarlo */
#sidebar-brand:has(.srv-head) { height: auto; padding: 0; overflow: visible; align-items: stretch; }
.brand-logo { width: 26px; height: 26px; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
#sidebar-body { flex: 1; overflow-y: auto; padding: 8px 0 16px; }

/* filas de navegación (Amigos, DMs) */
.side-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 1px 8px;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .13s, color .13s;
  min-width: 0;
}
.side-row:hover { background: var(--bg-hover); color: var(--ink); }
.side-row.active { background: var(--bg-active); color: var(--accent-strong); }
.side-row .sr-ico { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; }
.side-row .sr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.side-row.active .sr-name { font-weight: 600; }

.side-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint);
}
.sb-actions { display: flex; align-items: center; gap: 2px; }
.side-section button {
  color: var(--ink-faint); font-size: 17px; line-height: 1;
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
}
.side-section button:hover { color: var(--ink); background: var(--bg-hover); }
.side-empty { padding: 4px 20px 6px; color: var(--ink-faint); font-size: 13px; line-height: 1.4; }

/* ── Categorías (agrupan canales, arrastrables como en Discord) ── */
.cat-header {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 10px 4px 8px; margin: 6px 8px 0;
  color: var(--ink-faint); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; border-radius: var(--r-sm);
  user-select: none;
}
.cat-header:hover { color: var(--ink-soft); background: var(--bg-hover); }
.cat-caret { display: inline-block; transition: rotate .15s; font-size: 10px; rotate: 90deg; }
.cat-caret.closed { rotate: 0deg; }
.cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-menu { color: var(--ink-faint); font-size: 15px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0; }
.cat-menu:hover { color: var(--ink); background: var(--bg-active); }
.cat-items { margin-bottom: 4px; }

/* feedback de arrastrar y soltar */
[data-drag-id] { cursor: grab; }
[data-drag-id].dragging { opacity: .4; }
.chan.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.chan.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.cat-header.drop-after { box-shadow: inset 0 -2px 0 var(--accent); background: var(--accent-tint); }

/* pastilla de contador */
.pill {
  margin-left: auto;
  min-width: 20px; height: 19px; padding: 0 6px;
  background: var(--accent); color: #fff;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ── Mundos (servidores) ── */
.world {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 1px 8px;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .13s, color .13s;
  min-width: 0;
}
.world:hover { background: var(--bg-hover); color: var(--ink); }
.world.active { color: var(--ink); font-weight: 600; }
.world-ico {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 15px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.world-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.world-menu {
  margin-left: auto; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 6px;
  color: var(--ink-faint); font-size: 17px; line-height: 1;
  display: grid; place-items: center;
}
.world-menu:hover { background: var(--bg-hover); color: var(--ink); }

/* canales dentro de un mundo abierto */
.chan-list { margin: 2px 8px 6px 22px; padding-left: 10px; border-left: 1.5px solid var(--line-soft); }
.chan {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: 1px 0;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .13s, color .13s;
  min-width: 0; width: 100%; text-align: left;
}
.chan:hover { background: var(--bg-hover); color: var(--ink); }
.chan.active { background: var(--bg-active); color: var(--accent-strong); }
.chan .hash { font-weight: 600; color: var(--ink-faint); width: 15px; text-align: center; flex-shrink: 0; }
.chan.active .hash { color: var(--accent); }
.chan .cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chan.active .cname { font-weight: 600; }
.chan .chan-lock { font-size: 11px; opacity: .6; flex-shrink: 0; }
.chan-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; opacity: 0; flex-shrink: 0; }
.chan:hover .chan-actions { opacity: .7; }
.chan-actions:hover { opacity: 1 !important; }
.chan-actions .chan-perms, .chan-actions .chan-x {
  color: var(--ink-faint); padding: 3px; border-radius: 5px;
  display: grid; place-items: center;
}
.chan-actions .chan-perms:hover { color: var(--ink); background: rgba(38, 34, 30, 0.08); }
.chan-actions .chan-x:hover { color: var(--red); background: rgba(207, 74, 63, 0.12); }
.add-chan { color: var(--ink-faint); }
.add-chan .hash { color: var(--ink-faint); }

/* ── Modal ancho (permisos de canal, etc.) ── */
#modal.wide { width: min(680px, calc(100vw - 40px)); }
.cperm-layout { display: grid; grid-template-columns: 200px 1fr; gap: 18px; max-height: 46vh; margin-bottom: 6px; }
.cperm-side { display: flex; flex-direction: column; min-height: 0; }
.cperm-side-head { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 0 2px 8px; }
.cperm-side-head button { width: 20px; height: 20px; border-radius: 6px; color: var(--ink-faint); font-size: 15px; display: grid; place-items: center; }
.cperm-side-head button:hover { color: var(--ink); background: var(--bg-hover); }
.cperm-targets { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cperm-target { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; cursor: pointer; min-width: 0; }
.cperm-target:hover { background: var(--bg-hover); }
.cperm-target.active { background: var(--accent-tint); }
.cperm-ico { font-size: 15px; }
.cperm-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cperm-remove { margin-left: auto; flex-shrink: 0; color: var(--ink-faint); font-size: 12px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; }
.cperm-remove:hover { color: var(--red); background: rgba(207, 74, 63, 0.12); }
.cperm-main { overflow-y: auto; padding-left: 4px; border-left: 1px solid var(--line); }
.cperm-section-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 0 8px 14px; }
.cperm-section-label:first-child { margin-top: 0; }
.cperm-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 14px; }
.cperm-pname { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cperm-pdesc { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; max-width: 300px; }
.cperm-toggle { display: flex; gap: 3px; background: var(--bg-sink); border-radius: 8px; padding: 3px; flex-shrink: 0; }
.cpt { width: 26px; height: 26px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--ink-faint); display: grid; place-items: center; }
.cpt:hover { background: rgba(38, 34, 30, 0.08); }
.cpt.deny.sel { background: var(--red); color: #fff; }
.cpt.neutral.sel { background: var(--ink-faint); color: #fff; }
.cpt.allow.sel { background: var(--green); color: #fff; }

.voice-users { padding: 2px 0 4px 24px; display: flex; flex-direction: column; gap: 2px; }
.voice-user { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: var(--r-sm); color: var(--ink-soft); font-size: 13.5px; }
.voice-user .avatar { width: 21px; height: 21px; font-size: 11px; }
.voice-user.muted .vu-name { opacity: .5; }
.vu-icons { margin-left: auto; display: flex; gap: 3px; font-size: 11px; flex-shrink: 0; }

/* ── Dock de voz + barra de usuario ── */
#voice-dock {
  margin: 0 10px 8px;
  padding: 10px 12px;
  background: rgba(47, 158, 99, 0.08);
  border: 1px solid rgba(47, 158, 99, 0.28);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.vd-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vd-info strong { color: #24774a; font-size: 13.5px; display: block; }
.vd-info small { color: var(--ink-faint); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-signal {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(47, 158, 99, 0.5);
  animation: pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(47, 158, 99, 0); } to { box-shadow: 0 0 0 0 rgba(47, 158, 99, 0); } }

#user-bar {
  padding: 9px 10px;
  background: var(--bg-side-2);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
}
#user-bar .ub-names { flex: 1; min-width: 0; cursor: pointer; padding: 3px 6px; border-radius: 8px; }
#user-bar .ub-names:hover { background: var(--bg-hover); }
#user-bar .ub-user { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-bar .ub-status { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.icon-btn.danger:hover { background: rgba(207, 74, 63, 0.12); color: var(--red); }
.icon-btn.on { color: var(--green); }
.icon-btn.off { color: var(--red); background: rgba(207, 74, 63, 0.1); }

/* botón fantasma de la cabecera */
.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9px;
  color: var(--ink-soft); font-weight: 600; font-size: 13.5px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ghost-btn:hover { background: var(--bg-hover); color: var(--ink); }
.ghost-btn.active { color: var(--accent-strong); background: var(--accent-tint); }

/* Tooltips */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; translate: -50% 0;
  background: var(--ink); color: #fff;
  padding: 6px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  z-index: 300; pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* ── Avatares ── */
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px;
  background: var(--av-c, var(--bg-sink));
  position: relative;
  flex-shrink: 0;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 30, 0.08);
}
.avatar.sm { width: 24px; height: 24px; font-size: 12px; }
.avatar.lg { width: 40px; height: 40px; font-size: 20px; }
.avatar.xl { width: 68px; height: 68px; font-size: 34px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.dot.on { background: var(--green); }
.dot.away { background: var(--amber); }
.dot.dnd { background: var(--red); }
.avatar .dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink-faint);
  border: 2.5px solid var(--bg-side);
}
.avatar .dot.on { background: var(--green); }
.avatar .dot.away { background: var(--amber); }
.avatar .dot.dnd { background: var(--red); }
#main .avatar .dot, #popover .avatar .dot { border-color: #fff; }
/* En avatares grandes el punto de presencia tiene que morder bien el borde del círculo (como Discord), no apenas tocarlo.
   OJO: right/bottom positivo empuja el punto HACIA EL CENTRO (más superpuesto); negativo lo aleja hacia afuera. */
.pop-av-wrap .avatar .dot { width: 16px; height: 16px; right: 0; bottom: 0; border-width: 3.5px; }
.dmp-av .avatar .dot { width: 19px; height: 19px; right: 0; bottom: 0; border-width: 4px; border-color: var(--bg-side); }

/* Selector de estado de presencia (popover) */
.presence-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 8px; border-radius: 9px;
  font-weight: 600; font-size: 13.5px; color: var(--ink-soft);
}
.presence-opt:hover { background: var(--bg-hover); color: var(--ink); }
.presence-opt.sel { background: var(--accent-tint); color: var(--accent-strong); }
.presence-opt .dot { width: 10px; height: 10px; border: none; }

.ub-avatar-btn { border-radius: 50%; flex-shrink: 0; transition: filter .12s; }
.ub-avatar-btn:hover { filter: brightness(.94); }
.avatar.img { background: var(--bg-sink); }
.avatar.img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Tarjeta de vista previa del perfil (en el modal) */
.profile-card { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 18px; background: var(--bg-side); }
.pc-banner { height: 90px; background-size: cover; background-position: center; }
.pc-av { position: absolute; left: 18px; top: 54px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid #fffdfa; background: var(--bg-sink); display: grid; place-items: center; }
.pc-av img { width: 100%; height: 100%; object-fit: cover; }
.pc-av span { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; }
.pc-name { padding: 34px 18px 14px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }

.invite-as {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 16px 0 22px; padding: 9px 14px;
  background: var(--bg-sink); border-radius: 99px;
  color: var(--ink-soft); font-size: 13.5px;
}
.invite-as strong { color: var(--ink); }

.upload-row { display: flex; gap: 8px; flex-wrap: wrap; }
.upload-row .btn { font-size: 13px; padding: 7px 12px; }
.upload-hint { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 11.5px; }
.emoji-fallback { margin-top: 10px; }
.emoji-fallback summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
  list-style: none; display: inline-flex; align-items: center; gap: 4px;
}
.emoji-fallback summary::-webkit-details-marker { display: none; }
.emoji-fallback summary::before { content: '▸'; font-size: 10px; transition: rotate .15s; }
.emoji-fallback[open] summary::before { rotate: 90deg; }
.emoji-fallback summary:hover { color: var(--ink-soft); }
.emoji-fallback .emoji-grid { margin-top: 8px; }

/* Banner en el popover de usuario */
.pop-banner-wrap { position: relative; margin: -14px -14px 0; height: 88px; background-size: cover; background-position: center; border-radius: 15px 15px 0 0; }
.pop-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; }
.pop-actions .icon-btn { width: 29px; height: 29px; background: rgba(20,16,12,.32); color: #fff; }
.pop-actions .icon-btn:hover { background: rgba(20,16,12,.5); color: #fff; }
.pop-av-wrap { position: absolute; left: 14px; bottom: -26px; }
.pop-av-wrap .avatar { width: 60px; height: 60px; font-size: 26px; box-shadow: 0 0 0 4px #fffdfa; }
.pop-body { padding: 34px 2px 2px; }
.pop-body .pop-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
.pop-body .pop-sub { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
.pop-roles { margin-top: 8px; }
.pop-tags.tag-row { margin: 8px 0 0; }
.pop-tags .tag-chip { padding: 3px 9px; font-size: 11.5px; }
.pop-bio { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.pop-meta { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.pop-meta .ico { opacity: .7; }
.pop-menu { margin: 10px -14px -14px; padding: 6px; border-top: 1px solid var(--line); }
.pop-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-align: left; }
.pop-menu-item:hover { background: var(--bg-hover); color: var(--ink); }
.pop-menu-item.danger { color: var(--red); }
.pop-menu-item.danger:hover { background: rgba(207, 74, 63, 0.1); }
.pop-menu-item .dot { width: 9px; height: 9px; }
.pop-menu-item .pmi-chev { margin-left: auto; color: var(--ink-faint); font-size: 15px; }

.presence-indicator, .pop-presence, .plc-presence, .dmp-presence, .fpc-presence {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-soft); font-size: 12.5px;
}
.presence-indicator .dot, .pop-presence .dot, .plc-presence .dot, .dmp-presence .dot, .fpc-presence .dot {
  width: 9px; height: 9px; border: 0; box-shadow: none;
}

/* ── Buzón de notificaciones ── */
.ub-inbox { position: relative; }
.ub-inbox-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 15px; text-align: center;
  border-radius: 99px; border: 2px solid var(--bg-side);
}
.inbox-head { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 8px; }
.inbox-head strong { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.inbox-clear { font-size: 12px; font-weight: 600; color: var(--ink-faint); padding: 3px 7px; border-radius: 7px; }
.inbox-clear:hover { background: var(--bg-hover); color: var(--red); }
.inbox-list { max-height: 340px; overflow-y: auto; margin: 0 -6px; }
.inbox-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 8px; border-radius: 9px; }
.inbox-row:hover { background: var(--bg-hover); }
.inbox-row.unread { background: var(--accent-tint); }
.inbox-text { flex: 1; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inbox-text strong { color: var(--ink); font-weight: 700; }
.inbox-text .ico { flex-shrink: 0; }
.inbox-text .avatar { width: 20px; height: 20px; font-size: 11px; }
.inbox-row time { font-size: 10.5px; color: var(--ink-faint); flex-shrink: 0; white-space: nowrap; margin-top: 2px; }
.inbox-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0 18px; color: var(--ink-faint); font-size: 13px; }
.inbox-empty svg { opacity: .4; }

/* ── Zona principal ── */
#main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
#main-head {
  height: 56px;
  padding: 0 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
#main-head .mh-icon { color: var(--ink-faint); font-weight: 700; font-size: 18px; }
#main-head .mh-title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); }
#main-head .mh-sub { color: var(--ink-faint); font-size: 13px; margin-left: 4px; }
#main-head .mh-dm-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px; margin: 0 -8px; border-radius: 9px; }
#main-head .mh-dm-user:hover { background: var(--bg-hover); }
#main-head .mh-tabs { display: flex; gap: 4px; margin-left: 14px; }
#main-head .mh-tabs button {
  padding: 6px 13px; border-radius: 8px;
  color: var(--ink-soft); font-weight: 600; font-size: 13.5px;
  transition: background .14s, color .14s;
}
#main-head .mh-tabs button:hover { background: var(--bg-hover); color: var(--ink); }
#main-head .mh-tabs button.active { background: var(--bg-active); color: var(--accent-strong); }
#main-head .mh-tabs button.cta { color: var(--accent-strong); }
#main-head .mh-tabs button.cta:hover { background: var(--accent-tint); }
#main-head .mh-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
#main-head .mh-icon-action {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}
#main-head .mh-icon-action svg { display: block; flex: 0 0 auto; }
#main-head .mh-icon-action .mh-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  box-shadow: 0 0 0 2px var(--bg-main);
}

#main-body { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* ── Chat ── */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 22px 22px 8px;
  display: flex; flex-direction: column;
}
.msgs-hello { margin: auto; padding: 30px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.msgs-hello .orbit-logo-static { margin-bottom: 18px; filter: drop-shadow(0 8px 16px rgba(219, 107, 71, 0.25)); }
.msgs-hello h2 { font-family: var(--font-display); font-size: 25px; margin-bottom: 4px; color: var(--ink); }
.msgs-hello p { color: var(--ink-faint); font-size: 14px; }

.day-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 10px;
  color: var(--ink-faint);
  font-size: 12px; font-weight: 700;
}
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.msg { display: flex; gap: 13px; padding: 3px 8px; margin: 0 -8px; border-radius: 10px; position: relative; animation: msg-in .16s ease-out; }
@keyframes msg-in { from { opacity: 0; translate: 0 5px; } }
.msg:hover { background: rgba(38, 34, 30, 0.028); }
.msg.first { margin-top: 15px; }
.msg .avatar { margin-top: 2px; }
.msg-avatar-profile {
  width: 30px;
  height: 32px;
  flex: 0 0 30px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.msg-avatar-profile .avatar {
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, filter .2s ease;
}
.msg-avatar-profile:hover .avatar {
  transform: translateY(-1px) scale(1.07);
  box-shadow: 0 5px 13px rgba(38,28,20,.16);
  filter: saturate(1.05);
}
.msg-avatar-profile:active .avatar { transform: scale(.94); }
.msg-avatar-profile:focus-visible {
  outline: 3px solid rgba(219,107,71,.25);
  outline-offset: 3px;
}
.msg .gutter { width: 30px; flex-shrink: 0; text-align: right; }
.msg .gutter time { font-size: 10.5px; color: var(--ink-faint); opacity: 0; }
.msg:hover .gutter time { opacity: 1; }
.msg-body { flex: 1; min-width: 0; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; }
.msg-meta .m-author { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.msg-meta time { font-size: 11.5px; color: var(--ink-faint); }
.msg-text { line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; color: var(--ink); }
.msg-text .edited { font-size: 11px; color: var(--ink-faint); margin-left: 5px; }
.msg.mention { background: #fdf3ec; box-shadow: inset 2.5px 0 0 var(--accent); }
.msg.mention:hover { background: #fceee4; }
.msg-text .mention-chip { background: var(--accent-tint); color: var(--accent-strong); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.msg-text .mention-everyone { background: rgba(217, 148, 48, 0.18); color: #a5690f; }
.pin-badge { font-size: 11px; margin-right: 4px; }

.msg-actions {
  position: absolute; top: -14px; right: 10px;
  display: none; gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px; padding: 2px;
  box-shadow: var(--shadow-sm);
}
.msg:hover .msg-actions { display: flex; }
.msg-actions button { width: 27px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; color: var(--ink-soft); }
.msg-actions button:hover { background: var(--bg-hover); color: var(--ink); }
.msg-actions button.del:hover { color: var(--red); }

.msg-edit textarea {
  width: 100%; margin-top: 3px;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 9px; padding: 8px 10px;
  resize: none; outline: none;
}
.msg-edit small { color: var(--ink-faint); font-size: 11.5px; }

#typing-row { height: 22px; padding: 0 22px 2px; font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: tbounce 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tbounce { 30% { translate: 0 -4px; opacity: 1; } 60% { translate: 0 0; } }

/* Barra de solicitud de mensaje (reemplaza al composer cuando el DM está pendiente) */
.dm-request-bar {
  margin: 0 22px 20px; padding: 14px 16px;
  background: var(--accent-tint); border: 1px solid rgba(219, 107, 71, 0.3);
  border-radius: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.drb-text { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; color: var(--ink-soft); font-size: 13.5px; }
.drb-text strong { color: var(--ink); }
.drb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.side-row.dm small { color: var(--ink-faint); font-weight: 500; font-size: 11px; }
.dm-privacy-lock {
  margin: 0 22px 20px;
  padding: 14px 16px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-sink);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 650;
  text-align: center;
}
.dm-privacy-lock .ico { color: var(--ink-faint); flex: 0 0 auto; }

#composer { padding: 0 22px 20px; }
.composer-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.composer-box:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(219, 107, 71, 0.1); }
#composer textarea {
  flex: 1;
  background: none; border: none; outline: none;
  resize: none;
  max-height: 180px;
  line-height: 1.45;
  padding: 2px 0;
  color: var(--ink);
}
#composer textarea::placeholder { color: var(--ink-faint); }
#send-btn {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  opacity: .4; transition: opacity .15s, background .15s;
}
#send-btn.ready { opacity: 1; }
#send-btn.ready:hover { background: var(--accent-strong); }
#send-btn.sent { animation: send-pop .32s ease; }
#send-btn.sent svg { animation: send-fly .32s ease; }
@keyframes send-pop { 0% { transform: scale(1); } 35% { transform: scale(.82); } 100% { transform: scale(1); } }
@keyframes send-fly { 0% { transform: translate(0,0); } 40% { transform: translate(5px,-5px); opacity: .4; } 41% { transform: translate(-5px,5px); } 100% { transform: translate(0,0); opacity: 1; } }
/* entrada de un mensaje nuevo */
.msg.msg-enter { animation: msg-in .3s cubic-bezier(.2,.7,.3,1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
#attach-btn {
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--ink-faint); font-size: 22px; font-weight: 600; line-height: 1;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
#attach-btn:hover { background: var(--bg-hover); color: var(--ink); }
#attach-btn:disabled { opacity: .5; pointer-events: none; }

.msg-image { display: block; margin-top: 4px; max-width: 320px; }
.msg-image img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

.load-more { align-self: center; margin-bottom: 10px; padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.load-more:hover { color: var(--ink); border-color: var(--accent); }

/* ── Vista de amigos ── */
#friends-view { flex: 1; overflow-y: auto; padding: 20px 24px; }
#friends-view h2 { color: var(--ink); }
.dm-hub-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dm-hub-toolbar h2 { font-family: var(--font-display); font-size: 22px; }
.dm-hub-toolbar p { margin-top: 2px; color: var(--ink-faint); font-size: 12.5px; }
.dm-hub-toolbar .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }
.fr-add-box { display: flex; gap: 10px; margin-bottom: 8px; }
.fr-add-box input {
  flex: 1;
  padding: 11px 14px;
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
}
.fr-add-box input:focus { border-color: var(--accent); background: #fff; }
.fr-hint { color: var(--ink-faint); font-size: 13px; margin-bottom: 18px; }
.fr-group-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 6px; }
.fr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 0 -12px;
  border-radius: 12px;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
}
.fr-row:hover { background: var(--bg-hover); border-top-color: transparent; }
.fr-row .fr-name { font-weight: 700; color: var(--ink); }
.fr-row .fr-sub { font-size: 12.5px; color: var(--ink-faint); }
.fr-row .fr-actions { margin-left: auto; display: flex; gap: 7px; }
.fr-row .fr-actions .icon-btn { background: #fff; border: 1px solid var(--line); }
.fr-row .fr-actions .icon-btn:hover { border-color: var(--accent); }
.fr-row .fr-actions .icon-btn.ok:hover { color: var(--green); border-color: var(--green); }
.fr-row .fr-actions .icon-btn.no:hover { color: var(--red); border-color: var(--red); }
.fr-empty { text-align: center; color: var(--ink-faint); padding: 60px 20px; }
.fr-empty .big { font-size: 42px; margin-bottom: 12px; }

/* ── Miembros ── */
#members {
  width: 236px;
  background: var(--bg-side);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 14px 10px;
}
#members.dm-profile { width: 300px; padding: 0; }
.group-dm-avatar:not(.img) {
  color: #fff;
  background: linear-gradient(145deg, #9b7aea, #6f55c9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 12px rgba(111,85,201,.18);
}

/* ── Perfil del otro usuario en un DM ── */
.dmp-banner { position: relative; height: 100px; background-size: cover; background-position: center; }
.dmp-av { position: absolute; left: 18px; bottom: -32px; }
.dmp-av .avatar { width: 74px; height: 74px; font-size: 32px; box-shadow: 0 0 0 5px var(--bg-side); }
.dmp-body { padding: 42px 18px 18px; }
.dmp-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
.dmp-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 1px; }
.dmp-status { font-size: 13px; color: var(--ink-soft); font-style: italic; margin-top: 8px; }
.dmp-actions { display: flex; gap: 8px; margin-top: 14px; }
.dmp-actions .btn { font-size: 13px; padding: 8px 12px; }
.dmp-actions #dmp-call, .dmp-actions #dmp-add, .dmp-actions #dmp-accept { flex: 1; }
.dmp-actions #dmp-more { width: 40px; padding: 8px; }
.dmp-divider { height: 1px; background: var(--line); margin: 16px 0; }
.dmp-tags.tag-row { margin: 0 0 14px; }
.dmp-section { margin-bottom: 14px; }
.dmp-label { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.dmp-bio { font-size: 13px; color: var(--ink-soft); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.dmp-since { font-size: 13.5px; color: var(--ink); }
.dmp-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faint); margin-bottom: 14px; }
.dmp-meta .ico { opacity: .7; }
.dmp-blocked { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--red); margin-top: 4px; }

/* ── DMs grupales ── */
#members.dm-group-panel { width: 300px; padding: 16px 12px; }
.dmg-hero { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); }
.dmg-hero > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dmg-hero strong { overflow: hidden; font-family: var(--font-display); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.dmg-hero small { color: var(--ink-faint); font-size: 11px; }
.dmg-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 12px 0; }
.dmg-actions .btn { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; font-size: 11px; }
.dmg-section-head { padding: 9px 5px 6px; color: var(--ink-faint); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dmg-members { display: flex; flex-direction: column; gap: 2px; }
.dmg-member { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 6px; border-radius: 10px; cursor: pointer; }
.dmg-member:hover { background: var(--bg-hover); }
.dmg-member > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.dmg-member > div strong { overflow: hidden; color: var(--ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.dmg-member > div small { overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dmg-owner { display: grid; place-items: center; color: var(--amber); }
.dmg-member .icon-btn { width: 27px; height: 27px; }
.dmg-footer { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dmg-footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--red); font-size: 11px; }
.dmg-footer .btn:hover:not(:disabled) { background: rgba(207,74,63,.1); }
.dmg-footer .btn:disabled { opacity: .42; cursor: not-allowed; }
.dmg-footer small { color: var(--ink-faint); font-size: 9.5px; line-height: 1.35; text-align: center; }

.group-dm-editor { display: flex; flex-direction: column; gap: 13px; }
.group-dm-editor.compact { padding: 8px 0; }
.group-dm-identity { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 5px 13px; }
.group-dm-identity > label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.group-dm-identity > label > span { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.group-dm-identity input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--bg-sink);
}
.group-dm-identity input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-tint); }
.group-dm-icon-pick { position: relative; grid-row: 1 / 3; width: 68px; height: 68px; border-radius: 50%; }
.group-dm-icon-pick > .avatar { width: 68px; height: 68px; font-size: 31px; }
.group-dm-icon-pick > span:last-child {
  position: absolute; right: -2px; bottom: -2px;
  width: 25px; height: 25px; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--accent); color: #fff;
}
.group-dm-icon-pick:hover > .avatar { filter: brightness(.92); }
.group-dm-icon-clear { justify-self: start; color: var(--red); font-size: 10.5px; font-weight: 700; }
.group-dm-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 0; }
.group-dm-picker-head strong { font-size: 12px; }
.group-dm-picker-head span { color: var(--ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.group-dm-friend-list,.group-dm-add-list {
  max-height: min(42vh, 340px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 3px;
}
.group-dm-friend {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border: 1px solid transparent; border-radius: 11px;
  color: var(--ink-soft); cursor: pointer;
}
.group-dm-friend:hover { background: var(--bg-hover); }
.group-dm-friend.selected { border-color: rgba(219,107,71,.32); background: var(--accent-tint); }
.group-dm-friend input { width: 16px; height: 16px; accent-color: var(--accent); }
.group-dm-friend > span,.group-dm-add-list button > span { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.group-dm-friend strong,.group-dm-add-list button strong { overflow: hidden; color: var(--ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.group-dm-friend small,.group-dm-add-list button small { color: var(--ink-faint); font-size: 10px; }
.group-dm-add-list button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; text-align: left;
}
.group-dm-add-list button:hover { border-color: var(--accent); background: var(--accent-tint); }
.group-dm-add-list button:disabled { opacity: .5; cursor: wait; }
.group-dm-add-list button > b { color: var(--accent-strong); font-size: 10.5px; }
.mem-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 10px 8px 4px; }
.mem-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.mem-row:hover { background: var(--bg-hover); }
.mem-row .mem-name { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row .mem-sub { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row.offline { opacity: .5; }
.mem-row .crown { margin-left: auto; font-size: 12px; }

/* ── Modales ── */
#modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(38, 30, 22, 0.34);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  z-index: 200;
  animation: fade .15s;
}
@keyframes fade { from { opacity: 0; } }

/* ── Visor de imágenes (foto de un mensaje, a pantalla completa) ── */
#lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 16, 12, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px;
  animation: fade .15s;
}
#lightbox-img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
#lightbox-bar {
  position: fixed; top: 18px; right: 22px;
  display: flex; gap: 8px;
}
#lightbox-bar button {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
  transition: background .15s;
}
#lightbox-bar button:hover { background: rgba(255, 255, 255, 0.22); }
.msg-image { cursor: zoom-in; }
#modal {
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  box-shadow: var(--shadow);
  animation: pop .22s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes pop { from { opacity: 0; scale: .94; } }
#modal h2 { font-family: var(--font-display); font-size: 21px; margin-bottom: 4px; color: var(--ink); }
#modal .m-sub { color: var(--ink-faint); font-size: 13.5px; margin-bottom: 18px; }
.m-field { margin-bottom: 15px; }
.m-field > span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.m-field textarea { resize: none; }
.m-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.m-error { color: var(--red); font-size: 13px; min-height: 17px; margin-top: 10px; }
.m-meta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-faint); margin: -8px 0 18px; }
.m-meta .ico { opacity: .7; }
.m-dirty { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-strong); background: var(--accent-tint); padding: 9px 12px; border-radius: 10px; margin-top: 16px; }
.m-dirty .ico { opacity: .85; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-row:empty { display: none; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: var(--accent-tint); color: var(--accent-strong); }
.tag-chip button { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: inherit; opacity: .7; font-size: 13px; line-height: 1; }
.tag-chip button:hover { background: rgba(0,0,0,.12); opacity: 1; }

.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.emoji-grid button {
  aspect-ratio: 1; border-radius: 9px; font-size: 19px;
  background: var(--bg-sink); border: 1px solid transparent;
  display: grid; place-items: center;
}
.emoji-grid button:hover { background: var(--bg-hover); }
.emoji-grid button.sel { border-color: var(--accent); background: var(--accent-tint); }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-row button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; transition: scale .12s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.color-row button:hover { scale: 1.15; }
.color-row button.sel { border-color: var(--ink); }

.invite-code {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800; letter-spacing: 0.18em;
  text-align: center;
  padding: 18px;
  background: var(--accent-tint);
  border: 1.5px dashed rgba(219, 107, 71, 0.45);
  border-radius: 14px;
  color: var(--accent-strong);
  margin: 8px 0 4px;
  user-select: all;
}
.invite-link {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  word-break: break-all;
  padding: 16px;
  background: var(--accent-tint);
  border: 1.5px dashed rgba(219, 107, 71, 0.45);
  border-radius: 14px;
  color: var(--accent-strong);
  margin: 8px 0 4px;
  user-select: all;
}
.seg-5 { grid-template-columns: repeat(5, 1fr); }
.seg-5 button { font-size: 12px; padding: 8px 4px; }
.choice-cards { display: grid; gap: 10px; }
.choice-cards button {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.choice-cards button:hover { border-color: var(--accent); background: var(--accent-tint); }
.choice-cards .cc-emoji { font-size: 26px; }
.choice-cards strong { display: block; font-size: 15px; color: var(--ink); }
.choice-cards small { color: var(--ink-faint); font-size: 12.5px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg-sink); padding: 4px; border-radius: 11px; }
.seg button { padding: 8px; border-radius: 8px; font-weight: 600; color: var(--ink-faint); }
.seg button.active { background: #fff; color: var(--accent-strong); box-shadow: var(--shadow-sm); }

/* ── Popover ── */
#popover {
  position: fixed;
  z-index: 250;
  width: 256px;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
  padding: 14px;
  animation: pop .18s cubic-bezier(.2, 1.2, .4, 1);
}
.pop-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.pop-head .pop-name { font-weight: 800; font-size: 15.5px; color: var(--ink); }
.pop-head .pop-sub { font-size: 12px; color: var(--ink-faint); }
.pop-status { font-size: 13px; color: var(--ink-soft); font-style: italic; margin-bottom: 10px; }
#popover .btn { width: 100%; margin-top: 6px; font-size: 13.5px; padding: 8px; }

/* ── Toasts ── */
#toasts {
  position: fixed; top: 18px; left: 50%; translate: -50% 0;
  z-index: 400;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  padding: 11px 18px;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600; font-size: 14px;
  color: var(--ink);
  box-shadow: var(--shadow);
  animation: toast-in .25s cubic-bezier(.2, 1.2, .4, 1);
  max-width: min(480px, 90vw);
}
.toast.err { border-color: rgba(207, 74, 63, 0.4); color: var(--red); }
.toast.ok { border-color: rgba(47, 158, 99, 0.4); color: #24774a; }
@keyframes toast-in { from { opacity: 0; translate: 0 -12px; scale: .95; } }
.toast.bye { animation: toast-out .3s forwards; }
@keyframes toast-out { to { opacity: 0; translate: 0 -10px; } }

/* ── Responsive ── */
/* ── Barra de servidores (rail) ── */
#rail {
  background: var(--bg-side-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 14px; gap: 8px;
  overflow-y: auto; overflow-x: visible;
  scrollbar-width: none;
}
#rail::-webkit-scrollbar { display: none; }
.rail-servers { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.rail-sep { width: 28px; height: 2px; border-radius: 2px; background: var(--line); flex-shrink: 0; margin: 2px 0; }
.rail-item {
  position: relative;
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 15px;
  display: grid; place-items: center;
  transition: border-radius .2s cubic-bezier(.3,1.3,.5,1), transform .12s;
}
.rail-item:hover { border-radius: 13px; }
.rail-item:active { transform: scale(.94); }
.rail-ico { width: 46px; height: 46px; border-radius: inherit; overflow: hidden; display: grid; place-items: center; }
.rail-ico img { width: 100%; height: 100%; object-fit: cover; }
.rail-ico .ri-emoji { width: 100%; height: 100%; display: grid; place-items: center; font-size: 22px; }
.rail-item.home .ri-home { width: 46px; height: 46px; border-radius: inherit; display: grid; place-items: center; background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.rail-item.home.active .ri-home, .rail-item.home:hover .ri-home { background: var(--accent); color: #fff; }
.rail-item.add .ri-add { width: 46px; height: 46px; border-radius: inherit; display: grid; place-items: center; font-size: 26px; color: var(--green); background: #fff; border: 1.5px dashed rgba(47,158,99,.5); }
.rail-item.add:hover .ri-add { background: rgba(47,158,99,.1); border-style: solid; }
.rail-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; translate: 0 -50%;
  width: 4px; height: 26px; border-radius: 0 4px 4px 0; background: var(--accent);
}
.rail-item.active .rail-ico { box-shadow: 0 0 0 2px var(--bg-side-2), 0 0 0 4px var(--accent); }
.rail-badge {
  position: absolute; bottom: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--red); color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--bg-side-2);
}
/* Nombre del mundo al pasar el mouse: tooltip flotante posicionado por JS
   (no puede vivir dentro de #rail porque overflow-y:auto fuerza a recortar
   el eje X también, cortando cualquier tooltip absoluto que se salga) */
.rail-name { display: none; }
#rail-tip {
  position: fixed; z-index: 350;
  background: var(--ink); color: #fff;
  padding: 7px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0; translate: -8px -50%; pointer-events: none;
  transition: opacity .14s ease, translate .16s cubic-bezier(.2,1.2,.4,1);
}
#rail-tip::before { content: ''; position: absolute; right: 100%; top: 50%; translate: 0 -50%; border: 6px solid transparent; border-right-color: var(--ink); }
#rail-tip.show { opacity: 1; translate: 0 -50%; }

/* ── Cabecera de servidor en la sidebar (con banner opcional) ── */
.srv-head { position: relative; width: 100%; }
.srv-banner { height: 68px; background-size: cover; background-position: center; }
.srv-bar {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-side); text-align: left;
}
.srv-bar:hover { background: var(--bg-hover); }
/* sin banner: la cabecera vuelve a ser una barra compacta de 56px, igual que la vista de Amigos */
.srv-head.no-banner { height: 56px; }
.srv-head.no-banner .srv-bar { height: 100%; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.srv-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-caret { color: var(--ink-faint); font-size: 15px; flex-shrink: 0; }

/* ── Vistas de canal (foro, escenario, anuncios) ── */
.forum-view, .stage-view { flex: 1; overflow-y: auto; padding: 20px 22px; }
.forum-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.forum-head h2 { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.forum-new-btn { margin-left: auto; }
.forum-post {
  display: flex; gap: 13px; padding: 14px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .14s, transform .1s;
}
.forum-post:hover { border-color: var(--accent); }
.forum-post .fp-body { flex: 1; min-width: 0; }
.forum-post .fp-title { font-weight: 700; font-size: 15.5px; color: var(--ink); margin-bottom: 3px; }
.forum-post .fp-meta { font-size: 12.5px; color: var(--ink-faint); }
.forum-post .fp-replies { flex-shrink: 0; align-self: center; text-align: center; color: var(--ink-faint); font-size: 12px; }
.forum-post .fp-replies b { display: block; font-size: 18px; color: var(--ink); }
.thread-back { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0 18px; color: var(--ink-soft); font-weight: 600; font-size: 13.5px; padding: 5px 10px; border-radius: 8px; }
.thread-back:hover { background: var(--bg-hover); color: var(--ink); }
.announce-lock { display: flex; align-items: center; gap: 8px; margin: 0 22px 12px; padding: 10px 14px; background: var(--accent-tint); border-radius: 10px; color: var(--accent-strong); font-size: 13.5px; font-weight: 600; }

.stage-hero { text-align: center; padding: 40px 20px; }
.stage-hero .sh-ico { font-size: 48px; }
.stage-hero h2 { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin: 8px 0 4px; }
.stage-hero p { color: var(--ink-faint); margin-bottom: 18px; }
.stage-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 10px; }
.stage-person { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; }
.stage-person .avatar { width: 60px; height: 60px; font-size: 28px; }
.stage-person.speaking .avatar { box-shadow: 0 0 0 3px var(--green); }
.stage-person small { font-size: 12px; color: var(--ink-soft); text-align: center; }
.stage-role { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; }
.stage-person .vu-icons, .stage-face .vu-icons { justify-content: center; margin: 2px 0 0 0; font-size: 11px; }
.stage-section-label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 26px 0 12px; text-align: left; }
.stage-audience { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.stage-face { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; }
.stage-face .avatar { width: 40px; height: 40px; font-size: 18px; }

/* ── Vista de llamada expandida (modal) ── */
.vd-info { cursor: pointer; border-radius: 9px; transition: background .13s; }
.vd-info:hover { background: rgba(47, 158, 99, 0.1); }
.call-screen {
  width: 100%; aspect-ratio: 16/9; margin: 4px 0 18px;
  background: #0b0b0f; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.call-screen video { width: 100%; height: 100%; object-fit: contain; }
.call-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-start; margin: 6px 0 22px; }
.call-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; }
.call-tile.camera-on {
  width: min(250px, 100%);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-side);
  box-shadow: var(--shadow-sm);
}
.call-tile-media {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.call-tile.camera-on .call-tile-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 12px;
  background: #171923;
}
.call-tile-media video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#call-camera-local video { transform: scaleX(-1); }
.call-tile .avatar { width: 56px; height: 56px; font-size: 26px; }
.call-tile.camera-on .call-tile-media > .avatar { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); }
.call-tile small { font-size: 12px; color: var(--ink-soft); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px; }
.call-tile.camera-on .call-tile-name { max-width: 100%; font-weight: 700; }
.call-tile-icons { font-size: 12px; height: 14px; }
.call-tile { position: relative; }
.peer-volume {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
}
.peer-volume .ico { flex: 0 0 auto; }
.peer-volume input {
  width: 100%;
  min-width: 0;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.peer-volume output { width: 31px; flex: 0 0 31px; font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; }
.call-tile-mod { display: flex; gap: 3px; margin-top: 2px; }
.call-tile-mod button { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; display: grid; place-items: center; color: var(--ink-faint); }
.call-tile-mod button:hover { background: var(--bg-hover); color: var(--ink); }
.call-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.call-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 16px; border-radius: 13px;
  background: var(--bg-sink); color: var(--ink-soft);
  font-size: 19px; min-width: 76px;
  transition: background .13s, color .13s;
}
.call-btn span { font-size: 10.5px; font-weight: 600; }
.call-btn:hover { background: var(--bg-hover); }
.call-btn.on { background: var(--accent-tint); color: var(--accent-strong); }
.call-btn.off { background: rgba(207, 74, 63, 0.12); color: var(--red); }
.call-btn:disabled { opacity: .55; cursor: wait; }
.call-btn.danger { background: rgba(207, 74, 63, 0.12); color: var(--red); }
.call-btn.danger:hover { background: rgba(207, 74, 63, 0.2); }
.call-btn.ok { background: var(--green); color: #fff; }
.call-btn.ok:hover { filter: brightness(1.08); }
.call-soundboard-icon { font-size: 20px !important; line-height: 18px; }

.rtc-settings,
.soundboard-panel {
  margin: 4px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg-side);
}
.rtc-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rtc-settings-grid > label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.rtc-settings-grid > label > span { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.rtc-settings-grid select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
.rtc-settings-grid select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.rtc-settings-grid select:disabled { opacity: .55; }
.rtc-settings-grid label > small { color: var(--ink-faint); font-size: 9.5px; }
.rtc-settings-grid .rtc-noise-toggle {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}
.rtc-noise-toggle span { display: flex; flex-direction: column; gap: 2px; }
.rtc-noise-toggle span strong { color: var(--ink); font-size: 12px; }
.rtc-noise-toggle span small { color: var(--ink-faint); font-size: 10px; font-weight: 500; }
.rtc-noise-toggle input { width: 17px; height: 17px; accent-color: var(--accent); }
.soundboard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.soundboard-head strong { font-family: var(--font-display); font-size: 14px; }
.soundboard-head small { color: var(--ink-faint); font-size: 10px; }
.soundboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.soundboard-grid button {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: transform .12s, border-color .12s, background .12s;
}
.soundboard-grid button:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-tint); }
.soundboard-grid button > span { font-size: 23px; line-height: 1; }
.soundboard-grid button > strong { width: 100%; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.soundboard-grid button.playing { animation: soundboard-pulse .8s ease; }
.soundboard-empty { grid-column: 1 / -1; padding: 14px; color: var(--ink-faint); font-size: 11px; text-align: center; }
@keyframes soundboard-pulse {
  0%,100% { transform: scale(1); box-shadow: none; }
  35% { transform: scale(.96); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
}
@media (max-width:680px) {
  .call-tile.camera-on { width: 100%; }
  .rtc-settings-grid { grid-template-columns: 1fr; }
  .rtc-settings-grid .rtc-noise-toggle { grid-column: auto; }
  .soundboard-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .call-controls { gap: 7px; }
  .call-btn { min-width: 70px; padding: 9px 10px; }
}

/* ── Llamada de DM: "sonando" con una onda que se expande desde el avatar, estilo Discord ── */
.call-ring { text-align: center; padding: 8px 4px 2px; }
.cr-avatar-wrap { position: relative; width: 88px; height: 88px; margin: 10px auto 22px; }
.cr-avatar-wrap > .avatar { width: 100%; height: 100%; font-size: 40px; position: relative; z-index: 2; }
.cr-ping {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent);
  opacity: .4;
  animation: cr-ping 2s cubic-bezier(.2, .6, .4, 1) infinite;
}
.cr-ping.d2 { animation-delay: 1s; }
@keyframes cr-ping {
  0% { transform: scale(1); opacity: .4; }
  100% { transform: scale(1.9); opacity: 0; }
}
.call-ring-actions { display: flex; gap: 14px; justify-content: center; margin-top: 4px; }

/* ── Roles (chips) ── */
.role-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.role-chip .rc-dot { width: 8px; height: 8px; border-radius: 50%; }
.roles-list { display: flex; flex-direction: column; gap: 8px; }
.role-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; }
.role-item .ri-name { font-weight: 700; }
.role-item .ri-perms { font-size: 12px; color: var(--ink-faint); }
.role-item .ri-acts { margin-left: auto; display: flex; gap: 6px; }
.perm-grid { display: flex; flex-direction: column; gap: 8px; }
.perm-check { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.perm-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.perm-check .pc-name { font-weight: 600; font-size: 14px; }
.perm-check .pc-desc { font-size: 12px; color: var(--ink-faint); }
.perm-check.sel-privacy { border-color: var(--accent); background: var(--accent-tint); }
.perm-check input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.rl-tabs { display: flex; gap: 4px; margin: 0 0 14px 14px; border-bottom: 1px solid var(--line); }
.rl-tabs button { padding: 8px 4px; font-size: 13px; font-weight: 700; color: var(--ink-faint); border-bottom: 2px solid transparent; margin-right: 14px; }
.rl-tabs button:hover { color: var(--ink); }
.rl-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.rsw { width: 38px; height: 22px; border-radius: 99px; background: var(--bg-sink); position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s; display: inline-block; }
.rsw.on { background: var(--accent); }
.rsw i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.rsw.on i { left: 18px; }
.role-drag.dragging { opacity: .4; }
.mem-roles { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }

/* ── Ajustes de la cuenta ── */
.settings-link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 11px 14px; margin: 4px 0 16px;
  background: var(--bg-sink); border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink-soft); font-weight: 600; font-size: 13.5px; text-align: left;
}
.settings-link:hover { background: var(--bg-hover); color: var(--ink); }
.settings-link span { color: var(--ink-faint); font-size: 16px; }
.settings-tabs { display: flex; gap: 6px; background: var(--bg-sink); padding: 4px; border-radius: 11px; margin-bottom: 16px; }
.settings-tabs button { flex: 1; padding: 8px 6px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--ink-faint); }
.settings-tabs button.active { background: #fff; color: var(--accent-strong); box-shadow: var(--shadow-sm); }
.settings-panel { display: flex; flex-direction: column; gap: 14px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.settings-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.settings-card h3 { font-family: var(--font-display); font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.sc-desc { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 10px; }
.sc-note { font-size: 12.5px; color: var(--accent-strong); background: var(--accent-tint); padding: 8px 10px; border-radius: 8px; margin-top: 8px; }
.settings-card .btn { margin-top: 4px; }
.settings-card .m-field:last-of-type { margin-bottom: 10px; }

#modal.settings-modal {
  width: min(940px, calc(100vw - 40px));
  height: min(720px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #faf7f2;
}
.settings-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.settings-head {
  min-height: 98px;
  flex: 0 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(231,126,85,.3), transparent 28%),
    linear-gradient(125deg, #1e1a17, #2b211c);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.settings-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.settings-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #ec8963, #c94e2e);
  border: 3px solid rgba(255,255,255,.82);
  box-shadow: 0 9px 22px rgba(0,0,0,.25);
  font: 800 21px var(--font-display);
}
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-kicker {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.settings-head .settings-kicker { color: #ef9b79; }
#modal.settings-modal .settings-head h2 {
  margin: 2px 0 1px;
  color: #fff;
  font-size: 24px;
  line-height: 1.05;
}
.settings-head p {
  max-width: 340px;
  margin: 0;
  overflow: hidden;
  color: #bfb7b0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #d7d0ca;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 23px;
  line-height: 1;
  transition: background .17s ease, color .17s ease, transform .17s ease;
}
.settings-close:hover { color: #fff; background: rgba(255,255,255,.15); transform: rotate(3deg); }
.settings-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
}
#modal.settings-modal .settings-tabs {
  min-width: 0;
  margin: 0;
  padding: 22px 14px;
  align-content: start;
  display: grid;
  gap: 7px;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 45%),
    #eee9e2;
  border-right: 1px solid var(--line);
  box-shadow: none;
  overflow-y: auto;
}
#modal.settings-modal .settings-tabs button {
  width: 100%;
  min-width: 0;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 11px;
  color: #6d655e;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 680;
  text-align: left;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#modal.settings-modal .settings-tabs button .ico,
#modal.settings-modal .settings-tabs button > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
#modal.settings-modal .settings-tabs button:hover {
  color: var(--ink);
  background: rgba(255,255,255,.62);
  transform: translateX(2px);
}
#modal.settings-modal .settings-tabs button.active {
  color: var(--accent-strong);
  background: #fffdfa;
  box-shadow: 0 6px 18px rgba(51,35,25,.08), inset 3px 0 var(--accent);
}
.settings-content {
  min-width: 0;
  min-height: 0;
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0, rgba(219,107,71,.07), transparent 32%),
    #faf7f2;
}
.settings-section-head {
  flex: 0 0 auto;
  margin-bottom: 20px;
}
#modal.settings-modal .settings-section-head h2 {
  margin: 4px 0 3px;
  font-size: 25px;
  letter-spacing: -.02em;
}
.settings-section-head p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 13px;
}
#modal.settings-modal .settings-panel {
  flex: 1;
  min-height: 0;
  max-height: none;
  padding: 1px 7px 12px 1px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 13px;
  overflow-y: auto;
  scrollbar-color: rgba(89,76,66,.28) transparent;
}
#modal.settings-modal .settings-panel > .settings-card:only-child { grid-column: 1 / -1; }
#modal.settings-modal .settings-card {
  min-width: 0;
  padding: 18px;
  border-radius: 15px;
  background: rgba(255,255,255,.82);
  border-color: rgba(81,65,54,.13);
  box-shadow: 0 5px 18px rgba(49,34,24,.045);
}
#modal.settings-modal .settings-card:hover {
  transform: none;
  border-color: rgba(219,107,71,.28);
  box-shadow: 0 9px 25px rgba(49,34,24,.075);
}
#modal.settings-modal .settings-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
#modal.settings-modal .sc-desc {
  margin: 0 0 12px;
  line-height: 1.45;
}
.settings-language-card { grid-column: 1 / -1; }
.settings-language-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.settings-language-heading .sc-desc { margin-bottom: 14px !important; }
.settings-language-current {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--accent-tint);
  font-size: 10px;
  font-weight: 750;
}
.settings-language-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.settings-language-options button {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fbf9f6;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.settings-language-options button:hover {
  border-color: rgba(219,107,71,.48);
  background: #fffdfa;
  transform: translateY(-1px);
}
.settings-language-options button.active {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 3px rgba(219,107,71,.08);
}
.settings-language-code {
  width: 37px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ink-soft);
  background: #eee8e1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.settings-language-options button.active .settings-language-code {
  color: #fff;
  background: var(--accent);
}
.settings-language-options strong,
.settings-language-options small { display: block; }
.settings-language-options strong { font-size: 13px; }
.settings-language-options small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-language-check {
  color: var(--accent-strong);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
#modal.settings-modal .m-field input {
  background: #fbf9f6;
}
#modal.settings-modal .google-link-state {
  align-items: flex-start;
  flex-direction: column;
}
#modal.settings-modal .google-button-slot { max-width: none; }
.settings-loading {
  min-height: 430px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 17px;
  color: var(--ink-soft);
}
.settings-loading-orbit {
  width: 54px;
  height: 54px;
  position: relative;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: settings-orbit 1.1s linear infinite;
}
.settings-loading-orbit::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: -3px;
  top: 7px;
  border-radius: 50%;
  background: var(--amber);
}
.settings-loading-orbit i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes settings-orbit { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  #members { display: none !important; }
  #members.dm-group-panel {
    display: block !important;
    position: fixed;
    z-index: 12;
    top: 66px;
    right: 12px;
    bottom: 12px;
    width: min(300px, calc(100vw - 24px));
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
}
@media (max-width: 820px) and (min-width: 681px) {
  #app { grid-template-columns: 74px 220px 1fr; }
}

/* ── Mobile: un panel a pantalla completa a la vez (lista o chat), con botón de volver ── */
.mh-back { display: none; }
@media (max-width: 680px) {
  #app { display: block; position: fixed; inset: 0; overflow: hidden; overflow: clip; }
  #rail { position: absolute; top: 0; bottom: 0; left: 0; width: 74px; z-index: 3; }
  #sidebar { position: absolute; top: 0; bottom: 0; left: 74px; right: 0; width: auto; z-index: 2; }
  #main {
    position: absolute; inset: 0; z-index: 4;
    transform: translateX(100%);
    transition: transform .22s ease;
  }
  #members { display: none !important; }
  body.mobile-chat #main { transform: translateX(0); }
  .mh-back {
    display: grid; place-items: center;
    width: 30px; height: 30px; margin-right: 2px; flex-shrink: 0;
    font-size: 22px; font-weight: 700; color: var(--ink-soft); border-radius: 8px;
  }
  .mh-back:hover { background: var(--bg-hover); color: var(--ink); }
  #rail-tip { display: none; }
  #modal { width: min(440px, calc(100vw - 24px)); padding: 20px; }
  #modal.wide { width: min(680px, calc(100vw - 24px)); }
  #modal.settings-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    padding: 0;
    border-radius: 19px;
  }
  .settings-head { min-height: 82px; padding: 14px 16px; }
  .settings-avatar { width: 46px; height: 46px; border-radius: 14px; }
  #modal.settings-modal .settings-head h2 { font-size: 21px; }
  .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  #modal.settings-modal .settings-tabs {
    padding: 9px 10px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  #modal.settings-modal .settings-tabs button {
    width: auto;
    flex: 0 0 auto;
    padding: 9px 11px;
    white-space: nowrap;
  }
  #modal.settings-modal .settings-tabs button:hover { transform: none; }
  #modal.settings-modal .settings-tabs button.active {
    box-shadow: 0 4px 12px rgba(51,35,25,.08), inset 0 -2px var(--accent);
  }
  .settings-content { padding: 20px 16px; }
  .settings-section-head { margin-bottom: 15px; }
  #modal.settings-modal .settings-section-head h2 { font-size: 22px; }
  #modal.settings-modal .settings-panel { grid-template-columns: 1fr; padding-right: 4px; }
  #modal.settings-modal .settings-panel > .settings-card { grid-column: 1; }
  .settings-language-heading { flex-direction: column; gap: 0; }
  .settings-language-current { margin-bottom: 12px; }
  .settings-language-options { grid-template-columns: 1fr; }
  .dm-hub-toolbar { align-items: flex-start; flex-direction: column; }
  .dm-hub-toolbar .btn { width: 100%; justify-content: center; }
  .group-dm-identity { grid-template-columns: 68px minmax(0, 1fr); }
  .cperm-layout { grid-template-columns: 1fr; max-height: none; }
  .cperm-side { max-height: 30vh; }
  .call-grid { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   Pulido visual 2026 — profundidad, ritmo y microinteracciones
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg-canvas: #f8f5ef;
  --surface: rgba(255, 253, 250, .88);
  --surface-solid: #fffdfa;
  --accent-glow: rgba(219, 107, 71, .22);
  --green-glow: rgba(47, 158, 99, .18);
  --shadow-xs: 0 1px 2px rgba(38, 28, 20, .06);
  --shadow-sm: 0 4px 14px rgba(38, 28, 20, .09);
  --shadow: 0 18px 50px rgba(38, 28, 20, .17), 0 2px 8px rgba(38, 28, 20, .06), 0 0 0 1px var(--line-soft);
  --shadow-float: 0 18px 42px rgba(91, 48, 28, .16), 0 5px 14px rgba(38, 28, 20, .08);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, 1.35, .35, 1);
}

body {
  background:
    radial-gradient(900px 520px at 72% -12%, rgba(236, 129, 88, .08), transparent 66%),
    var(--bg-canvas);
}

::selection { background: rgba(219, 107, 71, .22); color: var(--ink); }

button, input, textarea, [tabindex] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(219, 107, 71, .25);
  outline-offset: 2px;
}

/* Acceso */
#auth, #loading {
  background:
    radial-gradient(900px 580px at 88% -4%, rgba(236, 129, 88, .19), transparent 62%),
    radial-gradient(720px 500px at 4% 105%, rgba(111, 158, 138, .13), transparent 62%),
    linear-gradient(145deg, #fbf8f2 0%, #f6f1e8 52%, #faf6ef 100%);
}
.auth-orbits { mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.orbit { border-color: rgba(219, 107, 71, .19); filter: drop-shadow(0 0 16px rgba(219, 107, 71, .08)); }
.auth-card {
  overflow: hidden;
  background: rgba(255, 253, 250, .9);
  border-color: rgba(255, 255, 255, .78);
  box-shadow: 0 30px 80px rgba(70, 44, 28, .18), 0 5px 18px rgba(70, 44, 28, .08), inset 0 0 0 1px rgba(38, 34, 30, .07);
  backdrop-filter: blur(18px) saturate(1.15);
  animation: auth-card-in .65s var(--ease-out) both;
}
.auth-card::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--amber), var(--accent) 50%, #6f9e8a);
}
.auth-card::after {
  content: '';
  position: absolute; width: 160px; height: 160px; right: -88px; top: -88px;
  border-radius: 50%; border: 1px solid rgba(219, 107, 71, .16);
  box-shadow: 0 0 0 24px rgba(219, 107, 71, .035), 0 0 0 52px rgba(219, 107, 71, .025);
  pointer-events: none;
}
@keyframes auth-card-in { from { opacity: 0; transform: translateY(22px) scale(.975); } }
.brand .logo { animation: logo-hover 5s ease-in-out infinite; }
@keyframes logo-hover { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
.auth-tabs, .seg, .settings-tabs { box-shadow: inset 0 1px 2px rgba(38, 28, 20, .07); }
.auth-tabs button, .seg button, .settings-tabs button { transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--ease-out); }
.auth-tabs button.active, .seg button.active, .settings-tabs button.active { box-shadow: 0 3px 10px rgba(38, 28, 20, .1); }
.field input, .m-field input, .m-field textarea, .fr-add-box input {
  box-shadow: inset 0 1px 2px rgba(38, 28, 20, .045);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s var(--ease-out);
}
.field input:hover, .m-field input:hover, .m-field textarea:hover, .fr-add-box input:hover { border-color: rgba(38, 34, 30, .2); }
.field input:focus, .m-field input:focus, .m-field textarea:focus, .fr-add-box input:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(219, 107, 71, .12), 0 5px 14px rgba(38, 28, 20, .07);
}

/* Botones */
.btn {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .18s var(--ease-out), filter .18s ease;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.25) 48%, transparent 72%);
  transform: translateX(-135%); transition: transform .5s var(--ease-out); pointer-events: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(38, 28, 20, .12); }
.btn:hover::after { transform: translateX(135%); }
.btn:active { transform: translateY(0) scale(.975); box-shadow: var(--shadow-xs); }
.btn-primary { background: linear-gradient(145deg, #e87954, var(--accent)); box-shadow: 0 7px 18px rgba(191, 83, 48, .22); }
.btn-primary:hover { background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 9px 22px rgba(191, 83, 48, .3); }
.btn-ghost { background: rgba(255, 255, 255, .7); }
.icon-btn {
  transition: color .18s ease, background .18s ease, transform .18s var(--ease-spring), box-shadow .18s ease;
}
.icon-btn:hover { transform: translateY(-1px) scale(1.06); box-shadow: var(--shadow-xs); }
.icon-btn:active { transform: scale(.9); }

/* Entrada y estructura de la aplicación */
#app:not(.hidden) { animation: app-arrive .55s var(--ease-out) both; }
@keyframes app-arrive { from { opacity: 0; transform: scale(.992); filter: blur(3px); } }
#rail {
  background:
    radial-gradient(150px 240px at 50% 0%, rgba(219, 107, 71, .12), transparent 75%),
    linear-gradient(180deg, #f3eee5, #eee9df);
  box-shadow: inset -1px 0 rgba(255,255,255,.7);
}
#sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 34%),
    var(--bg-side);
  box-shadow: 8px 0 30px rgba(38, 28, 20, .035);
  z-index: 1;
}
#sidebar-brand, #main-head {
  background: rgba(255, 253, 250, .78);
  backdrop-filter: blur(15px) saturate(1.2);
}
#sidebar-brand { box-shadow: 0 1px 0 var(--line-soft); }
#main {
  position: relative; isolation: isolate;
  background:
    radial-gradient(700px 320px at 68% 0%, rgba(219,107,71,.035), transparent 68%),
    var(--bg);
}
#main-head { z-index: 5; box-shadow: 0 4px 16px rgba(38,28,20,.035); }
#main-body > :not(#typing-row):not(#composer) { animation: view-arrive .35s var(--ease-out) both; }
@keyframes view-arrive { from { opacity: 0; transform: translateY(8px); } }

/* Navegación */
.rail-item { transition: border-radius .25s var(--ease-spring), transform .2s var(--ease-spring), filter .2s ease; }
.rail-item:hover { transform: translateY(-3px) scale(1.045); filter: drop-shadow(0 8px 8px rgba(38,28,20,.12)); }
.rail-item:active { transform: scale(.9); }
.rail-item.active::before { animation: active-rail .38s var(--ease-spring) both; box-shadow: 0 0 12px var(--accent-glow); }
@keyframes active-rail { from { height: 8px; opacity: 0; } }
.rail-item.active .rail-ico { box-shadow: 0 0 0 2px var(--bg-side-2), 0 0 0 4px var(--accent), 0 8px 18px rgba(191,83,48,.18); }
.rail-badge { box-shadow: 0 2px 7px rgba(207,74,63,.35); animation: badge-in .3s var(--ease-spring) both; }
@keyframes badge-in { from { opacity: 0; transform: scale(.4); } }
.side-row, .world, .chan, .cat-header, .mem-row, .fr-row {
  position: relative;
  transition: color .18s ease, background .18s ease, transform .18s var(--ease-out), box-shadow .18s ease;
}
.side-row:hover, .world:hover, .chan:hover, .mem-row:hover, .fr-row:hover { transform: translateX(2px); }
.side-row.active, .chan.active {
  background: linear-gradient(90deg, rgba(219,107,71,.15), rgba(219,107,71,.07));
  box-shadow: inset 2px 0 var(--accent), 0 2px 8px rgba(191,83,48,.06);
}
.chan-actions { transform: translateX(5px); transition: opacity .16s ease, transform .18s var(--ease-out); }
.chan:hover .chan-actions { transform: translateX(0); }
.cat-caret { transition: rotate .22s var(--ease-spring), transform .18s var(--ease-spring); }
.cat-header:hover .cat-caret { transform: scale(1.18); }
.pill { box-shadow: 0 3px 8px rgba(191,83,48,.22); animation: badge-in .3s var(--ease-spring) both; }

/* Contenido y chat */
.avatar { transition: transform .2s var(--ease-spring), box-shadow .2s ease, filter .2s ease; }
.mem-row:hover .avatar, .fr-row:hover .avatar, .voice-user:hover .avatar { transform: scale(1.06); box-shadow: 0 4px 12px rgba(38,28,20,.13); }
.avatar .dot.on { box-shadow: 0 0 0 2px var(--bg-side), 0 0 9px rgba(47,158,99,.38); }
.msgs-hello .orbit-logo-static { animation: empty-orbit-float 5s ease-in-out infinite; }
@keyframes empty-orbit-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
.msg {
  transition: background .16s ease, box-shadow .16s ease, transform .18s var(--ease-out);
}
.msg:hover { background: linear-gradient(90deg, rgba(38,34,30,.028), transparent); transform: translateX(2px); }
.msg.first { margin-top: 17px; }
.msg-actions { display: flex; opacity: 0; pointer-events: none; transform: translateY(5px) scale(.96); transition: opacity .16s ease, transform .2s var(--ease-spring); }
.msg:hover .msg-actions { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.msg-image img { transition: transform .24s var(--ease-out), box-shadow .24s ease, filter .24s ease; }
.msg-image:hover img { transform: translateY(-2px) scale(1.006); box-shadow: 0 12px 28px rgba(38,28,20,.16); filter: saturate(1.04); }
.composer-box {
  background: rgba(244,240,232,.86);
  box-shadow: inset 0 1px 2px rgba(38,28,20,.055), 0 2px 8px rgba(38,28,20,.025);
  backdrop-filter: blur(10px);
  transition: border-color .2s ease, box-shadow .22s ease, background .2s ease, transform .22s var(--ease-out);
}
.composer-box:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(219,107,71,.1), 0 14px 30px rgba(76,45,28,.11);
}
#send-btn, #attach-btn { transition: opacity .16s ease, background .18s ease, color .18s ease, transform .2s var(--ease-spring), box-shadow .18s ease; }
#send-btn.ready { box-shadow: 0 5px 13px rgba(191,83,48,.25); }
#send-btn.ready:hover, #attach-btn:hover { transform: translateY(-1px) scale(1.07); }
#send-btn:active, #attach-btn:active { transform: scale(.9); }
.typing-dots i { box-shadow: 0 0 5px var(--accent-glow); }
.day-divider::before, .day-divider::after { background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* Tarjetas y paneles */
.forum-post, .settings-card, .role-item, .choice-cards button, .dm-request-bar {
  box-shadow: 0 2px 8px rgba(38,28,20,.035);
  transition: border-color .2s ease, background .2s ease, transform .2s var(--ease-out), box-shadow .2s ease;
}
.forum-post:hover, .settings-card:hover, .role-item:hover, .choice-cards button:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 25px rgba(38,28,20,.09);
}
#members { background: linear-gradient(180deg, rgba(246,243,236,.92), var(--bg-side)); border-left-color: var(--line-soft); }
.mem-row:hover { box-shadow: inset 0 0 0 1px var(--line-soft); }
.stage-person.speaking .avatar { animation: speaking-ring 1.35s ease-in-out infinite; }
@keyframes speaking-ring { 0%,100% { box-shadow: 0 0 0 3px var(--green), 0 0 0 7px rgba(47,158,99,0); } 50% { box-shadow: 0 0 0 3px var(--green), 0 0 0 9px rgba(47,158,99,.13); } }
#voice-dock {
  background: linear-gradient(135deg, rgba(47,158,99,.12), rgba(255,255,255,.5));
  box-shadow: 0 8px 20px rgba(47,158,99,.1), inset 0 1px rgba(255,255,255,.65);
  animation: dock-in .35s var(--ease-spring) both;
}
@keyframes dock-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* Capas flotantes */
#modal-backdrop { background: rgba(32,24,18,.38); backdrop-filter: blur(8px) saturate(.9); animation: backdrop-in .22s ease both; }
@keyframes backdrop-in { from { opacity: 0; backdrop-filter: blur(0); } }
#modal {
  background: rgba(255,253,250,.96);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 32px 90px rgba(25,18,13,.3), inset 0 0 0 1px var(--line);
  animation: modal-in .32s var(--ease-spring) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.955); } }
#popover {
  background: rgba(255,253,250,.94);
  border-color: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line);
  transform-origin: 20% 0;
  animation: popover-in .24s var(--ease-spring) both;
}
@keyframes popover-in { from { opacity: 0; transform: translateY(7px) scale(.94); } }
.toast {
  background: rgba(255,253,250,.94);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-float);
  animation: toast-in-polished .34s var(--ease-spring) both;
}
@keyframes toast-in-polished { from { opacity: 0; transform: translateY(-16px) scale(.92); } }
.toast.bye { animation: toast-out-polished .26s ease forwards; }
@keyframes toast-out-polished { to { opacity: 0; transform: translateY(-9px) scale(.97); } }
#lightbox-img { animation: lightbox-image-in .3s var(--ease-out) both; }
@keyframes lightbox-image-in { from { opacity: 0; transform: scale(.96); } }

/* Móvil */
@media (max-width: 680px) {
  #sidebar { z-index: 2; }
  #main {
    position: absolute; inset: 0; z-index: 4;
    transition: transform .32s var(--ease-out);
    box-shadow: -18px 0 50px rgba(38,28,20,.16);
  }
  #main-head { padding: 0 12px; }
  #messages { padding-inline: 14px; }
  #composer { padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
  .composer-box { border-radius: 16px; }
  .auth-card { padding: 34px 26px 27px; }
  .auth-foot { bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* El movimiento es decorativo: respetar la preferencia del sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Personalización avanzada de perfiles
   ═══════════════════════════════════════════════════════════ */
.profile-editor-modal {
  width: min(1040px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f8f5ef !important;
}
.profile-editor-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 23px 26px 19px; background: rgba(255,253,250,.9);
  border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
.profile-editor-head h2 { font-size: 24px !important; }
.profile-editor-head .m-sub { margin: 3px 0 0 !important; }
.profile-editor-badge {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 7px 11px; border-radius: 99px; color: var(--accent-strong);
  background: var(--accent-tint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.profile-editor-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-glow); }
.profile-editor-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(330px,.88fr); height: min(660px, calc(100vh - 178px)); min-height: 420px; }
.profile-editor-controls { overflow-y: auto; padding: 22px 24px 28px; }
.profile-editor-preview {
  overflow-y: auto; padding: 24px;
  background:
    radial-gradient(500px 300px at 80% -5%, rgba(219,107,71,.22), transparent 65%),
    radial-gradient(400px 300px at 0% 100%, rgba(111,158,138,.16), transparent 68%),
    #2b2725;
  border-left: 1px solid rgba(255,255,255,.08);
}
.profile-preview-label { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.profile-preview-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pf-preview-note { max-width: 360px; margin: 12px auto 0; text-align: center; color: rgba(255,255,255,.48); font-size: 11.5px; }
.profile-editor-footer {
  min-height: 68px; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,253,250,.94); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(38,28,20,.05); position: relative; z-index: 5;
}
.profile-editor-footer > div { display: flex; gap: 9px; margin-left: auto; }
.profile-editor-footer .m-dirty { margin: 0; visibility: hidden; opacity: 0; transform: translateY(3px); transition: opacity .18s, transform .18s; }
.profile-editor-footer .m-dirty.show { visibility: visible; opacity: 1; transform: translateY(0); }

.pf-section { padding: 17px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: 0 3px 12px rgba(38,28,20,.035); }
.pf-section:last-child { margin-bottom: 0; }
.pf-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.pf-section-title > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-tint); color: var(--accent-strong); font-size: 10px; font-weight: 900; }
.pf-section-title strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.pf-section-title small { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 1px; }
.pf-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pf-upload-tile {
  display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 11px; text-align: left; border: 1px dashed rgba(38,34,30,.18); border-radius: 12px; background: var(--bg-side);
  transition: border-color .18s, background .18s, transform .18s var(--ease-out), box-shadow .18s;
}
.pf-upload-tile:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-tint); box-shadow: var(--shadow-sm); }
.pf-upload-icon { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-strong); background: #fff; box-shadow: var(--shadow-xs); }
.pf-upload-tile strong { align-self: end; font-size: 13px; }
.pf-upload-tile small { align-self: start; font-size: 11px; color: var(--ink-faint); }
.pf-inline-actions { display: flex; gap: 8px; margin-top: 9px; }
.pf-inline-actions .btn { padding: 6px 9px; font-size: 11.5px; box-shadow: none; }
.pf-inline-actions .btn:disabled { display: none; }

.pf-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-theme-grid button { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; text-align: left; transition: border-color .18s, background .18s, transform .18s; }
.pf-theme-grid button:hover { transform: translateY(-1px); border-color: var(--accent); }
.pf-theme-grid button.sel { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.pf-theme-grid i { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg,var(--swatch-a),var(--swatch-b)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.pf-theme-grid strong, .pf-theme-grid small { display: block; }
.pf-theme-grid strong { font-size: 12.5px; }
.pf-theme-grid small { color: var(--ink-faint); font-size: 10.5px; }
.pf-color-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.pf-color-pickers label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-side); border: 1px solid var(--line-soft); color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.pf-color-pickers input { width: 34px; height: 28px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; }
.pf-quick-colors { margin-top: 10px; }
.pf-quick-colors button { width: 24px; height: 24px; }

.pf-style-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.pf-style-grid button { min-width: 0; padding: 10px 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-side); }
.pf-style-grid button:hover { border-color: var(--accent); }
.pf-style-grid button.sel { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.pf-style-grid button > span { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.pf-style-grid small { display: block; color: var(--ink-faint); font-size: 9.5px; margin-top: 5px; }
.pf-compact-field { margin: 13px 0 0; }
.pf-section .m-field:last-child { margin-bottom: 0; }
.pf-section .m-field > span i { float: right; font-style: normal; color: var(--ink-faint); font-weight: 500; }

/* Vista previa de tarjeta */
.profile-live-card { position: relative; width: min(100%, 370px); margin: 0 auto; border-radius: 20px; overflow: hidden; background: #fffdfa; box-shadow: 0 24px 64px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.12); isolation: isolate; }
.profile-live-card > *, .profile-popover-surface > *, #members.dm-profile > * { position: relative; z-index: 2; }
.plc-banner { height: 124px; background-size: cover !important; background-position: center !important; }
.plc-avatar { position: absolute !important; top: 78px; left: 22px; z-index: 4 !important; }
.plc-avatar .avatar { width: 84px; height: 84px; font-size: 38px; box-shadow: 0 0 0 6px #fffdfa, 0 9px 22px rgba(0,0,0,.2); }
.plc-avatar .avatar .dot { width: 20px; height: 20px; right: 0; bottom: 0; border: 4px solid #fffdfa; }
.plc-content { min-height: 310px; padding: 52px 22px 22px; background: #fffdfa; color: var(--ink); }
.plc-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plc-name-row .profile-display-name { font-family: var(--font-display); font-size: 25px; }
.plc-pronouns, .pop-pronouns, .dmp-pronouns { display: inline-flex; padding: 3px 7px; border-radius: 99px; background: rgba(38,34,30,.07); color: var(--ink-faint); font-size: 10.5px; font-weight: 700; }
.plc-handle { margin-top: 2px; color: var(--ink-faint); font-size: 12px; }
.plc-presence { margin-top: 8px; }
.plc-status { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.55); color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.plc-status span { color: var(--profile-a); }
.plc-tags { margin: 10px 0 0; }
.plc-tags .tag-chip { background: color-mix(in srgb,var(--profile-a) 14%,white); color: color-mix(in srgb,var(--profile-a) 78%,black); }
.plc-divider { height: 1px; margin: 17px 0 14px; background: var(--line); }
.plc-label { margin-bottom: 5px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.plc-bio { min-height: 42px; color: var(--ink-soft); font-size: 13px; line-height: 1.48; white-space: pre-wrap; }
.plc-bio > span { color: var(--ink-faint); font-style: italic; }
.plc-member { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; color: var(--ink); font-size: 12px; }
.plc-member span { color: var(--ink-faint); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* Temas */
.profile-live-card.theme-nebula .plc-content { background: linear-gradient(155deg,#fffafd,#f8f2ff); }
.profile-live-card.theme-aurora .plc-content { background: linear-gradient(155deg,#fbfffd,#effcf8); }
.profile-live-card.theme-minimal .plc-content { background: #f8fafc; }
.profile-live-card.theme-eclipse .plc-content { background: linear-gradient(150deg,#171923,#222534); color: #f8fafc; }
.theme-eclipse .plc-content .plc-handle, .theme-eclipse .plc-content .plc-label, .theme-eclipse .plc-content .plc-bio, .theme-eclipse .plc-content .plc-member span { color: #9ca3af; }
.theme-eclipse .plc-content .plc-status { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: #d1d5db; }
.theme-eclipse .plc-content .plc-divider { background: rgba(255,255,255,.1); }
.theme-eclipse .plc-content .plc-member { color: #f8fafc; }
.theme-eclipse .plc-avatar .avatar { box-shadow: 0 0 0 6px #171923, 0 9px 22px rgba(0,0,0,.35); }

/* Estilos del nombre */
.profile-display-name { display: inline-block; font-weight: 750; line-height: 1.12; }
.profile-display-name.name-bold { font-weight: 900; letter-spacing: -.035em; }
.profile-display-name.name-gradient { color: transparent !important; background: linear-gradient(100deg,var(--profile-a),var(--profile-b)); -webkit-background-clip: text; background-clip: text; font-weight: 900; }
.profile-display-name.name-glow { color: var(--profile-a) !important; font-weight: 850; text-shadow: 0 0 7px color-mix(in srgb,var(--profile-a) 55%,transparent), 0 0 18px color-mix(in srgb,var(--profile-b) 35%,transparent); }

/* Personalización en tarjetas públicas */
#popover:has(.profile-popover-surface) { width: 320px; padding: 0; background: transparent; overflow: hidden; }
.profile-popover-surface { position: relative; margin: 0; padding: 14px; border-radius: 18px; overflow: hidden; background: #fffdfa; isolation: isolate; }
.profile-popover-surface .pop-banner-wrap { background-size: cover !important; background-position: center !important; }
.profile-popover-surface .pop-banner-wrap { height: 108px; border-radius: 18px 18px 0 0; }
.profile-popover-surface .pop-av-wrap { bottom: -33px; left: 16px; }
.profile-popover-surface .pop-av-wrap .avatar { width: 72px; height: 72px; font-size: 31px; box-shadow: 0 0 0 5px #fffdfa,0 8px 20px rgba(0,0,0,.18); }
.profile-popover-surface .pop-body { padding: 45px 3px 3px; }
.profile-popover-surface .pop-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.profile-popover-surface .pop-name .profile-display-name { font-family: var(--font-display); font-size: 22px; }
.profile-popover-surface .pop-pronouns { margin: 0; }
.profile-popover-surface .pop-handle { margin-top: 2px; color: var(--ink-faint); font-size: 11.5px; }
.profile-popover-surface .pop-presence { margin-top: 7px; }
.profile-popover-surface .pop-status {
  display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.55);
  color: var(--ink-soft); font-size: 12px; font-style: normal; font-weight: 600;
}
.profile-popover-surface .pop-status > span { color: var(--profile-a); }
.profile-popover-surface.theme-eclipse { background: #171923; }
.profile-popover-surface.theme-eclipse .pop-av-wrap .avatar { box-shadow: 0 0 0 5px #171923,0 8px 20px rgba(0,0,0,.32); }
.profile-popover-surface.theme-eclipse .pop-name, .profile-popover-surface.theme-eclipse .pop-menu-item { color: #f8fafc; }
.profile-popover-surface.theme-eclipse .pop-sub, .profile-popover-surface.theme-eclipse .pop-handle, .profile-popover-surface.theme-eclipse .pop-presence, .profile-popover-surface.theme-eclipse .pop-bio, .profile-popover-surface.theme-eclipse .pop-meta { color: #aeb5c2; }
.profile-popover-surface.theme-eclipse .pop-status { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: #d1d5db; }
.profile-popover-surface.theme-eclipse .pop-menu { border-color: rgba(255,255,255,.1); }
.profile-popover-surface.theme-eclipse .pop-menu-item:hover { background: rgba(255,255,255,.08); }
#members.dm-profile { position: relative; isolation: isolate; }
#members.dm-profile .dmp-banner { background-size: cover !important; background-position: center !important; }
#members.dm-profile .dmp-name .profile-display-name { font-family: var(--font-display); font-size: 21px; }
#members.dm-profile .dmp-pronouns { margin-top: 4px; }
#members.dm-profile.theme-eclipse { background: #171923; }
#members.dm-profile.theme-eclipse .dmp-name, #members.dm-profile.theme-eclipse .dmp-since { color: #f8fafc; }
#members.dm-profile.theme-eclipse .dmp-sub, #members.dm-profile.theme-eclipse .dmp-status, #members.dm-profile.theme-eclipse .dmp-bio, #members.dm-profile.theme-eclipse .dmp-meta { color: #aeb5c2; }
#members.dm-profile.theme-eclipse .dmp-divider { background: rgba(255,255,255,.1); }

@media (max-width: 760px) {
  .profile-editor-modal { width: calc(100vw - 12px) !important; max-height: calc(100vh - 12px) !important; border-radius: 17px !important; }
  .profile-editor-head { padding: 18px; }
  .profile-editor-badge { display: none; }
  .profile-editor-layout { display: flex; flex-direction: column; height: calc(100vh - 148px); overflow-y: auto; }
  .profile-editor-preview { order: -1; overflow: visible; padding: 18px 14px; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .profile-editor-controls { overflow: visible; padding: 16px 12px 22px; }
  .profile-live-card { max-width: 350px; }
  .profile-editor-footer { min-height: 62px; padding: 10px 12px; }
  .profile-editor-footer .m-dirty { display: none; }
  .profile-editor-footer .btn { padding-inline: 12px; }
  .pf-section { padding: 14px; }
}

@media (max-width: 430px) {
  .profile-editor-head h2 { font-size: 20px !important; }
  .pf-theme-grid, .pf-upload-grid { grid-template-columns: 1fr; }
  .pf-style-grid { grid-template-columns: 1fr 1fr; }
  .plc-banner { height: 108px; }
  .plc-avatar { top: 68px; }
  .plc-avatar .avatar { width: 74px; height: 74px; }
  .plc-content { padding-top: 46px; }
}

/* ── Perfil público completo ── */
.profile-open-target { cursor: pointer; }
.profile-open-target::after {
  content: 'View profile'; position: absolute; left: 50%; top: 16px; z-index: 6;
  transform: translate(-50%,-4px); opacity: 0; pointer-events: none;
  padding: 5px 9px; border-radius: 99px; background: rgba(20,16,12,.66); color: #fff;
  backdrop-filter: blur(7px); font-size: 10px; font-weight: 800; letter-spacing: .03em;
  transition: opacity .18s, transform .2s var(--ease-out);
}
.profile-open-target:hover::after { opacity: 1; transform: translate(-50%,0); }
.profile-open-target .avatar { transition: transform .22s var(--ease-spring), box-shadow .22s ease; }
.profile-open-target:hover .avatar { transform: scale(1.045); }

.profile-popover-surface.theme-nebula { background: linear-gradient(155deg,#fffafd,#f8f2ff); }
.profile-popover-surface.theme-aurora { background: linear-gradient(155deg,#fbfffd,#effcf8); }
.profile-popover-surface.theme-minimal { background: #f8fafc; }
.profile-popover-surface .tag-chip, #members.dm-profile .tag-chip { background: color-mix(in srgb,var(--profile-a) 13%,white); color: color-mix(in srgb,var(--profile-a) 76%,black); }

.full-profile-modal {
  width: min(720px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  padding: 0 !important; overflow: hidden !important;
  background: #fff !important; border-color: var(--line) !important;
}
.full-profile-shell {
  position: relative; padding: 54px 24px 24px;
  background: #fff;
  overflow-y: auto; max-height: calc(100vh - 34px);
}
.full-profile-close {
  position: absolute; right: 17px; top: 16px; z-index: 10;
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--bg-side); color: var(--ink-soft); border: 1px solid var(--line); font-size: 23px; line-height: 1;
  transition: background .18s, transform .18s, color .18s;
}
.full-profile-close:hover { background: var(--bg-hover); color: var(--ink); transform: rotate(4deg) scale(1.04); }
.full-profile-card {
  position: relative; width: min(100%,620px); margin: 0 auto; overflow: hidden;
  border-radius: 24px; background: #fffdfa; color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 18px 46px rgba(38,30,22,.13);
}
.fpc-banner { height: 190px; background-size: cover !important; background-position: center !important; }
.fpc-avatar { position: absolute; left: 34px; top: 128px; z-index: 4; }
.fpc-avatar .avatar { width: 118px; height: 118px; font-size: 52px; box-shadow: 0 0 0 7px #fffdfa,0 15px 34px rgba(0,0,0,.24); }
.fpc-avatar .avatar .dot { width: 24px; height: 24px; right: 1px; bottom: 1px; border-width: 5px; border-color: #fffdfa; }
.fpc-body { padding: 70px 34px 30px; }
.fpc-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fpc-name { font-family: var(--font-display); font-size: 31px; }
.fpc-handle { color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
.fpc-pronouns { flex-shrink: 0; display: inline-flex; padding: 5px 9px; border-radius: 99px; background: rgba(38,34,30,.07); color: var(--ink-faint); font-size: 11px; font-weight: 750; }
.fpc-presence { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--ink-soft); font-size: 12.5px; }
.fpc-presence .dot { width: 9px; height: 9px; }
.fpc-status { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-side); color: var(--ink-soft); font-size: 13px; font-weight: 650; }
.fpc-status > span { color: var(--profile-a); }
.fpc-section { margin-top: 18px; }
.fpc-label { margin-bottom: 7px; color: var(--ink-faint); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.fpc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fpc-chips .tag-chip { background: color-mix(in srgb,var(--profile-a) 13%,white); color: color-mix(in srgb,var(--profile-a) 78%,black); }
.fpc-owner { background: color-mix(in srgb,var(--profile-b) 15%,white); color: color-mix(in srgb,var(--profile-b) 67%,black); }
.fpc-owner .rc-dot { background: var(--profile-b); }
.fpc-info-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fpc-about p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.fpc-about p span { color: var(--ink-faint); font-style: italic; }
.fpc-facts { display: flex; flex-direction: column; gap: 12px; }
.fpc-facts div { display: flex; flex-direction: column; gap: 2px; }
.fpc-facts span { color: var(--ink-faint); font-size: 9.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.fpc-facts strong { color: var(--ink); font-size: 12.5px; }
.fpc-actions { display: flex; gap: 9px; margin-top: 23px; }
.fpc-actions .btn { min-width: 148px; }

.full-profile-shell.theme-nebula .full-profile-card { background: linear-gradient(155deg,#fffafd,#f8f2ff); }
.full-profile-shell.theme-aurora .full-profile-card { background: linear-gradient(155deg,#fbfffd,#effcf8); }
.full-profile-shell.theme-minimal .full-profile-card { background: #f8fafc; }
.full-profile-shell.theme-eclipse .full-profile-card { background: linear-gradient(150deg,#171923,#222534); color: #f8fafc; }
.full-profile-shell.theme-eclipse .fpc-avatar .avatar { box-shadow: 0 0 0 7px #171923,0 15px 34px rgba(0,0,0,.38); }
.full-profile-shell.theme-eclipse .fpc-avatar .dot { border-color: #171923; }
.full-profile-shell.theme-eclipse .fpc-handle, .full-profile-shell.theme-eclipse .fpc-presence, .full-profile-shell.theme-eclipse .fpc-label, .full-profile-shell.theme-eclipse .fpc-about p, .full-profile-shell.theme-eclipse .fpc-facts span { color: #aeb5c2; }
.full-profile-shell.theme-eclipse .fpc-facts strong { color: #f8fafc; }
.full-profile-shell.theme-eclipse .fpc-status { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: #d1d5db; }
.full-profile-shell.theme-eclipse .fpc-info-grid { border-color: rgba(255,255,255,.1); }

@media (max-width: 620px) {
  .full-profile-modal { width: calc(100vw - 12px) !important; max-height: calc(100vh - 12px) !important; border-radius: 18px !important; }
  .full-profile-shell { padding: 52px 12px 16px; max-height: calc(100vh - 12px); }
  .full-profile-card { border-radius: 19px; }
  .fpc-banner { height: 142px; }
  .fpc-avatar { left: 22px; top: 95px; }
  .fpc-avatar .avatar { width: 92px; height: 92px; font-size: 42px; box-shadow: 0 0 0 5px #fffdfa,0 12px 26px rgba(0,0,0,.22); }
  .full-profile-shell.theme-eclipse .fpc-avatar .avatar { box-shadow: 0 0 0 5px #171923,0 12px 26px rgba(0,0,0,.36); }
  .fpc-body { padding: 58px 20px 22px; }
  .fpc-name { font-size: 25px; }
  .fpc-title-row { align-items: center; }
  .fpc-info-grid { grid-template-columns: 1fr; gap: 18px; }
  .fpc-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .fpc-actions { flex-direction: column; }
  .fpc-actions .btn { width: 100%; }
}

/* ═══════════════ Expansión social: mensajes, eventos y actividades ═══════════════ */
.composer-reply { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; background:color-mix(in srgb,var(--accent) 10%,#fff); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-bottom:0; border-radius:12px 12px 0 0; color:var(--ink-soft); font-size:12px; }
.composer-reply.hidden { display:none; }
.composer-reply strong { color:var(--accent-strong); }
.composer-reply button { font-size:19px; color:var(--ink-faint); }
#composer:has(.composer-reply:not(.hidden)) .composer-box { border-radius:0 0 13px 13px; }
#poll-btn { flex:0 0 auto; width:32px; height:32px; border-radius:9px; color:var(--ink-faint); font-size:18px; }
#poll-btn:hover { background:var(--bg-hover); color:var(--accent-strong); }
.msg-reply-ref { display:flex; align-items:center; gap:6px; max-width:100%; margin-bottom:5px; color:var(--ink-faint); font-size:11.5px; text-align:left; }
.msg-reply-ref:hover { color:var(--ink-soft); }
.msg-reply-ref strong { color:var(--ink-soft); flex-shrink:0; }
.msg-reply-ref em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:normal; }
.msg-reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.msg-reactions button { display:inline-flex; align-items:center; gap:5px; min-width:38px; padding:3px 7px; border:1px solid var(--line); border-radius:8px; background:var(--bg-side); color:var(--ink-soft); }
.msg-reactions button:hover,.msg-reactions button.mine { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); background:var(--accent-tint); }
.msg-reactions b { font-size:11px; }
.reaction-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.reaction-picker button { width:38px; height:38px; border-radius:9px; font-size:20px; }
.reaction-picker button:hover { background:var(--bg-hover); transform:scale(1.12); }
.thread-count { display:flex; align-items:center; gap:5px; margin-top:7px; color:var(--accent-strong); font-size:11.5px; font-weight:750; }
.thread-count:hover { text-decoration:underline; }
.msg-flash { animation:message-flash 1.8s ease; }
@keyframes message-flash { 0%,35% { background:rgba(251,191,36,.28); box-shadow:inset 3px 0 #e0a11b; } }

.poll-card { width:min(520px,100%); margin-top:8px; padding:15px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(155deg,#fff,#fbf8f3); box-shadow:var(--shadow-sm); }
.poll-question { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.poll-question > span { color:var(--accent-strong); font-size:9px; font-weight:900; letter-spacing:.1em; }
.poll-question strong { font-size:15px; color:var(--ink); }
.poll-options { display:flex; flex-direction:column; gap:7px; }
.poll-option { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding:8px 11px; border:1px solid var(--line); border-radius:10px; color:var(--ink-soft); text-align:left; }
.poll-option > i { position:absolute; inset:0 auto 0 0; z-index:-1; background:color-mix(in srgb,var(--profile-a,var(--accent)) 14%,transparent); transition:width .35s var(--ease-out); }
.poll-option:hover,.poll-option.voted { border-color:var(--accent); }
.poll-option.voted::after { content:'✓'; color:var(--accent-strong); font-weight:900; }
.poll-option b { margin-left:auto; font-size:10.5px; color:var(--ink-faint); white-space:nowrap; }
.poll-foot { display:flex; justify-content:space-between; gap:10px; margin-top:10px; color:var(--ink-faint); font-size:10px; }
#poll-option-list { display:flex; flex-direction:column; gap:7px; margin-bottom:8px; }
.poll-settings { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding:11px; border-radius:11px; background:var(--bg-side); color:var(--ink-soft); font-size:12px; }
.poll-settings label { display:flex; align-items:center; gap:7px; }

.message-thread-modal { width:min(680px,calc(100vw - 30px)) !important; padding:0 !important; overflow:hidden !important; }
.thread-modal { display:flex; flex-direction:column; max-height:calc(100vh - 70px); }
.thread-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px 14px; border-bottom:1px solid var(--line); }
.thread-modal-head p { max-width:520px; color:var(--ink-faint); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-parent { display:flex; gap:10px; margin:14px 18px 6px; padding:12px; border-radius:12px; background:var(--accent-tint); }
.thread-parent p,.thread-reply p { margin-top:3px; color:var(--ink-soft); font-size:13px; line-height:1.45; }
.thread-replies { flex:1; min-height:140px; overflow-y:auto; padding:8px 18px 14px; }
.thread-reply { display:flex; gap:9px; padding:10px 2px; border-bottom:1px solid var(--line-soft); }
.thread-reply time { color:var(--ink-faint); font-size:10px; font-weight:500; }
.thread-composer { display:flex; align-items:flex-end; gap:8px; padding:13px 18px 18px; border-top:1px solid var(--line); }
.thread-composer textarea { flex:1; resize:none; }

.message-search-modal { width:min(820px,calc(100vw - 30px)) !important; padding:0 !important; overflow:hidden !important; }
.search-modal-view { min-height:480px; max-height:calc(100vh - 60px); display:flex; flex-direction:column; }
.search-modal-head,.events-head { display:flex; align-items:flex-start; justify-content:space-between; padding:20px 22px 10px; }
.search-query-row { display:grid; grid-template-columns:1fr 180px auto; gap:8px; padding:8px 22px 15px; border-bottom:1px solid var(--line); }
.search-results { flex:1; overflow-y:auto; padding:10px 14px 18px; }
.search-empty { padding:48px 20px; text-align:center; color:var(--ink-faint); }
.search-result { width:100%; display:flex; gap:10px; padding:11px; border-radius:12px; text-align:left; }
.search-result:hover { background:var(--bg-hover); }
.search-result > div { min-width:0; flex:1; }
.sr-top { display:flex; justify-content:space-between; gap:10px; }
.sr-top span { color:var(--ink-faint); font-size:10.5px; }
.search-result p { margin-top:4px; color:var(--ink-soft); font-size:12.5px; line-height:1.4; }
.mh-badge { min-width:15px; height:15px; padding:0 3px; border-radius:99px; background:var(--accent); color:#fff; font-size:9px; line-height:15px; }

.sound-toggle { display:flex; justify-content:space-between; align-items:center; padding:13px; border:1px solid var(--line); border-radius:12px; }
.sound-toggle span,.notif-choice span { display:flex; flex-direction:column; gap:2px; }
.sound-toggle small,.notif-choice small { color:var(--ink-faint); font-size:10.5px; }
.sound-toggle input { width:20px; height:20px; accent-color:var(--accent); }
.notif-block { margin-top:16px; }
.notif-block h3 { margin-bottom:7px; color:var(--ink-soft); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.notif-choice { display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer; }
.notif-choice:hover { background:var(--bg-hover); }
.notif-choice input { accent-color:var(--accent); }

.events-modal { width:min(920px,calc(100vw - 30px)) !important; padding:0 !important; }
.events-view { max-height:calc(100vh - 60px); overflow-y:auto; }
.event-list { display:grid; gap:9px; padding:6px 22px 18px; }
.event-card { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:start; gap:14px; padding:14px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }
.event-card.has-cover { grid-template-columns:150px 54px minmax(0,1fr); }
.event-card.past { opacity:.58; }
.event-card-cover { width:150px; height:100%; min-height:126px; overflow:hidden; border-radius:11px; background:var(--bg-side); }
.event-card-cover img { width:100%; height:100%; display:block; object-fit:cover; }
.event-date { flex:0 0 54px; height:58px; display:grid; place-content:center; text-align:center; border-radius:12px; background:var(--accent-tint); color:var(--accent-strong); }
.event-date strong { font-size:22px; line-height:1; }
.event-date span { margin-top:3px; font-size:10px; font-weight:800; text-transform:uppercase; }
.event-info { flex:1; min-width:0; }
.event-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.event-info h3 { margin:0; font-size:16px; }
.event-live { padding:3px 7px; border-radius:99px; background:rgba(47,158,99,.12); color:var(--green); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.event-info > p { margin-top:3px; color:var(--ink-faint); font-size:11px; }
.event-info > small { display:block; margin-top:7px; color:var(--ink-soft); line-height:1.4; }
.event-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.event-tags span { padding:4px 7px; border-radius:99px; background:var(--bg-side); color:var(--ink-soft); font-size:9.5px; font-weight:700; }
.event-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:10px; }
.event-actions .btn { min-height:30px; padding:6px 9px; font-size:11px; }
.event-actions .icon-btn { width:30px; height:30px; margin-left:auto; }
.event-create { padding:18px 22px 22px; border-top:1px solid var(--line); background:var(--bg-side); }
.event-create-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.event-create-head h3,.event-create-head p { margin:0; }
.event-create-head p { margin-top:3px; color:var(--ink-faint); font-size:11px; }
.event-cover-editor { display:grid; grid-template-columns:190px minmax(0,1fr); align-items:center; gap:14px; margin:13px 0; padding:12px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.72); }
.event-cover-editor > div:last-child { min-width:0; }
.event-cover-editor strong,.event-cover-editor p { display:block; margin:0; }
.event-cover-editor p { margin-top:3px; color:var(--ink-faint); font-size:10.5px; }
.event-cover-preview { width:190px; aspect-ratio:5/2; display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; border:1px dashed var(--line); border-radius:11px; background:var(--bg-sink); color:var(--ink-faint); text-align:left; }
.event-cover-preview > span { color:var(--accent); font-size:24px; }
.event-cover-preview small { font-size:9.5px; line-height:1.35; }
.event-cover-preview.has-image { border-style:solid; }
.event-cover-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.event-cover-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.event-cover-actions .btn { padding:6px 9px; font-size:10.5px; }
.event-cover-status { display:block; min-height:14px; margin-top:5px; color:var(--green); font-size:9.5px; }
.event-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:10px 0; }
.event-form-grid label { display:flex; flex-direction:column; gap:5px; color:var(--ink-soft); font-size:11px; font-weight:700; }
.event-form-grid .event-field-wide { grid-column:1 / -1; }
.event-create textarea { width:100%; resize:vertical; }
.event-submit-row { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:8px; }

.temp-host-badge { padding:2px 4px; border-radius:5px; background:var(--accent-tint); color:var(--accent-strong); font-size:7px; font-weight:900; letter-spacing:.04em; }
.temp-room-benefits { display:flex; flex-wrap:wrap; gap:6px; margin:5px 0 14px; }
.temp-room-benefits span { padding:6px 8px; border-radius:99px; background:var(--accent-tint); color:var(--accent-strong); font-size:10.5px; font-weight:700; }
.ch-type-grid { grid-template-columns:repeat(3,1fr) !important; }

.plc-activity,.pop-activity,.dmp-activity,.fpc-activity { display:flex; align-items:center; gap:7px; margin-top:8px; color:var(--ink-soft); font-size:11.5px; }
.plc-activity span,.pop-activity span,.dmp-activity span,.fpc-activity > span { color:var(--profile-a); }
.fpc-activity { padding:9px 11px; border-radius:10px; background:var(--bg-side); }
.fpc-activity strong { margin-right:2px; color:var(--ink); }
.pf-connections { display:flex; flex-direction:column; gap:8px; }
.pf-connection-row { display:grid; grid-template-columns:120px 1fr; gap:7px; }
.fpc-connections { display:flex; flex-wrap:wrap; gap:6px; }
.fpc-connection { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; color:var(--ink-soft); font-size:11px; font-weight:750; }
.fpc-connection:hover { border-color:var(--profile-a); color:var(--profile-a); }
.pf-upload-grid.compact { margin-top:10px; }
.server-profile-modal { width:min(650px,calc(100vw - 30px)) !important; }
.server-profile-preview { position:relative; overflow:hidden; min-height:250px; margin:10px 0 16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.sp-banner { height:110px; background-size:cover !important; background-position:center !important; }
.sp-avatar { position:absolute; left:22px; top:68px; }
.sp-avatar .avatar { width:78px; height:78px; font-size:34px; box-shadow:0 0 0 5px #fff; }
.sp-copy { padding:42px 22px 18px; }
.sp-copy .profile-display-name { display:block; font-size:22px; }
.sp-copy small { color:var(--ink-faint); }
.sp-copy p { margin-top:10px; color:var(--ink-soft); font-size:12.5px; }

#modal:has(.call-grid),#modal:has(.call-activity) { width:min(980px,calc(100vw - 30px)); }
.call-activity { margin:12px 0 16px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }
.activity-nav { display:flex; align-items:center; gap:3px; padding:7px; border-bottom:1px solid var(--line); background:var(--bg-side); }
.activity-nav button { padding:7px 9px; border-radius:8px; color:var(--ink-faint); font-size:11px; font-weight:750; }
.activity-nav button:hover,.activity-nav button.active { background:#fff; color:var(--accent-strong); box-shadow:var(--shadow-sm); }
.activity-nav #activity-hide { margin-left:auto; font-size:17px; }
.activity-home { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
.activity-home > div { display:flex; flex-direction:column; align-items:flex-start; min-height:130px; padding:14px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,#fff,var(--bg-side)); }
.activity-home > div > span { font-size:24px; color:var(--accent); }
.activity-home small { margin:4px 0 12px; color:var(--ink-faint); font-size:10.5px; }
.activity-home button { margin-top:auto; color:var(--accent-strong); font-weight:800; font-size:11px; }
.activity-video-toolbar,.board-toolbar { display:flex; align-items:center; gap:8px; padding:12px; }
.activity-video-toolbar input { flex:1; }
.activity-video,.activity-youtube { display:block; width:100%; aspect-ratio:16/9; max-height:480px; border:0; background:#111; }
.activity-video-empty { min-height:300px; display:grid; place-content:center; text-align:center; background:#171923; color:#fff; }
.activity-video-empty span { font-size:50px; color:var(--accent); }
.activity-hint { padding:8px 12px 12px; color:var(--ink-faint); font-size:10px; }
.board-toolbar { border-bottom:1px solid var(--line); }
.board-toolbar label { display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:11px; }
.board-wrap { height:min(48vh,430px); min-height:280px; background:#fff; background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:18px 18px; }
#activity-board { width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.game-layout { display:grid; grid-template-columns:minmax(260px,390px) 1fr; gap:22px; padding:18px; align-items:center; }
.ttt-board { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; aspect-ratio:1; margin-bottom:10px; }
.ttt-board button { border:1px solid var(--line); border-radius:13px; background:var(--bg-side); color:var(--ink); font-family:var(--font-display); font-size:clamp(30px,5vw,58px); }
.ttt-board button:hover:empty { background:var(--accent-tint); }
.ttt-board .cell-x { color:var(--accent); }.ttt-board .cell-o { color:#7c5ce7; }
.game-score h3 { margin-bottom:14px; }
.game-score > div { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--line); }
.game-score b { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--accent-tint); }
.game-score p { margin-top:12px; color:var(--ink-faint); font-size:11px; line-height:1.4; }
.call-tile-mod button.danger { color:var(--red); }

@media (max-width:680px) {
  .search-query-row { grid-template-columns:1fr; }
  .event-form-grid,.activity-home,.game-layout { grid-template-columns:1fr; }
  .event-card,.event-card.has-cover { grid-template-columns:46px minmax(0,1fr); padding:10px; }
  .event-card-cover { width:100%; height:130px; min-height:0; grid-column:1 / -1; }
  .event-date { flex-basis:46px; }
  .event-actions .icon-btn { margin-left:0; }
  .event-form-grid .event-field-wide { grid-column:auto; }
  .event-cover-editor { grid-template-columns:1fr; }
  .event-cover-preview { width:100%; }
  .event-create-head { align-items:stretch; flex-direction:column; }
  .activity-nav { overflow-x:auto; }.activity-nav button { white-space:nowrap; }
  .activity-video-toolbar,.board-toolbar { flex-wrap:wrap; }.activity-video-toolbar input { flex-basis:100%; }
  .board-wrap { min-height:240px; height:42vh; }
  .pf-connection-row { grid-template-columns:1fr; }
  .poll-foot { flex-direction:column; }
  .ch-type-grid { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── Mensajes multimedia y compositor enriquecido ── */
.msg-author-badge {
  display:inline-flex;
  align-items:center;
  align-self:center;
  padding:2px 5px;
  border-radius:5px;
  background:color-mix(in srgb,#7c5ce7 14%,#fff);
  color:#6449b6;
  font-size:8px;
  font-weight:900;
  letter-spacing:.055em;
  line-height:1.2;
}
.msg-author-badge.webhook { background:color-mix(in srgb,var(--accent) 14%,#fff); color:var(--accent-strong); }
.custom-emoji-inline { width:24px; height:24px; display:inline-block; object-fit:contain; vertical-align:-6px; }
.msg-attachments,.msg-embeds { width:min(520px,100%); display:flex; flex-direction:column; gap:7px; margin-top:7px; }
.msg-media-image {
  display:block;
  width:min(420px,100%);
  margin-top:7px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg-sink);
  cursor:zoom-in;
}
.msg-media-image img {
  display:block;
  width:100%;
  max-height:390px;
  object-fit:contain;
  transition:transform .22s var(--ease-out),filter .22s ease;
}
.msg-media-image:hover img { transform:scale(1.012); filter:saturate(1.04); }
.msg-media-player {
  width:min(520px,100%);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--bg-side) 84%,#fff);
}
.msg-media-player.video video { display:block; width:100%; max-height:390px; background:#171513; }
.msg-media-player.video small { display:block; overflow:hidden; padding:7px 10px; color:var(--ink-faint); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.msg-media-player.audio { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; padding:10px 12px; }
.msg-media-player.audio > div { display:flex; align-items:center; gap:8px; min-width:0; }
.msg-media-player.audio strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.msg-media-player.audio audio { width:100%; height:34px; }
.msg-media-player.audio small { color:var(--ink-faint); font-size:9.5px; }
.msg-file-card {
  width:min(520px,100%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--bg-side) 82%,#fff);
  color:var(--ink);
  text-decoration:none;
}
.msg-file-card > span { font-size:24px; }
.msg-file-card > div { min-width:0; display:flex; flex:1; flex-direction:column; }
.msg-file-card strong,.msg-file-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-file-card strong { font-size:12px; }
.msg-file-card small { color:var(--ink-faint); font-size:9.5px; }
.msg-file-card b { flex:0 0 auto; color:var(--accent-strong); font-size:9.5px; }
.msg-file-card:hover { border-color:var(--accent); background:var(--accent-tint); }
.msg-sticker { width:160px; display:flex; flex-direction:column; align-items:center; margin-top:7px; }
.msg-sticker img { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 7px 11px rgba(38,28,20,.12)); }
.msg-sticker small { max-width:100%; overflow:hidden; color:var(--ink-faint); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.msg-embed {
  width:min(520px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;
  background:color-mix(in srgb,var(--bg-side) 82%,#fff);
  color:var(--ink);
  text-decoration:none;
}
.msg-embed-copy { min-width:0; display:flex; flex-direction:column; gap:3px; padding:11px 12px; }
.msg-embed-copy small { color:var(--accent-strong); font-size:9.5px; font-weight:800; text-transform:uppercase; }
.msg-embed-copy strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.msg-embed-copy p { color:var(--ink-soft); font-size:10.5px; line-height:1.4; }
.msg-embed-copy span { overflow:hidden; color:var(--ink-faint); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.msg-embed > img { width:132px; height:100%; max-height:128px; object-fit:cover; }
.msg-embed:hover { border-color:color-mix(in srgb,var(--accent) 52%,var(--line)); background:var(--accent-tint); }
.msg-actions [data-report-message]:hover { color:var(--red); }

.composer-media-preview {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:54px;
  overflow-x:auto;
  padding:8px 10px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:13px 13px 0 0;
  background:color-mix(in srgb,var(--bg-side) 86%,#fff);
}
.composer-media-preview.hidden { display:none; }
#composer:has(.composer-media-preview:not(.hidden)) .composer-box { border-radius:0 0 13px 13px; }
#composer:has(.composer-reply:not(.hidden)) .composer-media-preview:not(.hidden) { border-radius:0; }
.composer-draft-item {
  min-width:150px;
  max-width:220px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 22px;
  align-items:center;
  gap:7px;
  padding:5px 6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.composer-draft-item > img,.composer-draft-item > span { width:36px; height:36px; display:grid; place-items:center; object-fit:cover; border-radius:8px; background:var(--bg-sink); }
.composer-draft-item > div { min-width:0; display:flex; flex-direction:column; }
.composer-draft-item strong,.composer-draft-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composer-draft-item strong { font-size:10.5px; }
.composer-draft-item small { color:var(--ink-faint); font-size:8.5px; }
.composer-draft-item > button,.composer-draft-emoji > button { width:22px; height:22px; border-radius:7px; color:var(--ink-faint); font-size:16px; }
.composer-draft-item > button:hover,.composer-draft-emoji > button:hover { background:rgba(207,74,63,.1); color:var(--red); }
.composer-draft-emoji { flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:5px 6px 5px 8px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.composer-draft-emoji img { width:24px; height:24px; object-fit:contain; }
.composer-draft-emoji span { max-width:100px; overflow:hidden; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.composer-tool {
  flex:0 0 auto;
  min-width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:8px;
  color:var(--ink-faint);
  font-size:17px;
  font-weight:700;
}
.composer-box textarea { min-width:0; }
.composer-tool.sticker-tool { font-size:8px; letter-spacing:-.02em; }
.composer-tool:hover:not(:disabled) { background:var(--bg-hover); color:var(--accent-strong); }
.composer-tool:disabled { opacity:.3; cursor:not-allowed; }
#send-btn:disabled { cursor:wait; opacity:.3; }
.scheduled-draft-summary { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.scheduled-draft-summary p { flex-basis:100%; max-height:72px; overflow:auto; padding:9px 11px; border-radius:9px; background:var(--bg-sink); color:var(--ink-soft); font-size:11px; white-space:pre-wrap; }
.scheduled-draft-summary span { padding:4px 8px; border-radius:999px; background:var(--accent-tint); color:var(--accent-strong); font-size:9.5px; font-weight:700; }

@media (max-width:680px) {
  .composer-box { gap:5px; padding-inline:8px; }
  .composer-tool { min-width:28px; width:28px; padding:0; }
  .msg-embed { grid-template-columns:1fr; }
  .msg-embed > img { width:100%; height:140px; grid-row:1; }
  .msg-media-player.audio audio { min-width:0; }
  .msg-file-card b { display:none; }
}

/* ── Instalación de la app de escritorio ── */
.pwa-install-banner {
  position:fixed;
  z-index:12000;
  left:50%;
  bottom:20px;
  width:min(620px,calc(100vw - 32px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(38,34,30,.12);
  border-radius:18px;
  background:rgba(255,252,248,.96);
  color:var(--ink);
  box-shadow:0 18px 55px rgba(52,37,28,.2);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transform:translateX(-50%);
  animation:pwa-install-enter .32s cubic-bezier(.2,.8,.2,1) both;
}
.pwa-install-banner > img {
  flex:0 0 42px;
  border-radius:12px;
  box-shadow:0 5px 14px rgba(82,48,31,.16);
}
.pwa-install-copy {
  min-width:0;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:2px;
}
.pwa-install-copy strong {
  font-family:var(--font-display);
  font-size:14px;
}
.pwa-install-copy span {
  color:var(--ink-soft);
  font-size:11px;
}
.pwa-install-action {
  flex:0 0 auto;
  padding:9px 14px;
  border-radius:11px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:800;
  box-shadow:0 5px 14px rgba(219,107,71,.24);
}
.pwa-install-action:hover { background:var(--accent-strong); }
.pwa-install-action:disabled { opacity:.55; cursor:wait; }
.pwa-install-close {
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:9px;
  color:var(--ink-faint);
  font-size:20px;
  line-height:1;
}
.pwa-install-close:hover { background:var(--bg-hover); color:var(--ink); }
.pwa-standalone .pwa-install-banner { display:none !important; }

@keyframes pwa-install-enter {
  from { opacity:0; transform:translate(-50%,18px) scale(.98); }
  to { opacity:1; transform:translate(-50%,0) scale(1); }
}

@media (max-width:680px) {
  .pwa-install-banner { display:none !important; }
}

@media (prefers-reduced-motion:reduce) {
  .pwa-install-banner { animation:none; }
}

/* ═══════════════════════════════════════════════════════════
   Shared color themes
   ═══════════════════════════════════════════════════════════ */
.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  background: var(--surface-solid);
  box-shadow: var(--shadow-xs);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s var(--ease-out);
}
.theme-toggle:hover { color: var(--accent-strong); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle svg circle { fill: currentColor; stroke: none; }

.settings-appearance-card { grid-column: 1 / -1; }
.theme-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-choice-grid > button {
  min-width: 0;
  padding: 11px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-solid);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--ease-out);
}
.theme-choice-grid > button:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-choice-grid > button.active { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-glow); }
.theme-choice-grid strong, .theme-choice-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-choice-grid strong { font-size: 12px; }
.theme-choice-grid small { margin-top: 2px; color: var(--ink-faint); font-size: 9.5px; }
.theme-choice-check { opacity: 0; color: var(--accent-strong); font-size: 14px; font-weight: 900; }
.theme-choice-grid > button.active .theme-choice-check { opacity: 1; }
.theme-preview {
  width: 46px;
  height: 36px;
  padding: 5px;
  display: grid;
  grid-template-columns: 11px 1fr;
  grid-template-rows: 1fr 7px;
  gap: 3px;
  overflow: hidden;
  border: 1px solid rgba(38,34,30,.14);
  border-radius: 9px;
  background: #fff;
}
.theme-preview i { grid-row: 1 / 3; border-radius: 3px; background: #ebe5dc; }
.theme-preview b, .theme-preview em { border-radius: 3px; background: #f2ede6; }
.theme-preview em { background: #e87953; }
.theme-preview-dark { border-color: rgba(255,255,255,.14); background: #16191e; }
.theme-preview-dark i { background: #23272e; }
.theme-preview-dark b { background: #2d323a; }
.theme-preview-system { background: linear-gradient(90deg, #fff 0 50%, #16191e 50%); }

html[data-theme="dark"] {
  --bg: #121418;
  --bg-side: #181b20;
  --bg-side-2: #1e2228;
  --bg-sink: #24282f;
  --bg-hover: rgba(255, 248, 241, .07);
  --bg-active: rgba(237, 120, 85, .15);
  --bg-canvas: #0f1115;
  --surface: rgba(27, 30, 36, .9);
  --surface-solid: #1b1e24;
  --ink: #f5f0ea;
  --ink-soft: #c9c1b8;
  --ink-faint: #928a82;
  --line: rgba(255, 247, 239, .13);
  --line-soft: rgba(255, 247, 239, .075);
  --accent: #e97752;
  --accent-strong: #ff9a78;
  --accent-tint: rgba(233, 119, 82, .16);
  --accent-glow: rgba(233, 119, 82, .16);
  --green: #47b879;
  --red: #f06a5f;
  --amber: #e5a94c;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.24);
  --shadow-sm: 0 5px 16px rgba(0,0,0,.28);
  --shadow: 0 20px 58px rgba(0,0,0,.48), 0 0 0 1px var(--line-soft);
  --shadow-float: 0 22px 54px rgba(0,0,0,.46);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(850px 520px at 75% -12%, rgba(233,119,82,.08), transparent 66%),
    var(--bg-canvas);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); background-clip: padding-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: padding-box; }
html[data-theme="dark"] #auth,
html[data-theme="dark"] #loading {
  background:
    radial-gradient(900px 580px at 88% -4%, rgba(233,119,82,.19), transparent 62%),
    radial-gradient(720px 500px at 4% 105%, rgba(75,167,125,.1), transparent 62%),
    linear-gradient(145deg, #111318, #17191e 52%, #101216);
}
html[data-theme="dark"] .orbit { border-color: rgba(233,119,82,.21); }
html[data-theme="dark"] .auth-card {
  background: rgba(27,30,36,.91);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 32px 90px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="dark"] :is(.auth-tabs button.active, .seg button.active, .settings-tabs button.active) {
  background: var(--surface-solid);
}
html[data-theme="dark"] .google-setup-button {
  color: var(--ink);
  background: #22262d;
  border-color: var(--line);
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
html[data-theme="dark"] .google-setup-button:hover,
html[data-theme="dark"] .google-setup-button:focus-visible {
  background: #292e36;
  border-color: rgba(255,255,255,.2);
  box-shadow:
    -3px 0 12px rgba(66,133,244,.24),
    0 -3px 12px rgba(234,67,53,.2),
    3px 0 12px rgba(251,188,5,.2),
    0 3px 12px rgba(52,168,83,.2);
}
html[data-theme="dark"] :is(.field input, .m-field input, .m-field textarea, .fr-add-box input, .group-dm-identity input, .composer-box, .rtc-settings-grid select) {
  color: var(--ink);
  background: var(--bg-sink);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.composer-box:focus-within, .fr-add-box input:focus, .group-dm-identity input:focus) {
  background: #292e36;
}
html[data-theme="dark"] :is(.btn-ghost, .btn-danger, .msg-actions, .load-more, .fr-row .fr-actions .icon-btn, .rail-item.home .ri-home, .rail-item.add .ri-add, .forum-post, .event-card, .server-profile-preview, .call-activity, .board-wrap, .composer-draft-item, .composer-draft-emoji) {
  background-color: var(--surface-solid);
}
html[data-theme="dark"] .msg.mention { background: rgba(233,119,82,.1); }
html[data-theme="dark"] .msg.mention:hover { background: rgba(233,119,82,.14); }
html[data-theme="dark"] #members { background: linear-gradient(180deg, rgba(24,27,32,.95), var(--bg-side)); }
html[data-theme="dark"] #main .avatar .dot,
html[data-theme="dark"] #popover .avatar .dot { border-color: var(--bg); }
html[data-theme="dark"] .pwa-install-banner {
  background: rgba(27,30,36,.96);
  border-color: var(--line);
  box-shadow: 0 20px 62px rgba(0,0,0,.48);
}

html[data-theme="dark"] #modal.settings-modal { background: #15181d; }
html[data-theme="dark"] #modal.settings-modal .settings-tabs {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 45%),
    #1a1d22;
}
html[data-theme="dark"] #modal.settings-modal .settings-tabs button { color: var(--ink-faint); }
html[data-theme="dark"] #modal.settings-modal .settings-tabs button:hover {
  color: var(--ink);
  background: rgba(255,255,255,.055);
}
html[data-theme="dark"] #modal.settings-modal .settings-tabs button.active {
  color: var(--accent-strong);
  background: #24282f;
}
html[data-theme="dark"] .settings-content {
  background:
    radial-gradient(circle at 100% 0, rgba(233,119,82,.08), transparent 32%),
    #14171c;
}
html[data-theme="dark"] #modal.settings-modal .settings-card {
  background: rgba(29,33,39,.9);
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
html[data-theme="dark"] #modal.settings-modal .m-field input,
html[data-theme="dark"] .settings-language-options button { background: #22262d; }
html[data-theme="dark"] .settings-language-options button:hover { background: #292e36; }
html[data-theme="dark"] .settings-language-code { background: #30353d; }

html[data-theme="dark"] :is(
  .of-report,
  .of-audit-row,
  .of-slow-row,
  .of-rules,
  .of-discovery-skeleton,
  .of-world-card,
  .of-manage-row,
  .of-expression,
  .of-dev-app,
  .of-command-row,
  .of-media-grid button,
  .of-push-details,
  .of-install-card
) { background: var(--surface-solid); }
html[data-theme="dark"] .of-eligibility > span { background: var(--bg-sink); }
html[data-theme="dark"] .of-discovery-skeleton :is(i,b,span) {
  background: linear-gradient(100deg, #22262d 25%, #30353d 45%, #22262d 65%);
  background-size: 220% 100%;
}

/* Dark theme completion: every application surface must inherit the dark palette. */
html[data-theme="dark"] #rail {
  background:
    radial-gradient(150px 240px at 50% 0%, rgba(233,119,82,.13), transparent 75%),
    linear-gradient(180deg, #17191e, #121418);
  box-shadow: inset -1px 0 rgba(255,255,255,.055);
}
html[data-theme="dark"] #sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 34%),
    var(--bg-side);
  box-shadow: 8px 0 30px rgba(0,0,0,.18);
}
html[data-theme="dark"] :is(#sidebar-brand, #main-head) {
  background: rgba(24,27,32,.88);
  border-color: var(--line);
  box-shadow: 0 1px 0 var(--line-soft);
}
html[data-theme="dark"] #main {
  background:
    radial-gradient(700px 320px at 68% 0%, rgba(233,119,82,.045), transparent 68%),
    var(--bg-canvas);
}
html[data-theme="dark"] :is(#modal, #popover, .toast) {
  color: var(--ink);
  background: rgba(27,30,36,.97);
  border-color: var(--line);
  box-shadow: 0 30px 82px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-soft);
}
html[data-theme="dark"] #modal-backdrop {
  background: rgba(3,5,8,.69);
  backdrop-filter: blur(9px) saturate(.72);
}
html[data-theme="dark"] #voice-dock {
  background: linear-gradient(135deg, rgba(71,184,121,.14), rgba(27,30,36,.96));
  border-color: rgba(71,184,121,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05);
}
html[data-theme="dark"] :is(
  .msg-edit textarea,
  .rtc-settings-grid select,
  .rtc-noise-toggle,
  .soundboard-grid button,
  .group-dm-add-list button,
  .choice-cards button,
  .role-item,
  .permission-row,
  .override-row,
  .forum-post,
  .event-card,
  .event-cover-editor,
  .server-profile-preview,
  .call-activity,
  .activity-nav button:hover,
  .activity-nav button.active,
  .composer-draft-item,
  .composer-draft-emoji
) {
  color: var(--ink);
  background: var(--surface-solid);
  border-color: var(--line);
}
html[data-theme="dark"] .board-wrap {
  background-color: #15181d;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
}
html[data-theme="dark"] .composer-media-preview {
  background: color-mix(in srgb, var(--bg-side) 88%, #000);
}
html[data-theme="dark"] :is(.msg-actions, .load-more, .fr-row .fr-actions .icon-btn) {
  color: var(--ink-soft);
  background: #22262d;
  border-color: var(--line);
}
html[data-theme="dark"] :is(.modal-card, .invite-as, .dm-request-bar) {
  color: var(--ink);
  background: var(--surface-solid);
  border-color: var(--line);
}

/* Profile editor and profile chrome follow the app theme; user profile colors remain intact. */
html[data-theme="dark"] #modal.profile-editor-modal {
  background: #14171c !important;
}
html[data-theme="dark"] :is(.profile-editor-head, .profile-editor-footer) {
  background: rgba(24,27,32,.97);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="dark"] .profile-editor-controls { background: #14171c; }
html[data-theme="dark"] .pf-section {
  background: rgba(29,33,39,.92);
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
}
html[data-theme="dark"] .pf-upload-tile { border-color: var(--line); }
html[data-theme="dark"] .pf-upload-icon { background: #292e36; }
html[data-theme="dark"] :is(.profile-live-card, .profile-live-card .plc-content) {
  background: #1b1e24;
}
html[data-theme="dark"] .profile-live-card.theme-nebula .plc-content {
  background: linear-gradient(155deg, #211d2d, #191b25);
}
html[data-theme="dark"] .profile-live-card.theme-aurora .plc-content {
  background: linear-gradient(155deg, #17261f, #171e1d);
}
html[data-theme="dark"] .profile-live-card.theme-minimal .plc-content {
  background: #20242a;
}
html[data-theme="dark"] .profile-live-card .plc-avatar .avatar {
  box-shadow: 0 0 0 6px #1b1e24, 0 9px 22px rgba(0,0,0,.36);
}
html[data-theme="dark"] .profile-live-card .plc-avatar .avatar .dot { border-color: #1b1e24; }
html[data-theme="dark"] :is(.plc-status, .profile-popover-surface .pop-status) {
  background: rgba(255,255,255,.055);
}
html[data-theme="dark"] .profile-popover-surface:not(.theme-nebula):not(.theme-aurora):not(.theme-minimal) {
  background: #1b1e24;
}
html[data-theme="dark"] .profile-popover-surface.theme-nebula {
  background: linear-gradient(155deg, #211d2d, #191b25);
}
html[data-theme="dark"] .profile-popover-surface.theme-aurora {
  background: linear-gradient(155deg, #17261f, #171e1d);
}
html[data-theme="dark"] .profile-popover-surface.theme-minimal {
  background: #20242a;
}
html[data-theme="dark"] .profile-popover-surface:not(.theme-nebula):not(.theme-aurora):not(.theme-minimal) .pop-av-wrap .avatar {
  box-shadow: 0 0 0 5px #1b1e24, 0 8px 20px rgba(0,0,0,.34);
}
html[data-theme="dark"] #modal.full-profile-modal {
  background: #121418 !important;
}
html[data-theme="dark"] .full-profile-shell {
  background: #121418;
}
html[data-theme="dark"] .full-profile-shell:not(.theme-nebula):not(.theme-aurora):not(.theme-minimal) .full-profile-card {
  background: #1b1e24;
}
html[data-theme="dark"] .full-profile-shell.theme-nebula .full-profile-card {
  background: linear-gradient(155deg, #211d2d, #191b25);
}
html[data-theme="dark"] .full-profile-shell.theme-aurora .full-profile-card {
  background: linear-gradient(155deg, #17261f, #171e1d);
}
html[data-theme="dark"] .full-profile-shell.theme-minimal .full-profile-card {
  background: #20242a;
}
html[data-theme="dark"] .full-profile-shell:not(.theme-nebula):not(.theme-aurora):not(.theme-minimal) .fpc-avatar .avatar {
  box-shadow: 0 0 0 7px #1b1e24, 0 15px 34px rgba(0,0,0,.38);
}
html[data-theme="dark"] .full-profile-shell:not(.theme-nebula):not(.theme-aurora):not(.theme-minimal) .fpc-avatar .avatar .dot {
  border-color: #1b1e24;
}

@media (max-width: 760px) {
  .theme-choice-grid { grid-template-columns: 1fr; }
}