/* ── IBM PLEX SANS (fuente variable) ───── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Italic-Variable.woff2') format('woff2');
}

/* ── RESET & VARIABLES ─────────────────── */
/* color-scheme: dark le dice al navegador que la app YA está en tema
   oscuro a propósito. Sin esto, algunos navegadores móviles (sobre todo
   Chrome/WebView en Android con "Tema oscuro automático" activado)
   intentan "arreglar" la página por su cuenta invirtiendo colores de
   imágenes y emojis que detectan como claros, dando ese aspecto
   invertido/raro en los emojis de canales, categorías, chat y el
   selector de emojis. Declarándolo aquí, el navegador confía en que
   nuestros propios colores oscuros ya son intencionales y deja las
   imágenes (incluidos los emojis) tal cual son. */
:root { color-scheme: dark; }

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  /* Se añaden fuentes de emoji a color al final del stack: sin esto,
     algunos navegadores (sobre todo Android/Chrome) pintaban los emojis
     de nombres de canal/categoría con un glifo monocromo de la propia
     fuente 'Inter' en vez de cambiar a la fuente de emoji a color del
     sistema, dando el aspecto "ennegrecido" que se veía en canales. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  /* No text selection en toda la app */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Permitir selección solo en inputs y textareas */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
*:focus { outline: none; }
*:focus-visible { outline: none; }
:root {
  --bg-dark:      #191B20;
  --bg-sidebar:   #191B20;
  --bg-channel:   #1D2026;
  --bg-input:     #383a40;
  --bg-hover:     #35373c;
  --accent:       #413CDD;
  --accent-hover: #3530b8;
  --green:        #23a559;
  --text:         #dbdee1;
  --text-muted:   #949ba4;
  --text-header:  #f2f3f5;
  --border:       #26292F;
  --sidebar-w:    72px;
  --panel-w:      240px;
  --header-h:     58px;
  --bottom-nav-h: 56px;
  --transition:   0.15s ease;
}
html { height: 100%; height: -webkit-fill-available; overflow: hidden; overscroll-behavior: none; }
body { height: 100%; height: -webkit-fill-available; overflow: hidden; background: var(--bg-dark); color: var(--text); font-size: 15px; overscroll-behavior: none; }
::-webkit-scrollbar       { width: 0; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; }
.hidden { display: none !important; }
@keyframes slideUpSheet { from { transform: translateY(100%); opacity:0; } to { transform: translateY(0); opacity:1; } }
img.hdr-icon, img.form-icon { filter: invert(0.7); }

/* ── Custom floating scrollbar ──────── */
.custom-sb-wrap { position: relative; }
/* Antes el track vivía DENTRO del propio contenedor con scroll
   (.messages-area), así que el scroll nativo lo arrastraba con el
   contenido y JS tenía que "corregirlo" de vuelta a su sitio en cada
   evento de scroll — eso, en móvil, con el scroll nativo yendo más
   rápido que esos eventos, es lo que se veía como tembleque. Luego se
   probó position:sticky, pero al ser el ÚLTIMO hijo del listado (junto
   a los mensajes) tampoco quedaba fijo de verdad y encima dejaba un
   hueco. La forma correcta: el track vive FUERA del contenedor con
   scroll (hermano de .messages-area, dentro de .chat-area), así el
   scroll interno nunca lo mueve — ni de forma nativa ni por JS. Solo
   el thumb (la barrita en sí) actualiza su posición dentro del track,
   según el progreso del scroll. */
.custom-sb-track {
  position: absolute;
  width: 8px;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s;
  /* top/height/right los fija JS (ver initCustomScrollbar), alineados
     al tamaño real de .messages-area — el padre (.chat-area) incluye
     también el header y la caja de escribir, así que un inset fijo
     tipo top:6px/bottom:6px quedaría desalineado. */
}
.custom-sb-track.show { opacity: 1; }
.custom-sb-thumb {
  position: absolute;
  left: 0; right: 0;
  border-radius: 999px;
  background: #5a5e66;
  min-height: 38px;
  pointer-events: none;
}

/* ── PICKER UNIFICADO (Emojis / GIF / Stickers) ────────── */
#emojiPicker {
  position: absolute;
  bottom: 68px;
  right: 16px;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #191B20;
  border: 1px solid #191B20;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 600;
  display: none;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
#emojiPicker.open { display: flex; }

/* Tabs de tipo de contenido (segmented control) */
.mp-type-tabs {
  display: flex;
  position: relative;
  gap: 4px;
  margin: 8px 10px 4px;
  padding: 3px;
  background: #292D35;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden; /* evita que el recuadro animado se salga con el overshoot */
}
.mp-type-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s;
}
.mp-type-tab.active { color: var(--text-header); }
.mp-type-tab:hover:not(.active) { color: var(--text); }

/* Recuadro deslizante que marca la pestaña activa. Se posiciona y anima
   por JS (mpAnimateIndicator) al cambiar de pestaña: efecto "pelota de
   ping-pong / coche frenando", más exagerado cuanto mayor es el salto
   (Emojis↔Stickers) y más sutil entre pestañas vecinas. */
.mp-type-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: #191B20;
  border-radius: 8px;
  z-index: 0;
  transform: translateX(0);
  pointer-events: none;
  will-change: transform;
}
.mp-type-indicator.mp-anim-near {
  animation: mpIndicatorSlide .30s linear both;
}
.mp-type-indicator.mp-anim-far {
  animation: mpIndicatorSlide .42s linear both;
}
@keyframes mpIndicatorSlide {
  0%   { transform: translateX(var(--mp-from-x)) scaleX(1) skewX(0deg); }
  10%  { transform: translateX(var(--mp-anticip-x)) scaleX(.93) skewX(0deg); }
  34%  { transform: translateX(var(--mp-mid-x)) scaleX(var(--mp-stretch)) skewX(var(--mp-skew)); }
  58%  { transform: translateX(var(--mp-overshoot-x)) scaleX(var(--mp-squash-end)) skewX(calc(var(--mp-skew) * -.4)); }
  80%  { transform: translateX(var(--mp-settle-x)) scaleX(1.03) skewX(0deg); }
  100% { transform: translateX(var(--mp-to-x)) scaleX(1) skewX(0deg); }
}

.ep-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #1a1d22;
  flex-shrink: 0;
}
.ep-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #23262D;
  border: 1px solid #3C3E46;
  border-radius: 10px;
}
.ep-search-icon { color: #99A1B1; }
.ep-search {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  padding-right: 78px; /* deja hueco para el logo Klipy sin taparlo al escribir */
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
}
.ep-search::placeholder { color: #99A1B1; }
.ep-search-deco-emoji { width: 28px; height: 28px; flex-shrink: 0; }
.gp-search-deco-klipy {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none; /* deja escribir/hacer clic "a través" del logo */
}
.gp-search-deco-klipy img { height: 14px; width: auto; opacity: .95; }

/* Paneles: solo uno visible a la vez, controlado por JS */
.mp-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mp-panel-empty { align-items: center; justify-content: center; }
.mp-placeholder { color: var(--text-muted); font-size: 0.95rem; font-weight: 600; }

/* Panel de emojis: cuerpo con scroll + dock de categorías abajo */
#mpPanelEmojis { position: relative; }
.ep-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  will-change: scroll-position;
}
.ep-body::-webkit-scrollbar { width: 4px; }
.ep-body::-webkit-scrollbar-track { background: transparent; }
.ep-body::-webkit-scrollbar-thumb { background: #414449; border-radius: 4px; }

.ep-cat-section { border-bottom: 1px solid rgba(255,255,255,0.03); }
.ep-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 10px 10px 4px;
}
.ep-cat-chevron { transition: transform 0.15s; flex-shrink: 0; }
.ep-cat-section.collapsed .ep-cat-chevron { transform: rotate(-90deg); }
.ep-cat-section.collapsed .ep-grid { display: none; }

.ep-empty-msg {
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 32px 20px;
}

.ep-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 8px 8px;
}
.ep-emoji {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px;
  transition: background 0.1s, transform 0.1s;
  flex-shrink: 0;
}
.ep-emoji img {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.ep-emoji:hover { background: #26292F; transform: scale(1.15); }
.ep-emoji:active { transform: scale(0.95); }
.ep-emoji-fallback {
  font-size: 32px;
  line-height: 1;
  display: block;
}

/* Discord emoji inline in chat messages.
   Por defecto (mezclado con texto normal) van al tamaño del texto, como
   en Discord. Solo se agrandan cuando el mensaje entero son emojis
   (clase .msg-text-jumbo-emoji, añadida por JS). */
.d-emoji {
  width: 1.375em;
  height: 1.375em;
  object-fit: contain;
  vertical-align: -0.3em;
  display: inline;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.msg-text-jumbo-emoji .d-emoji {
  width: 2.6em;
  height: 2.6em;
  vertical-align: -0.6em;
}

/* Dock inferior de categorías (icono = salto rápido a esa sección) */
.mp-emoji-rail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: #1e2025;
  border-top: 1px solid #111214;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mp-emoji-rail::-webkit-scrollbar { display: none; }
.mp-rail-btn {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mp-rail-btn:hover { background: #26292F; color: var(--text); }
.mp-rail-btn { transition: background 0.15s, color 0.15s, transform 0.12s ease; }
.mp-rail-btn:active { transform: scale(0.86); }
.mp-rail-btn svg { display: block; }
.mp-rail-btn.active { background: #313338; color: var(--accent, #5865f2); }

/* Mobile bottom sheet version — panel alto, aloja Emojis/GIF/Stickers */
@media (max-width: 768px) {
  #emojiPicker {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    border: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
    z-index: 3100;
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.34,1.06,0.64,1);
    display: flex !important;
    pointer-events: none;
    opacity: 0;
  }
  #emojiPicker.open {
    transform: translateY(0);
    pointer-events: auto;
    opacity: 1;
  }
  .ep-drag-pill {
    width: 36px; height: 4px;
    background: #414449;
    border-radius: 4px;
    margin: 8px auto 4px;
  }
}
.ep-drag-area {
  display: none;
  padding: 4px 0 0;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .ep-drag-area { display: block; }
}

/* ── YOU / PROFILE PAGE PANEL — SOLO MÓVIL ─────────────────────
   Pantalla completa propia, independiente del panel de escritorio
   (ese vive en js/desktopSettings.js + css/desktopSettings.css). */
#youPanel {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Antes usaba inset:0 + padding-bottom para dejar hueco al bottom
     nav, pero eso hacía que la scrollbar nativa (que en móvil se
     dibuja como overlay por encima de todo, ignorando z-index)
     ocupara los 100vh completos y se viera "atravesando" el bottom
     nav. Al recortar aquí mismo la caja hasta justo donde empieza el
     nav, la scrollbar nunca llega a esa zona. */
  bottom: var(--bottom-nav-h);
  background: #0B0C0E;
  z-index: 960;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-direction: column;
}
#youPanel.open { display: flex; }
/* Overlay de edición del panel YOU — DEBE estar en body, no dentro de youPanel
   para que position:fixed no quede atrapado por overflow:auto del padre */
#ypEditOverlayRoot {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 980;
  align-items: flex-end;
  justify-content: center;
}
#ypEditOverlayRoot.open { display: flex; }

/* youPanel solo debe abrirse en móvil; en escritorio no existe forma de
   activarlo (el engranaje usa DesktopSettings), así que no necesita
   ningún layout "flotante" propio de escritorio. */

/* ── EMOJI OVERLAY (mobile backdrop) ── */
#emojiOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3050;
  background: rgba(0,0,0,0.4);
}
#emojiOverlay.open { display: block; }

/* ═══════════════════════════════════════
   GIF PICKER — panel embebido dentro de #emojiPicker (#mpPanelGifs)
   ═══════════════════════════════════════ */

/* Vistas */
.gp-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── HOME: grid de categorías ── */
.gp-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 10px 10px;
  overflow-y: auto;
  flex: 1;
}
.gp-cat-grid::-webkit-scrollbar { width: 4px; }
.gp-cat-grid::-webkit-scrollbar-thumb { background: #414449; border-radius: 4px; }

/* Truco de padding-top: da a cada tarjeta una altura fija e independiente
   del navegador (mismo motivo que en la cuadrícula de GIFs: no depender
   de la propiedad CSS aspect-ratio evita que las tarjetas queden pegadas
   entre sí o con la etiqueta desbordando sobre la tarjeta vecina). */
.gp-cat-card {
  position: relative;
  width: 100%;
  padding-top: 50%; /* 2:1 */
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background-color: #2d2f34;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: transform 0.12s, filter 0.12s;
}
.gp-cat-card:hover { transform: scale(1.02); filter: brightness(1.1); }
.gp-cat-card:active { transform: scale(0.98); }

/* Degradado oscuro abajo para que la etiqueta siempre se lea, como
   overlay independiente en vez de box-shadow (que se recortaba mal
   cuando la tarjeta no tenía una altura fija). */
.gp-cat-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  pointer-events: none;
}

.gp-cat-favs {
  background-color: #413CDD !important;
}
.gp-cat-favs::after { display: none; }
.gp-cat-favs .gp-cat-inner {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.gp-cat-icon { font-size: 1.8rem; }

.gp-cat-trend-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-cat-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  z-index: 1;
}

.gp-cat-label {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  width: 100%;
}
.gp-cat-favs .gp-cat-label {
  text-align: center;
  padding: 0;
  font-size: 0.88rem;
  width: auto;
}

/* ── GRID: GIFs de categoría ── */
.gp-grid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 10px;
  flex-shrink: 0;
}
.gp-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.gp-back-btn:hover { background: #2d2f34; color: var(--text); }
.gp-grid-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-header);
}

.gp-gif-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 10px 10px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
}
.gp-gif-grid::-webkit-scrollbar { width: 4px; }
.gp-gif-grid::-webkit-scrollbar-thumb { background: #414449; border-radius: 4px; }

/* Truco de padding-top: da a cada tarjeta una altura fija y separada en
   TODOS los navegadores, sin depender del soporte de la propiedad CSS
   aspect-ratio (esa dependencia era la causa de que los GIFs se vieran
   como tiras finas mal separadas / "al revés" en algunos WebViews). */
.gp-gif-card {
  position: relative;
  width: 100%;
  padding-top: 66%; /* ~3:2, altura estable independiente del navegador */
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #111214;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.12s;
  animation: gifCardIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes gifCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gp-gif-card:hover { border-color: var(--accent); transform: scale(1.02); }
.gp-gif-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gp-star-btn {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.65);
  border: none; border-radius: 50%;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  color: #fff;
}
.gp-gif-card:hover .gp-star-btn { opacity: 1; }
.gp-star-btn.on { opacity: 1; color: #f0b232; }

/* Grid de pegatinas personalizadas (picker unificado, dentro de una
   sección colapsable dentro de .ep-body, que es quien tiene el scroll) */
.ep-sticker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 10px 10px;
  align-content: start;
}
.ep-sticker-card {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #111214;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.12s;
}
.ep-sticker-card:hover, .ep-sticker-card:active { border-color: var(--accent); transform: scale(1.03); }
.ep-sticker-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Loading / empty */
.gp-loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.88rem;
  flex-shrink: 0;
}
.gp-empty-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
  flex: 1;
}
.gp-dots span {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--text-muted);
  border-radius: 50%;
  margin: 0 2px;
  animation: dot 1.2s infinite;
  vertical-align: middle;
}
.gp-dots span:nth-child(2) { animation-delay: .2s; }
.gp-dots span:nth-child(3) { animation-delay: .4s; }

/* Footer Klipy */
.gp-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.7;
  padding: 10px 6px;
  flex-shrink: 0;
}
.powered-klipy-logo { height: 15px; width: auto; display: block; opacity: .95; }

/* Mensajes con GIF enviado */
.msg-gif {
  margin-top: 4px;
  display: inline-block;
  max-width: min(280px, 90%);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  /* Reserva espacio ANTES de que la imagen cargue (sobre todo con
     loading="lazy", que carga justo al entrar en pantalla mientras se
     hace scroll): sin esto, el contenedor pasa de 0 a su alto real de
     golpe y empuja todo lo de abajo, dando ese "tirón"/glitch en la
     scrollbar al subir o bajar. */
  content-visibility: auto;
  contain-intrinsic-size: 280px 180px;
}
.msg-gif img { width: 100%; display: block; border-radius: 8px; }

/* Mensajes con sticker enviado — pequeño, sin fondo ni recuadro, como Discord */
.msg-sticker {
  margin-top: 4px;
  display: inline-block;
  width: 160px;
  max-width: 45vw;
}
.msg-sticker img { width: 100%; display: block; object-fit: contain; pointer-events: none; }

/* Auto-embed imágenes por URL */
.msg-url-img {
  margin-top: 6px;
  display: block;
  max-width: min(280px, 90%);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: 280px 180px;
}
.msg-url-img img { width: 100%; display: block; }

/* ══════════════════════════════════════════
   VOICE CHANNEL BOTTOM SHEET
   ══════════════════════════════════════════ */
.voice-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 975;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: flex-end;
}
.voice-sheet-overlay.open { display: flex; }

.voice-sheet {
  width: 100%;
  background: #26292F;
  border-radius: 16px 16px 0 0;
  padding: 0 16px 36px;
  transform: translateY(105%);
  transition: transform 0.32s cubic-bezier(0.34,1.06,0.64,1);
  user-select: none;
}
.voice-sheet-overlay.open .voice-sheet {
  transform: translateY(0);
}

.voice-sheet-pill-wrap {
  padding: 12px 0 6px;
  text-align: center;
  cursor: grab;
}
.voice-sheet-pill {
  width: 36px; height: 4px;
  background: #414449;
  border-radius: 4px;
  display: inline-block;
}

.voice-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 20px;
  border-bottom: 1px solid #26292F;
  margin-bottom: 20px;
}
.voice-sheet-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.voice-sheet-close {
  background: none; border: none;
  color: #949ba4; font-size: 1.1rem;
  cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.voice-sheet-close:hover { background: #26292F; color: #fff; }

.voice-sheet-connect-btn {
  width: 100%;
  background: var(--accent);
  border: none; color: #fff;
  padding: 16px;
  border-radius: 10px;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background .15s;
}
.voice-sheet-connect-btn:hover { background: var(--accent-hover); }

.voice-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.voice-sheet-action-card {
  background: #2b2d31;
  border-radius: 12px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s;
}
.voice-sheet-action-card:hover { background: #35373c; }
.vsa-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #3a3c43;
  display: flex; align-items: center; justify-content: center;
  color: #dbdee1;
  transition: background .15s;
}
.vsa-icon.vsa-mic { background: #ed4245; color: #fff; }
.vsa-label {
  font-size: 0.78rem;
  color: #dbdee1;
  text-align: center;
  font-weight: 500;
}

/* ══════════════════════════════════════════
   VOICE CALL FULL PANEL (móvil)
   ══════════════════════════════════════════ */
.vc-panel {
  position: fixed;
  inset: 0;
  z-index: 975;
  background: #111214;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
}
@media (min-width: 769px) {
  .vc-panel {
    inset: auto;
    top: 0; bottom: 0;
    right: 0;
    width: 380px;
    border-left: 1px solid #26292F;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
  }
}
.vc-panel.hidden { display: none; }

.vc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #26292F;
  flex-shrink: 0;
}
.vc-back-btn {
  background: none; border: none;
  color: #949ba4; cursor: pointer;
  padding: 6px; border-radius: 8px;
  display: flex; align-items: center;
  transition: background .15s, color .15s;
}
.vc-back-btn:hover { background: #26292F; color: #fff; }
.vc-header-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #dbdee1;
  font-weight: 600;
  font-size: 0.95rem;
}
.vc-header-icon { color: #949ba4; display: flex; }
.vc-channel-name { color: #dbdee1; }

.vc-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  overflow: hidden;
}

/* ── Tarjeta de llamada: color sólido + borde verde al hablar ── */
.vc-my-card {
  width: 100%;
  max-width: 340px;
  border-radius: 16px;
  overflow: hidden;
  background: #26292F;               /* fallback */
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  position: relative;
  border: 3px solid transparent;    /* borde base invisible */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Borde verde cuando el usuario está hablando */
.vc-my-card.speaking {
  border-color: #23a559 !important;
  box-shadow: 0 0 0 3px rgba(35,165,89,0.35), 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* El "banner" ahora es simplemente el fondo de color sólido de toda la tarjeta */
.vc-my-banner {
  display: none;   /* oculto — el color lo pone directamente .vc-my-card via JS */
}

/* Layout interno: avatar centrado + nombre debajo */
.vc-my-avatar-row {
  position: relative;
  padding: 28px 16px 12px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
/* Wrap relativo que contiene avatar + badge de estado */
.vc-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
}
.vc-my-avatar {
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; color: #fff;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.vc-my-card.speaking .vc-my-avatar {
  border-color: #23a559;
}
/* Badge de estado: esquina inferior derecha del wrap = esquina del avatar */
.vc-my-status-badge {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(20,20,22,0.9);
  border: 2.5px solid rgba(20,20,22,0.9);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 2;
}
.vc-my-status-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Indicador de mic: esquina superior derecha de la tarjeta, absoluto */
.vc-mic-indicator {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .2s;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}
.vc-mic-indicator.muted { background: #ed4245; }

.vc-my-name {
  padding: 0 16px 20px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.vc-my-tag {
  display: none;  /* siempre oculto */
}

/* Controles de llamada */
.vc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 16px 40px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.vc-ctrl-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #2b2d31;
  border: none;
  color: #dbdee1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .1s;
  position: relative;
}
.vc-ctrl-btn:hover { background: #35373c; transform: scale(1.05); }
.vc-ctrl-btn:active { transform: scale(0.95); }
.vc-ctrl-btn.active { background: #413CDD; color: #fff; }
.vc-ctrl-btn.muted  { background: #ed4245; color: #fff; }
.vc-ctrl-hangup {
  background: #ed4245 !important;
  color: #fff !important;
}
.vc-ctrl-hangup:hover { background: #c0392b !important; }

/* Ocultar voice sheet en desktop, panel de llamada sí se muestra */
@media (min-width: 769px) {
  .voice-sheet-overlay { display: none !important; }
}

/* ── Decoración de avatar (sin rotación) ── */
.deco-animated {
  /* sin rotación */
}

/* userBarDecoImg más pequeño */
#userBarDecoImg {
  inset: -14% !important;
  width: 128% !important;
  height: 128% !important;
}

/* ── Profile viewer action buttons ── */
.pv-action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pv-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #2b2d31;
  color: #b5bac1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.pv-icon-btn:hover { background: #404249; color: #fff; }
.pv-dm-btn:hover   { background: #5865f2; color: #fff; }
.pv-add-btn:hover  { background: #23a55a; color: #fff; }
.pv-edit-btn:hover { background: #5865f2; color: #fff; }

/* Mensaje grande (solo perfil ajeno, debajo del nombre) */
.pv-msg-action {
  margin-top: 10px;
}
.pv-msg-big-btn {
  width: 100%;
  padding: 11px 16px;
  background: #5865f2;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, transform 0.1s;
}
.pv-msg-big-btn:active { transform: scale(0.97); }
.pv-msg-big-btn:hover  { background: #4752c4; }

/* ── Toast / Snackbar notifications ──
   Tarjeta oscura anclada arriba de la sección/ventana, con un ícono
   circular de color que indica el tipo. Animación: aparece con fade
   bajando un poco desde arriba, se queda fija unos segundos y luego
   sube con fade hasta desaparecer. */
.toast-container {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 99999;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: .93rem;
  font-weight: 700;
  color: #f2f3f5;
  background: #0C0B0E;
  border: 1px solid #28272B;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  pointer-events: auto;
  animation: toastIn 0.38s cubic-bezier(0.34,1.15,0.64,1) forwards;
  min-width: 200px;
  max-width: 360px;
  justify-content: center;
}
.toast .toast-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.toast.toast-success .toast-icon { color: #23a55a; }
.toast.toast-error   .toast-icon { color: #ed4245; }
.toast.toast-info    .toast-icon { color: #5865f2; }
.toast.toast-out     { animation: toastOut 0.32s ease-in forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-22px); }
}

/* ── Vista previa de "respondiendo a" ──────────────────────────────────
   Vive DENTRO de la tarjeta del mensaje (primer bloque, antes de
   .msg-row), no como elemento hermano aparte. Su altura es 100% natural:
   la decide su propio contenido (una línea de texto), sin depender en
   absoluto de la altura del mensaje de abajo ni del de arriba. */
.msg-reply-preview {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 56px; /* alinea el contenido con la columna del avatar de abajo (42px + 14px de gap) */
  min-height: 22px;
  cursor: default;
}
/* Gancho/conector: puramente decorativo. Al ir "position:absolute" no
   participa en el flujo del documento — no puede empujar ni desplazar
   nada de alrededor, sea cual sea su tamaño. Su tamaño es fijo a
   propósito (es un icono pequeño), no un valor mágico compensando nada. */
.msg-reply-hook {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: block;
}
.msg-reply-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: #949ba4;
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
  flex: 1;
}
.msg-reply-preview:hover .msg-reply-name,
.msg-reply-preview:hover .msg-reply-text {
  color: #dbdee1;
}
.msg-reply-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.msg-reply-avatar-init {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .5rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.msg-reply-name {
  color: #c9cdd3;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #949ba4;
  flex: 1;
  min-width: 0;
}

/* ── Vista previa cuando el mensaje original fue eliminado ── */
.msg-reply-preview.is-deleted .msg-reply-inner {
  cursor: default;
}
.msg-reply-deleted-icon {
  width: 16px;

  height: 16px;
  border-radius: 50%;
  background: #1e1f22;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-reply-deleted-icon svg {
  display: block;
}
.msg-reply-deleted-text {
  font-style: italic;
  color: #80848e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}