/* ---------- Reset básico ---------- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;       /* ocupa todo el alto disponible */
  min-height: 100%;   /* asegura cubrir la pantalla */
}




body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;

  /* 🎄 Fondo navideño */
  background-color: #0d1117;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  /* ✔ Compatibilidad móvil + fullscreen */
  min-height: 100dvh;
  overflow: hidden;
  touch-action: manipulation;

  /* ✔ Color texto legible */
  color: #ffffff;
}


.hidden { display: none !important; }

/* ---------- Modales ---------- */

.modal:not(.hidden) { display: flex; }


.modal-content input {
  display: block;
  width: 92%;
  margin: 10px auto;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #30363d;
  background: #fff;   /* fondo blanco */
  color: #000;        /* texto negro */
}


.actions {
  gap: 10px !important;
    margin-top: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.actions button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  background: #2196F3;
}
.actions .secondary { background: #3b4c61; }
.hint { color: #9da7b1; font-size: 12px; margin-top: 8px; }

/* ---------- App principal ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* 👈 dinámico: se ajusta al teclado */
}


/* Header */
header {background: #161b22;display: flex;justify-content: space-between;/* align-items: flex-start; *//* padding: 10px 16px; */flex-direction: column;align-content: flex-start;flex-wrap: wrap;/* height: 22%; */}
header h1 { margin: 0; }

/* Panel que se abre al pulsar "Activar Webcam" */
.webcam-panel {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webcam-panel > #toggleRequestsBtn {
  align-self: center; /* el botón Solicitudes centrado arriba */
}

.webcam-mode-buttons {
  display: flex;
  gap: 6px;
}

/* Botones principales de cabecera */
#webcamMainBtn,
#generalOptionsBtn {
  background: #30363d;
}


.camera-controls button {
  margin-left: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}
#publicBtn { background: #238636; }
#privateBtn { background: #da3633 }
#offBtn { background: #8957e5; } 
#toggleRequestsBtn { background: #238636; }

/* Layout con usuarios a la derecha */
main { 
  display: flex; 
  flex: 1; 
  flex-direction: row-reverse; /* Sidebar a la derecha */
}

/* Sidebar */
.sidebar {
  background: #161b22;
  width: 260px;
  padding: 12px;
  overflow-y: auto;      /* 👈 activa scroll vertical */
  max-height: 100vh;     /* 👈 limita la altura al alto de la ventana */
  width: 33vh !important;
  font-size: 15px;
  height: calc(102% - var(--chat-input-height, 56px)) !important;
}

.sidebar h3 { margin-top: 0;  background: #1286bb;}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li{
    padding: 8px;
    border-bottom: 1px solid #30363d;
    display: flex
;
    justify-content: flex-start;
    cursor: default;
    transition: background 0.2s;
    color: rgb(0, 0, 0);
    background: #b8d7f0;
}
.sidebar li:hover {
  background: #23863622;
}

/* Chat */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0px;
  height: 100%;       /* 👈 ocupa todo el alto */
  overflow: hidden;   /* evita que se expanda */
}


/* Cada mensaje dentro del chat público */
.chat-log div {
  margin-bottom: 6px;   /* 👈 separa los mensajes */
  line-height: 1.4;     /* 👈 mejora la legibilidad */
}


.chat-log {
  /* display: flex; */                       /* 👈 necesario para que column-reverse funcione */
  flex-direction: column;      /* últimos mensajes visibles abajo */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  background: #ffffff;
  color: black;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 10px;
  font-size: 18px;
  flex: 1 !important;
  overflow-y: auto !important;
  padding-bottom: var(--keyboard-inset-height, 0px) !important;  /* ¡Clave! Padding = alto del teclado */
  /* padding-bottom: env(keyboard-inset-height, q0px) !important; */
  align-content: flex-end;
  padding-bottom: 15px !important;
}


.chat-input {
  display: flex;
  flex: 0 0 auto;
  margin-top: 10px;
  flex-shrink: 0;        /* evita que se comprima el contenedor */
  width: 98%;           /* asegura que no se salga del chat */
  box-sizing: border-box;
  position: sticky;   /* 👈 se mantiene visible */
  bottom: 0;
}

.chat-input input {
  flex: 1 1 auto;        /* crece y se encoge dentro del flex */
  /* min-width: 0; */          /* 👈 evita que empuje al botón */
  /* width: 100%; */           /* ocupa todo el ancho disponible */
  /* max-width: 100%; */       /* nunca se desborda */
  height: 40px;          /* altura base */
  line-height: 20px;
max-width: 70% !important;
  border-radius: 8px 0 0 8px;
  border: 1px solid #30363d;
  background: #fff;
  color: #000;
  box-sizing: border-box;
      padding: 12px;
}

.chat-input button {
  flex-shrink: 0;        /* 👈 el botón no se estira ni empuja */
  padding: 10px 12px;
  border: none;
  background: #238636;
  color: white;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-weight: 600;
  background: #236186;
}

.chat-input button:hover {
  background: #2ea043;
}

/* ---------- Modal solicitudes cámara ---------- */
.accept { background: #238636; }
.reject { background: #da3633; }

/* ---------- Menú contextual de usuario ---------- */
#userMenu {
  position: fixed;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  min-width: 180px;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.15s ease-out;
}
#userMenu button {
  background: none;
  border: none;
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #30363d;
}
#userMenu button:last-child { border-bottom: none; }
#userMenu button:hover { background: #23863633; }

#adminMenu {
  position: fixed;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  min-width: 180px;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.15s ease-out;
}


#adminMenu button {
  background: none;
  border: none;
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #30363d;
}
#adminMenu button:last-child { border-bottom: none; }
#adminMenu button:hover { background: #23863633; }

/* Colores diferenciados por acción */
#adminMenu button.kick:hover { background: #f39c1233; }
#adminMenu button.mute:hover { background: #9b59b633; }
#adminMenu button.ban:hover { background: #e74c3c33; }

/* ---------- Ventanas privadas ---------- */
.private-window {
  position: absolute;
  width: 320px;
  height: 320px;
   resize: both;  
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  /* ❌ quita esto: resize: both; */
  overflow: hidden;
  z-index: 2000;
 
}


.private-header {
  background: #1a7bc9;
  padding: 6px 10px;
  cursor: move;
  user-select: none; /* evita seleccionar texto al arrastrar */
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.private-header button {
  border: none;
  background: #30363d;
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
}
.private-header button:hover { background: #444c56; }

.private-log {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    background: #ffffff;
    font-size: 14px;
    color: black;
    font-size: 17px !important;
}

.private-input {
  display: flex;
  padding: 6px;
  background: #161b22;
}
.private-input input {
  flex: 1;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #30363d;
  background: #fff;   /* fondo blanco */
  color: #000;        /* texto negro */
}

.private-input button {
  margin-left: 6px;
  background: #09628a;
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}
.private-input button:hover { background: #2ea043; }

/* ---------- Animaciones ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll personalizado ---------- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

.cam-header {
  background: #238636;
  color: #fff;
  font-weight: 600;
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  user-select: none;
  height: 24px;
}

.sidebar-toggle {
  display: none;
}


/* Botón toggle oculto en desktop */
/* style.css */
.sidebar-toggle {
  position: fixed;
  top: 50%;
  right: 0;              /* pegado al borde derecho */
  transform: translateY(-50%);
  background: #333;
  color: white;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 1000;
}


/* En móviles + tablet: sidebar oculta y botón visible */
@media (max-width: 1099px) {
  .sidebar {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 280px;
    height: 100%;
    overflow-y: auto;
    background: #161b22;
    z-index: 5000;
    box-shadow: -4px 0 12px rgba(0,0,0,0.6);
    transition: transform 0.3s ease;
    transform: translateX(100%);
  }

  .sidebar.open {
    display: block;
    transform: translateX(0);
  }

  /* 👇 ESTA REGLA FALTABA */
  .sidebar-toggle {
    display: block;
  }
}


main {
  display: flex;
  flex: 1;
  flex-direction: row-reverse;
  height: 100%; /* 👈 fuerza altura completa */
  overflow: hidden; /* evita que crezca hacia abajo */
}

@media (max-width: 768px) {
  main {
    flex-direction: column; /* sidebar abajo o desplegable */
  }
}


.cam-drag {
  margin-left: 8px;
  font-size: 12px;
  color: #fff;
  cursor: move;
  user-select: none;
}


#camerasContainer {
  position: fixed;   /* 👈 en vez de relative */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
  pointer-events: none; /* deja pasar clics salvo en las ventanas */
}


.camera-window {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 480px;
  height: 360px;
  background: #000;
  border: 2px solid #238636;
  border-radius: 6px;
  overflow: hidden;
  z-index: 4000;       /* más alto que el contenedor */
  pointer-events: auto; /* habilita interacción dentro */
  display: flex;
  flex-direction: column;
}

.camera-window iframe,
.camera-window video {
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  border: none;
  object-fit: cover;
  display: block;
}


/* Cabecera de la cámara */
.cam-header {
  background: #238636;
  color: #fff;
  font-weight: 600;
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
}

.cam-header .cam-drag {
  font-size: 12px;
  cursor: move;
  user-select: none;
}

.cam-header .cam-close {
  background: #30363d;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  padding: 0 6px;
}
.cam-header .cam-close:hover {
  background: #444c56;
}

/* Resizer en la esquina inferior derecha */
.cam-resizer {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  user-select: none;
  color: #fff;
}

.cam-resizer::after {
  content: "↘️";
  font-size: 14px;
}


/* Ajustes responsive en móvil */
/* Ajustes responsive en móvil: solo valores iniciales, sin !important */
@media (max-width: 768px) {
  .camera-window {
    width: 60vw;
    height: 30vh;
    top: 10px;
    left: 5vw;           /* inicio visible en móvil */
    transform: none;     /* permitir que JS mueva libremente */
  }
}


#uploadAvatarBtn {
  background: orange;
}

/* Menus contextuales */
#adminMenu,
#userMenu {
  position: fixed;
  background: #222;
  color: #fff;
  padding: 6px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  z-index: 9999;
  min-width: 120px;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}

/* Ocultar menús */
.hidden {
  display: none !important; /* 👈 se ocultan con esta clase */
}

/* Botones dentro del menú */
#adminMenu button,
#userMenu button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  padding: 4px 8px;
  cursor: pointer;
}

#adminMenu button:hover,
#userMenu button:hover {
  background: #444;          /* efecto hover */
}

/* Nicks clickeables en el chat */
.chat-nick {
  color: #0af;               /* azul llamativo */
  font-weight: bold;
  cursor: pointer;
}
.chat-nick:hover {
  text-decoration: underline;
}


#userSearchInput {
  background: #fff;
  color: #000;
  font-size: 14px;
  width:  95% !important;
}


#paletteIcon

 {
    cursor: pointer;
    font-size: 20px;
    color: white;
    padding: 10px;
    background: #6eabc7;
}

/* Elimina cualquier override raro */


#roomModal ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
  color: #fff;
}

#roomModal .enterRoomBtn {
  background: #2196F3;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
#roomModal .enterRoomBtn:hover {
  background: #2ea043;
}

#openRoomsBtn {
  background: #3b4c61; /* azul grisáceo sobrio */
}
#openRoomsBtn:hover {
  background: #4a5a72;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 6px;
  cursor: pointer;
  object-fit: cover;   /* recorta/escala sin deformar */
  display: inline-block;
  background-image: url("https://icons.iconarchive.com/icons/gianni-polito/colobrush/48/software-crystal-msn-icon.png");
  background-size: cover;
  background-position: center;
}

.private-header .pv-minimize {
  border: none;
  background: #30363d;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-weight: bold;
}
.private-header .pv-minimize:hover {
  background: #444c56;
}



#gifResults img {
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
}
#gifResults img:hover {
  outline: 2px solid #2ea043;
}

.color-picker {
  display: flex;           /* coloca los hijos en fila */
  align-items: center;     /* alinea verticalmente */
  gap: 6px;                /* espacio entre elementos */
  position: relative;      /* mantiene el panel flotante relativo al contenedor */
}

.chat-log img.gif-message, .private-log img.gif-message

 {
    max-width: 200px;
    max-height: 200px;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transform: scale(0.8);
}

.gif-message {
  width: 100px;        /* tamaño fijo */
  height: 100px;       /* tamaño fijo */
  object-fit: cover;   /* recorta/escala sin deformar */
  border-radius: 6px;
  display: block;
  margin-top: 4px;
}


/* Contenedor del picker: coloca hijos en fila */
.color-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.color-panel {
    position: absolute;
    bottom: 70px;
    left: 70px;
    display: grid;
    /* display: flex !important; */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #161b22;
    /* border: 1px solid #444; */
    /* padding: 10px; */
    border-radius: 6px;
    z-index: 6000;
    /* min-width: 260px; */
    left: -200px !important;
    flex-direction: column-reverse;
    align-content: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    left: -40px !important;
}

/* Caja de cada grupo de colores */
.color-group {
  background: #10151b;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px;
}

/* Título */
.color-panel-title {
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

/* Cuadrícula de swatches, tamaño fijo y ordenado */
.color-row {
  display: grid;
  grid-template-columns: repeat(5, 24px); /* 5 columnas de 24px */
  gap: 6px;
}

/* Botones de color */
.color-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #555;
  cursor: pointer;
}
.color-btn:hover {
  border: 2px solid #fff;
}

/* Estado visible/oculto ya existente */


/* Responsive: en móvil, apila las dos cajas en columna y acerca el panel al pincel */
@media (max-width: 768px) {
  .color-panel {
    grid-template-columns: 1fr;  /* una columna: dos grupos apilados */
    left: 10px;                  /* cerca del icono */
    bottom: 56px;                /* un poco más arriba para no tapar el input */
    /* min-width: 200px; */
    /* max-width: 88vw; */             /* límite en móvil */
    /* right: 0px !important; */
    position: fixed;
    display: flex;
    left: 150px !important;
  }
  .color-row {
    grid-template-columns: repeat(6, 22px); /* más columnas, swatch ligeramente más pequeño */
    gap: 5px;
  }
}

.modal {
  position: fixed;       /* se mantiene sobre la ventana */
  inset: 0;              /* ocupa todo el viewport */
  display: none;         /* oculto por defecto */
  justify-content: center;
  align-items: center;
  z-index: 2000;

  /* truco: el overlay no bloquea clics/teclado */
  pointer-events: none;
}

.modal-content {
  background: #1f5581;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  width: 360px;
  max-width: 92%;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);

  /* la caja sí recibe interacción */
  pointer-events: auto;
}

.user-featured-icon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
}

.gender-select {
  display: flex;              /* coloca los elementos en fila */
  gap: 20px;                  /* espacio entre Hombre y Mujer */
  margin-top: 10px;           /* separación respecto al input/botones */
  align-items: center;        /* alinea verticalmente con los iconos */
}

.gender-select label {
  display: flex;              /* cada label también en fila */
  align-items: center;        /* alinea checkbox e icono */
  gap: 6px;                   /* espacio entre checkbox e icono */
  cursor: pointer;
}

.gender-select img {
  width: 24px;                /* tamaño uniforme del icono */
  height: 24px;
}


/* Si prefieres que siempre se quede en la ventana, usa fixed */
#adminMenu.fixed {
  position: fixed;
  top: 20px;            /* siempre visible dentro de viewport */
  right: 20px;
}


#adminMenu, #userMenu {
  position: fixed;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 9999;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for menus */
#adminMenu::-webkit-scrollbar,
#userMenu::-webkit-scrollbar {
  width: 6px;
}
#adminMenu::-webkit-scrollbar-track,
#userMenu::-webkit-scrollbar-track {
  background: transparent;
}
#adminMenu::-webkit-scrollbar-thumb,
#userMenu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
#adminMenu::-webkit-scrollbar-thumb:hover,
#userMenu::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

#toggleJoinLeaveBtn {

  background: purple;
}

/* Emojis enviados al chat */
.emoji-message {
  width: 32px;   /* tamaño más pequeño */
  height: 32px;
  vertical-align: middle;
  margin: 2px;
}


#refreshRadioBtn {
  padding: 6px 12px;
  background: #238636;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#refreshRadioBtn:hover {
  background: #2ea043;
}


/* Sidebar/* Sidebar en móvil */
/* Ocultar el toggle solo en desktop real (>= 1100px) */
@media (min-width: 1100px) {
  #toggleSidebar { display: none; }
}

/* Sidebar móvil + tablet (hasta 1099px): desliza desde la derecha */
@media (max-width: 1099px) {
  .sidebar {
    position: fixed;
    top: 0;
    right: -260px;           /* oculto fuera de pantalla */
    width: 260px;
    height: 100vh;
    background: #222;
    border-left: 1px solid #444;
    transition: right 0.3s ease;
    z-index: 999;            /* por encima del contenido */
    overflow-y: auto;
    padding: 10px;
    height: calc(97% - var(--chat-input-height, 56px)) !important;
  }

  .sidebar.open {
    right: 0;
    top:0;                /* visible cuando tiene .open */
  }

  /* Flecha centrada y al borde derecho por defecto */
  #toggleSidebar.sidebar-toggle {
    position: fixed;
    top: 50%;
    right: 0;                /* pegada al borde derecho cuando sidebar está oculto */
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    z-index: 99999 !important;  /* siempre por encima de TODO incluido anuncios */
  }
}

/* sidebar PC: gestionado por bloque min-width:1100px */

@media (max-width: 1099px) {
  #toggleSidebar.sidebar-toggle {
    font-size: 22px;
    width: 44px;
    height: 44px;
  }
}

#mentionBox {
  position: absolute;
  background: #161b22;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 4px;
  z-index: 5000;       /* 👈 encima del chat */
  max-height: 150px;
  overflow-y: auto;
  min-width: 160px;
}
.mention-item {
  padding: 6px 10px;
  cursor: pointer;
  color: #fff;
}
.mention-item:hover,
.mention-item.active {
  background: #238636;
}

#avatarModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 6000;
}
#avatarModal:not(.hidden) { display: flex; }

#avatarModal .modal-content {
  background: #161b22;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
  max-width: 500px;
  width: 90%;
}

.avatar-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.avatar-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  object-fit: cover;
  border: 2px solid transparent;
}
.avatar-option:hover {
  border-color: #238636;
}

.bot-user { color: gray; font-style: italic; }

.modal .modal-content.small {
  max-width: 400px;
  padding: 10px;
}
#configBtn {
  margin-left: 8px;
}

#advancedBtn {
  margin-left: 8px;
  background: #3b4c61;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
}
#advancedBtn:hover { background: #4a5a72; }

#advancedModal .tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
#advancedModal .tabs button {
  flex: 1;
  padding: 6px;
  border: none;
  background: #444c56;
  color: #fff;
  cursor: pointer;
}
#advancedModal .tabs button:hover {
  background: #2ea043;
}

.tab { display: none; }
.tab.active {       display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: nowrap;
}

.gender-select {
  display: flex;
  gap: 12px;            /* separación entre Hombre y Mujer */
}

.gender-select label {
  display: flex;
  align-items: center;  /* alinea verticalmente checkbox + icono + texto */
  gap: 6px;             /* espacio entre checkbox, imagen y texto */
  cursor: pointer;
}

.gender-select input[type="checkbox"] {
  margin: 0;            /* elimina margen por defecto */
}


.private-window {
  width: 320px;
  max-height: 60vh;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.private-header {
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  background: #0d1117;
  border-bottom: 1px solid #30363d;
}

.private-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.pv-compose {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 4px 6px;
  background: rgba(20,20,40,0.95);
  border-top: 1px solid #333;
}

.pv-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #ffffff !important;
  color: #333 !important;
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.pv-resizer {
  width: 12px;
  height: 12px;
  cursor: se-resize;
  align-self: flex-end;
}

.pv-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.pv-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pv-toolbar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  position: relative;
}

.pv-color-panel {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #1a1a2e;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
  z-index: 100000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  min-width: 180px;
}

@supports (height: 100dvh) {
  .app {
    height: 100dvh;
  }
}

@media (max-width: 768px) {
  .chat-input {

    bottom: 0;
    width: 100%;
  }
}

.private-window.minimized .private-log,
.private-window.minimized .pv-compose {
  display: none;
}

.private-window.minimized {
  height: auto;   /* solo se ve el header */
  width: 200px;   /* opcional: tamaño reducido */
}


#tab-text label {
  display: block;
  margin-bottom: 8px;
}

#fontZoom {
  width: 150px;
  vertical-align: middle;
}

.viewers-panel {
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 6px;
  font-size: 14px;
  max-height: 120px;
  overflow-y: auto;
}
.viewer-row {
  display: flex;
  justify-content: space-between;
  margin: 2px 0;
  color: white;
}
.viewer-row button {
  background: #da3633;
  border: none;
  color: white;
  cursor: pointer;
}

.request-window {
  width: 280px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-family: Arial, sans-serif;
  color: white;
  overflow: hidden;
}

.request-header {
  background: #2c2c2c;
  padding: 8px 12px;
  font-weight: bold;
  cursor: move;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #444;
}

.close-request-btn {
  background: none;
  border: none;
  color: #ff5c5c;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-request-btn:hover {
  color: #ff8c8c;
}

.request-body {
  padding: 12px;
}

.request-body p {
  margin: 0 0 12px 0;
  font-size: 14px;
}

.request-actions {
  display: flex;
  gap: 8px;
}

.accept-request-btn,
.reject-request-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}

.accept-request-btn {
  background: #28a745;
  color: white;
}

.accept-request-btn:hover {
  background: #218838;
}

.reject-request-btn {
  background: #dc3545;
  color: white;
}

.reject-request-btn:hover {
  background: #c82333;
}

/* --- Móvil: iconos arriba y a la derecha SIN mover el botón --- */
@media (max-width: 768px) {
    #colorPicker {
        position: relative; /* Necesario para que los iconos se posicionen dentro */
    }

    /* POSICIONAR ICONOS ARRIBA A LA DERECHA */
    #emojiBtn,
    #gifBtn,
    #ytIcon,
    #paletteIcon {
        position: absolute;
        right: 10px;       /* pegados a la derecha */
        transform: translateX(0);
        width: auto;
    }

    /* Columna vertical */
    #emojiBtn { top: -140px; border-radius: 0px; right: 19px}
    #gifBtn { top: -100px; right: 10px   }
    #ytIcon { top: -5px; }
    #paletteIcon { top: -60px; right: 19px }

    /* El botón Enviar NO se toca, no se mueve */
}

/* Ocultar herramientas de escritorio en móvil */
.desktopTool {
  display: flex;
  gap: 8px;
  align-items: center;
}

#mobileToolsBtn {
  display: none; /* oculto en escritorio */
  background: none;
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
  padding: 0 10px;
}

/* Menú hamburguesa flotante en móvil */
#mobileToolsMenu {
  position: absolute;
  right: 70px;           /* justo antes del botón Enviar */
  bottom: 56px;          /* arriba del input */
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 12px 16px;
  display: none;
  flex-direction: row;
  gap: 16px;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  pointer-events: auto;
}

#mobileToolsMenu.show {
 display: flex;
    transform: scale(0.85);
    transform-origin: top right;
    -webkit-transform: scale(0.7);
    -webkit-transform-origin: top right;
    display: inline-block;
}

#mobileToolsMenu button,
#mobileToolsMenu i {
  font-size: 26px;
  padding: 8px;
  background: #333;
  border-radius: 10px;
  cursor: pointer;
  color: white;
}

#mobileYtIcon { color: #FF0000; }
#mobilePaletteIcon { color: #4CAF50; }

/* ==== RESPONSIVE: hamburguesa en mã³vil + tablet (hasta 1099px) ==== */
@media (max-width: 1099px) {
  .desktopTool {
    display: none !important;
  }

  #mobileToolsBtn {
    display: block !important;
  }

  /* Asegurar que el input no se desborde con el botón hamburguesa */
  .chat-input {
  position: relative !important;
  bottom: 0;
  width: 100% !important;
  padding: 8px !important;
  background: #0d1117;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 100;
}

  #messageInput {

  }
}
/* ==================== PANEL DE COLORES – VERSIÓN FINAL QUE NUNCA FALLA ==================== */


/* Animación de entrada */
@keyframes slideUp {
  from { 
    transform: translateY(20px); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

/* En móvil: ocupa casi toda la pantalla */

/* Botones de color (bonitos y responsivos) */
.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.color-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  border: 3px solid #30363d;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.color-btn:hover {
  transform: scale(1.2);
  border-color: #58a6ff;
  box-shadow: 0 0 15px rgba(88,166,255,0.7);
}

/* Mantiene texto en escritorio; muestra solo icono en móvil */
.hamburger-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: inherit; cursor: pointer; padding: 6px 10px; font-size: 16px; }
.hamburger-btn .mobile-label { display: inline; }
.hamburger-btn .hamburger-icon { display: none; font-size: 22px; line-height: 1; }

/* Solo en móvil + tablet: ocultar texto, mostrar icono */
@media (max-width: 1099px) {
  .hamburger-btn .mobile-label { display: none !important; }
  .hamburger-btn .hamburger-icon { display: inline !important; }
}

.pv-drag {
  touch-action: none;   
  -webkit-user-drag: none;
  user-select: none;
  cursor: move;
}

#ytIcon, #imageUploadBtn {
  width: 40px;
  height: 40px;
  font-size: 20px;
  background: #333;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
#ytIcon.hidden, #imageUploadBtn.hidden { display: none !important; }

.input-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: #2a2a2a;
  color: #fff;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tool-btn:hover {
  background: #3a3a3a;
  transform: scale(1.05);
}

.tool-btn.hidden {
  display: none !important;
}

/* Ocultar en móvil / mostrar en escritorio */
.desktop-only { display: flex; }
.mobile-only { display: none; }

/* Menú móvil flotante */
#mobileToolsMenu {
  position: absolute;
  bottom: 60px;
  left: 10px;
  right: 10px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  animation: slideUp 0.3s ease;
}


@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Responsive: tablet + movil */
@media (max-width: 1099px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
}

@media (min-width: 1100px) {
  #mobileToolsMenu { display: none !important; }
}


@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.user-item {
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
}
.user-item:hover {
  background-color: #2b2b2b;
}
.nick {
  font-weight: bold;
}

.owner-cam-eye-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  color: #fff;
  font-size: 13px;
  margin-right: 8px;
  user-select: none;
  box-sizing: border-box;
}
.owner-cam-eye-icon { font-size: 16px; line-height: 1; }
.owner-cam-eye-count { font-weight: 700; min-width: 18px; text-align: center; }
.owner-cam-eye-wrap.zero-viewers { opacity: 0.65; filter: grayscale(40%); background: rgba(0,0,0,0.12); }
.owner-cam-eye-wrap.has-viewers { opacity: 1; box-shadow: 0 0 8px rgba(0,0,0,0.6); }
.cam-drag-handle { display:inline-flex; align-items:center; cursor:grab; margin-left:6px; }

#chatApp, #chatContainer {
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

#userList,
#usersPanel,
.right-panel,
.sidebar-users {
  top: 58px !important;
  bottom: 68px !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Filtro de viewers: oculta usuarios que no ven tu cam */
.user-item:not(.is-viewer) {
  display: block;  /* normal */
}

.show-viewers-only .user-item:not(.is-viewer) {
  display: none;  /* oculta no-viewers */
}

/* Icono de ojo bonito */
#viewersFilterIcon {
  cursor: pointer;
  font-size: 18px;
  margin-left: 10px;  /* al lado del filtro de sexo */
  color: #888;  /* gris por default */
}

#viewersFilterIcon.active {
  color: #ff0000;  /* rojo cuando activo */
}

.format-btn.active {
  outline: 2px solid #2ea043;
  background: #2ea04333;
}
.format-btn { 
  background: #444c56;
  color: #fff;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.format-btn:hover { background: #2ea04322; }


strong { font-weight: bold !important; color: inherit; }
em { font-style: italic !important; }
.message-text u,
.message-text span[style*="underline"] {
  text-decoration: underline !important;
}

.message strong { font-weight: bold !important; }
.message em { font-style: italic !important; }
.message u,
.message span[style*="underline"] {
  text-decoration: underline !important;
}

/* Opcional: mejorar contraste en negrita/subrayado */
.message strong { font-weight: bold !important; }
.message em { color: #ffeb3b; }
.message span[style*="underline"] { color: #4fc3f7; }


#chatApp {

  top: 0 !important;
  left: 0 !important;
  /* se adapta cuando sale el teclado */
  margin: 0 !important;


}

#chatApp, .app {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}

@media (max-width: 768px) {
  .chat-log {
    padding-bottom: calc(var(--keyboard-inset-height, 0px) + 20px) !important;  /* +20px de margen seguro */
  }
}

#chatApp:fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1 !important;
}

/* PANEL FLOTANTE WEBCAM */
.webcam-floating {
    position: fixed;
    top: 120px;
    left: 40px;
    width: 260px;
    background: #161b22;
    border: 2px solid #238636;
    padding: 12px;
    border-radius: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.wf-header {
    display: flex;
    justify-content: space-between;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

.wf-header button {
    background: #da3633;
    border: none;
    color: white;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
}

.wf-requests {
    background: #236186;
    color: white;
    padding: 8px;
    border-radius: 6px;
    font-weight: bold;
}

.wf-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-public {
    background: #238636;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    color: white;
}

.wf-private {
    background: #da3633;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    color: white;
}

#webcamPanelModal .modal-content button,
#generalOptionsModal .modal-content button {
  width: 100%;
  margin-top: 8px;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 6px;
}

@media (max-width: 768px) {
  
  header {
    flex-direction: column !important;   /* apila los elementos */
    align-items: stretch !important;
  }

  /* Bloque de botones */
  .camera-controls {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;          /* permiten 2–3 por fila */
    gap: 8px !important;
    justify-content: center !important;
     height: 45%;
  }

 

  /* Asegurar que el reproductor no aplaste nada */
  #radioPlayer {
    width: 100% !important;
    margin-bottom: 10px;
  }
}

/* === SOLO LOS BOTONES QUE PEDISTE === */

/* BOTÓN ACTIVAR WEBCAM */
#openWebcamPanelBtn {
    background: #2b89d6 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: 0.15s ease-in-out !important;
}
#openWebcamPanelBtn:hover {
    background: #1f6aa6 !important;
}


/* MODO PÚBLICO */
#publicBtn {
    background: #238636 !important; /* verde */
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
}
#publicBtn:hover {
    background: #1c682e !important;
}

/* MODO PRIVADO */
#privateBtn {
    background: #da3633 !important; /* rojo */
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
}
#privateBtn:hover {
    background: #b92e2b !important;
}

/* MODO OFF */
#offBtn {
    background: #8957e5 !important; /* morado */
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
}
#offBtn:hover {
    background: #6e3fb9 !important;
}

/* BOTÓN CERRAR DEL MODAL ACTIVAR WEBCAM */
#closeWebcamPanel {
    background: #3b4c61 !important;   /* gris azulado */
    color: #fff !important;
    border: none !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: 0.15s ease-in-out !important;
    margin-top: 15px !important;
}

#closeWebcamPanel:hover {
    background: #4a5a72 !important;
}

@media (max-width: 768px) {
  #radioPlayer img {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #openWebcamPanelBtn {
    font-size: 0 !important;        /* Oculta el texto */
    width: 50px !important;         /* Botón más compacto */
    padding: 8px !important;
  }

  #openWebcamPanelBtn::before {
    content: "🎦";                  /* Icono */
    font-size: 22px;                /* Tamaño del icono */
  }
}

@media (max-width: 1099px) {
  .header-logo {
    display: none !important;
  }
}

    .camera-controls {
        width: 100%;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: flex-end;
        height: 45%;
        flex-direction: row;
    }


.panel-title {
  color: white;
  margin: 0;
  font-size: 15px;
}


.nick-color-box {
  width: 20px;
  height: 20px;
 padding: 0px;
  cursor: pointer;

  position:relative;

}


/* Movil */
@media (max-width: 768px) {
    .buttons-left {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        align-items: flex-start;
    }
}

/* Panel de colores - versión limpia y funcional */
#colorPanel {
  /* position: absolute; */
  bottom: 70px;           /* Aparece justo encima del input */
  left: auto;            /* posicionado por media query */
  background: #161b22;
  border: 1px solid #30363d;
  /* border-radius: 8px; */
  transform: scale(0.85) !important;
  transform-origin: top left;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  z-index: 5000;
  width: 320px;
  max-width: 90vw !important;
  display: block;
  /* font-size: 100px !important; */
  ransform: translateX(-30%) scale(0.58) !important;
}

/* En escritorio: sin escalados raros */
@media (min-width: 769px) {
  #colorPanel {
    transform: none !important;
    -webkit-transform: none !important;
    width: 340px;
  }
}

/* En móvil: más pequeño y centrado si es necesario */
@media (max-width: 768px) {
  #colorPanel {
    left: 10px;
    right: 10px;
    width: auto;
  }
}

/* MENÚ MÓVIL - VERSIÓN ULTRA-ROBUSTA (funciona aunque haya overflow:hidden) */
#mobileToolsMenu {
  position: fixed !important;    /* ¡Fixed al viewport, no absolute! Así no lo corta ningún padre */
  bottom: 70px !important;       /* Encima del input y botón hamburguesa */
  left: 10px !important;
  right: 10px !important;
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 -8px 25px rgba(0,0,0,0.8) !important;
  z-index: 9999 !important;      /* Muy alto para que esté por encima de TODO */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
  gap: 12px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.25s ease-out;
}

/* Cuando está visible (sin clase hidden) */
#mobileToolsMenu:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  /* transform: translateY(0) !important; */
  transform: scale(0.85);
  transform-origin: top left;
}

/* En pantallas muy pequeñas */
@media (max-width: 480px) {
  #mobileToolsMenu {
    bottom: 80px !important;
    padding: 14px !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ====================== MÓVIL ====================== */
@media (max-width: 768px) {
  #colorPanel {
    transform: none !important;   /* ← Aquí el zoom/reducción (ajusta 0.88 a tu gusto) */
    transform-origin: center bottom !important;
    width: 88vw !important;
    max-width: 340px !important;
    padding: 12px !important;
  }

  #colorPanel:not(.hidden) {
    transform: none !important;
  }

  /* 5 columnas → compacto y cuadrado */
  #colorPanel .color-row {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  #colorPanel .nick-color-box {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ====================== ESCRITORIO ====================== */
@media (min-width: 769px) {
  #colorPanel {
    position: absolute !important;        /* En PC lo ponemos absolute respecto a .chat-input */
    bottom: 100% !important;              /* Justo encima del input/pincel */
    right: 10px !important;
    left: auto !important;
    transform: translateX(0) scale(0.94) !important;   /* Zoom sutil en PC (ajusta 0.94 si quieres) */
    transform-origin: bottom right !important;
    width: 310px !important;
    padding: 12px !important;
  }

  #colorPanel:not(.hidden) {
    transform: translateX(0) scale(0.94) !important;
  }

  /* 7 columnas en PC → buen equilibrio */
  #colorPanel .color-row {
    grid-template-columns: repeat(7, 1fr) !important;
  }

  #colorPanel .nick-color-box {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ASEGURA QUE EL PANEL DE COLORES ESTÉ SIEMPRE POR ENCIMA DE TODO */
#colorPanel {
  z-index: 99999 !important;   /* Muy alto: por encima del menú móvil, input, iconos, etc. */
  ransform: translateX(-30%) scale(0.58) !important;
}

/* Si el menú móvil o sus botones tienen z-index alto, los bajamos un poco */
#mobileToolsMenu,
#mobileToolsBtn,
#mobilePaletteIcon,
#paletteIcon,
.chat-input,               /* El input de chat y sus iconos */
.format-tools             /* Si tienes herramientas de formato */
{
  z-index: 1000 !important; /* Mucho más bajo que el panel */
}

/* Opcional: si el menú hamburguesa abierto también tapa algo, dale un z-index menor */
#mobileToolsMenu:not(.hidden) {
  z-index: 5000 !important;  /* Alto, pero menor que el panel de colores */

  transform: scale(0.85);
  transform-origin: top left;
  font-size: 10px !important;
}

/* SELECTOR DE COLORES DE NICKS - MÁS ANCHO EN PC */
#nickColorPanel {
  position: fixed !important;
  bottom: 80px !important;
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.8) !important;
  z-index: 99999 !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* MÓVIL: igual que antes, compacto */
@media (max-width: 768px) {
  #nickColorPanel {
    left: 50% !important;
    right: auto !important;
    width: 88vw !important;
    max-width: 340px !important;
    transform: translateX(-50%) scale(0.90) !important;
  }

  #nickColorPanel .color-row {
    grid-template-columns: repeat(5, 24px) !important;
    gap: 6px !important;
  }
}

/* ESCRITORIO: MÁS ANCHO (420px) y 9 columnas para que se vea amplio y horizontal */
@media (min-width: 769px) {
  #nickColorPanel {
    left: auto !important;
    right: 20px !important;
    width: 280px !important;          /* ← Más ancho (antes 360px, ahora 420px) */
    max-width: none !important;
    transform: none !important;
    padding: 14px !important;         /* Un poco más de padding para que respire */
  }

  /* 9 columnas → se ve bien amplio y horizontal */
  #nickColorPanel .color-row {
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 11px !important;             /* Espacio cómodo entre colores */
  }

  #nickColorPanel .nick-color-box {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    border: 1px solid #555 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  #nickColorPanel .nick-color-box:hover {
    transform: scale(1.3) !important;
    border-color: #fff !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.5) !important;
  }
}

/* Evitar que #desktopTools colapse */
#desktopTools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Para que el input no expulse los iconos */
#messageInput {
    flex-grow: 1;
    min-width: 0 !important;
}


.chat-thumb:hover {
    transform: scale(1.04);
}

.img-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,0.65);
  justify-content: center;
  align-items: center;
}

.img-modal.show {
  display: flex;
}

.img-modal-content {
  max-width: 85%;
  max-height: 85%;
  border-radius: 10px;
  box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
}

.img-modal-close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  user-select: none;
}

/* Tamaño uniforme de imágenes en el chat */
.chat-image {
    max-width: 160px;
    max-height: 160px;
    width: auto;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    margin: 6px 0;
}

#imgModalImg {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
}
.chat-image-thumb {
  width: 200px
}

/* ----- Dropdown Opciones Generales ------ */
.dropdown-menu {
  position: absolute;
  top: 46px;
  left: 0;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  min-width: 180px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.dropdown-menu button {
  background: none;
  border: none;
  color: white;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #30363d;
}

.dropdown-menu button:hover {
  background: #23863633;
}

.dropdown-menu button:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .btn-text {
    display: none !important;
  }

  .btn-text2 {
    display: none !important;
  }


  #togglePrivadosBtn,
  #roomsBtn {
    padding: 10px;
    width: 45px;
    justify-content: center;
    text-align: center;
  }
}
#roomsBtn {
  background:  #673AB7;
}
.room-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;  /* Espacio entre botones */
    margin: 0px 0;
    padding: 5px;
    background: #222;  /* Fondo oscuro para que resalte */
    border-radius: 8px;
  }

  /* Cada pestaña como botón */
  .room-tab {
    background: #444;  /* Gris oscuro */
    color: white;
    padding: 6px 12px;
    border-radius: 20px;  /* Redondeado como píldora/botón */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: background 0.3s;
  }

  .room-tab:hover {
    background: #666;  /* Hover más claro */
  }

  .room-tab.active {
    background: #007bff;  /* Azul para la activa */
    font-weight: bold;
  }

  .room-tab .close {
    color: #ff6666;  /* Rojo suave */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
  }

  .room-tab .close:hover {
    color: #ff0000;  /* Rojo fuerte al hover */
  }

  #Lobby {
    display:none;
  }

  /* Sidebar cerrada en móvil */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    right: -260px;
    top: 90px;
    width: 260px;
    height: calc(100vh - 90px);
    background: #111;
    z-index: 9999;
    transition: right 0.25s ease;
  }

  .sidebar.open {
    right: 0;
  }

  #toggleSidebar {
    position: fixed;
    top: 95px;
    right: 0;
    z-index: 10000;
    background: #333;
    color: white;
    font-size: 18px;
    padding: 6px 10px;
    border-radius: 6px;
  }
}

div.room-tab[data-room="#Lobby"] {
    display: none !important;
}

.fullscreen-exit-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 99999;
  padding: 8px 12px;
  background: #222;
  color: white;
  border: 1px solid #555;
  border-radius: 6px;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

    #colorPanel:not(.hidden)

 {
        transform: translateX(-30%) scale(0.68) !important;
    }


  .chat-log div {
  margin-bottom: 12px;   /* antes 6px */
  line-height: 1.6;     /* antes 1.4 */
}


#scrollDownBtn {
  position: absolute;
  right: 14px;
  bottom: 86px;          /* encima del input */
  font-size: 26px;
  color: #0af;
  cursor: pointer;
  display: block !important;           /* se controla desde JS */
  z-index: 9999;
  text-shadow: 0 0 6px rgba(0,170,255,0.6);
display: none !important;
}

#scrollDownBtn:hover {
  color: #09c;
  transform: scale(1.15);
}

.chat-msg-image {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-thumb {
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  cursor: pointer;
}


/* ===============================
   CONTENEDOR PRINCIPAL
   =============================== */
.santa-animation {
    position: fixed;
    top: 15%;
    left: -400px;                 /* empieza fuera de pantalla */
    width: 450px;
    height: 180px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    opacity: 0;                   /* oculto por defecto */
    pointer-events: none;         /* NO bloquea el chat */
    z-index: 1;
}

/* ===============================
   ANIMACIÓN DE DESPLAZAMIENTO
   =============================== */
@keyframes slideSanta {
    0%   { left: -400px; }
    100% { left: 110%; }
}

/* ===============================
   GIF DEL VIEJITO PASCUERO
   =============================== */
.santa-gif {
    width: 220px;                 /* ⬅️ tamaño del GIF */
    height: auto;
    z-index: 2;
}

/* ===============================
   RENOS (si los usas)
   =============================== */
.reno {
    font-size: 40px;
    color: #8B4513;
    position: relative;
}

/* movimiento suave de renos */
.reno:nth-of-type(1) {
    animation: renoMove1 3s ease-in-out infinite;
}
.reno:nth-of-type(2) {
    animation: renoMove2 3s ease-in-out infinite;
}
.reno:nth-of-type(3) {
    animation: renoMove3 3s ease-in-out infinite;
}

@keyframes renoMove1 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}
@keyframes renoMove2 {
    0% { transform: translateY(0); }
    50% { transform: translateY(6px); }
    100% { transform: translateY(0); }
}
@keyframes renoMove3 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

.chat {
  position: relative; /* referencia interna */
}

.santa-gif {
  width: 220px;   /* ⬅️ cambia este valor */
  height: auto;   /* mantiene proporción */
}
/* 🎄 Pino decorativo dentro del chat */
/* ======================================================
   🎄 DECORACIÓN NAVIDEÑA – PARTE SUPERIOR DERECHA DEL CHAT
   ====================================================== */

.chat-garland {
  position: absolute;
  top: 10px;              /* parte superior del chat */
  right: 10px;

  width: 140px;
  max-width: 70%;
  height: 180;

  opacity: 0.95;

  pointer-events: none;
  user-select: none;

  z-index: 3;

  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.25));
}

/* 🎄 Pino */
.chat-christmas-tree {
  position: absolute;

  /* debajo de la guirnalda */
  top: 90px;
  right: 14px;

  width: 140px;
  max-width: 32%;
  height: auto;

  opacity: 0.9;

  pointer-events: none;
  user-select: none;

  z-index: 4;

  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

/* ======================
   📱 AJUSTES EN MÓVIL
   ====================== */
@media (max-width: 768px) {

  .chat-garland {
    width: 200px;
    max-width: 85%;
    top: 6px;
    right: 6px;
    opacity: 0.9;
  }

  .chat-christmas-tree {
    width: 110px;
    max-width: 45%;
    top: 75px;
    right: 8px;
    opacity: 0.85;
  }
}

#toggleRequestsBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

/* El icono SIEMPRE visible */
#toggleRequestsBtn .icon {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 768px) {
  #toggleRequestsBtn {
    text-indent: -9999px;   /* oculta el texto */
    white-space: nowrap;
    overflow: hidden;

    width: 44px;
    height: 44px;
    padding: 10px;

    position: relative;
  }

  /* Reinsertar SOLO la campana */
  #toggleRequestsBtn::after {
    content: "🔔";
    text-indent: 0;
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    line-height: 1;
  }
}

@media (max-width: 768px) {
  #togglePrivadosBtn {
    text-indent: -9999px;   /* oculta el texto */
    white-space: nowrap;
    overflow: hidden;

    width: 44px;
    height: 44px;
    padding: 10px;

    position: relative;
  }

  /* Reinsertar SOLO el icono */
  #togglePrivadosBtn::after {
    content: "🔒";          /* icono de privados */
    text-indent: 0;
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    line-height: 1;
  }
}

.yt-popup-header

 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: #f2f2f2;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    user-select: none;
    background: black !important;
}

.temp-featured-message {
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid gold;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.45);
  transition: all 0.25s ease;
}

#filterGenderIcon {
cursor: pointer;
    background: transparent;
    border: 0px;
    padding: 0px;
    align-items: center;
    position: relative;
    /* opacity: 0.45; */
 opacity: 1 !important; 
    color: white;
    font-size: 15px !important;
}

.cam-request-icon {
display: none !important;
}

.fa-video-camera:before, .fa-video:before { 
font-size: 20px;
}


/* ================================
   Header moderno (sin tocar JS)
   - Menú hamburguesa + drawer
   - Chip avatar + nick
   ================================ */

.header-mainbar{
  display:flex !important;
  gap:12px;
  align-items:center;
  width:100%;
  flex-wrap:wrap;
}

/* Chip usuario */
.header-me-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  max-width: 220px;
}
.header-me-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  background:#0d1117;
  border: 1px solid rgba(255,255,255,0.18);
}
.header-me-nick{
  font-weight:800;
  font-size:13px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 160px;
}

/* Si no hay avatar/nick, no estorbar */
.header-me-chip:has(#myHeaderNick:empty) { opacity: 0.85; display:none }
#myHeaderAvatar[src=""]{ display:none; }
#myHeaderNick:empty::after{ content:""; }

/* Botones visibles principales */
.header-primary-btn{
  background:#238636;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.header-primary-btn:hover{ filter: brightness(1.05); }
.header-requests-btn{ background:#1a7bc9; }

/* Logo más compacto */
.header-logo{
  height:58px !important;
  width:auto !important;
  border-radius:10px;
  display:block;
}

/* Hamburger */
.header-drawer-toggle{ display:none; }
.header-hamburger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  cursor:pointer;
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.header-hamburger i{ font-size:18px; }
.header-hamburger:hover{ background: rgba(255,255,255,0.12); }

/* Drawer overlay */
.header-drawer{
  position:fixed;
  inset:0;
  z-index:12000;
  background: rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}

/* Panel */
.header-drawer-inner{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:min(340px, 88vw);
  background: #0f1720;
  border-right: 1px solid rgba(255,255,255,0.12);
  box-shadow: 8px 0 28px rgba(0,0,0,0.45);
  transform: translateX(-102%);
  transition: transform .22s ease;
  padding: 12px 12px 18px;
  overflow-y:auto;
  overscroll-behavior: contain;
}

/* Evitar que el último item quede cortado en móviles (ej: "Ver Perfil") */
.header-drawer-inner{
  padding-bottom: 96px;
}

/* toggle open */
#headerDrawerToggle:checked ~ .header-drawer{
  opacity:1;
  pointer-events:auto;
}
#headerDrawerToggle:checked ~ .header-drawer .header-drawer-inner{
  transform: translateX(0);
}

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}
.drawer-title{ color:#fff; font-weight:900; letter-spacing:.2px; }
.drawer-close{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  cursor:pointer;
  color:#fff;
  font-size:18px;
}

.drawer-section{ padding: 10px 6px; }
.drawer-section-title{
  color: rgba(255,255,255,0.78);
  font-weight:800;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 4px 0 10px;
}

.drawer-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  margin: 8px 0;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.drawer-btn:hover{ background: rgba(255,255,255,0.10); }
.drawer-btn-wide{ justify-content:center; }
.drawer-danger{ background: rgba(218,54,51,0.18) !important; border-color: rgba(218,54,51,0.35) !important; }

/* Asegurar que el dropdown menu se vea bien dentro del drawer */
#generalOptionsMenu.dropdown-menu{
  position: static !important;
  width: 100%;
  margin-top: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#generalOptionsMenu button{
  width:100%;
  margin: 6px 0;
  border-radius: 10px;
}

/* Móvil: compactar header */
@media (max-width: 1099px){
  .header-me-chip{ max-width: 160px; }
  .header-primary-btn{ padding: 10px 10px; }
  .header-logo{ display: none !important; }
}

/* Móvil: Salas + Privados en 2 columnas (en vez de uno abajo del otro) */
@media (max-width: 520px){
  .drawer-chat-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 6px;
  }
  .drawer-chat-grid .drawer-section-title{
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }
  .drawer-chat-grid .drawer-btn{
    justify-content: center;
    margin: 0;
    padding: 12px 10px;
    text-align: center;
  }
  .drawer-chat-grid .drawer-btn .btn-text2{
    font-size: 13px;
    font-weight: 800;
  }
}


/* Drawer user block (avatar + nick) */
.header-drawer .drawer-me{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:10px 12px 6px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.header-drawer .drawer-me-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.35);
  background:#111;
  flex:0 0 44px;
}
.header-drawer .drawer-me-meta{min-width:0;}
.header-drawer .drawer-me-nick{
  font-weight:800;
  font-size:14px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
}
.header-drawer .drawer-me-sub{
  font-size:12px;
  opacity:.75;
  color:#ddd;
  margin-top:2px;
}


/* Ocultar opción 'Ver Perfil' del menú (se abre desde Mi cuenta) */
#viewProfileBtn{display:none !important;}

#replyPreviewClose {
color: white !important;
}

/* ===== REPLY / CITA TIPO WHATSAPP ===== */

/* fila principal del mensaje */
.message-body,
.msg-row,
.chat-line,
.message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

/* columna principal: cita + texto */
.message-main,
.msg-main,
.msg-content,
.chat-content,
.message-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* bloque de cita */
.reply-quote,
.msg-reply,
.reply-box,
.reply-preview-inline {
  display: block;
  margin: 0 0 6px 0;
  padding: 8px 10px;
  border-left: 4px solid #6d8cff;
  border-radius: 10px;
  background: #eef2ff;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* nick del mensaje citado */
.reply-quote .reply-nick,
.msg-reply .reply-nick,
.reply-box .reply-nick {
  display: block;
  font-weight: 700;
  color: #5a78ff;
  margin-bottom: 4px;
  line-height: 1.2;
}

/* texto citado */
.reply-quote .reply-snippet,
.msg-reply .reply-snippet,
.reply-box .reply-snippet {
  display: block;
  color: #222;
  opacity: 0.95;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* texto principal de TU mensaje */
.reply-message-text,
.msg-reply-text,
.reply-text,
.message-text,
.msg-text,
.chat-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
  line-height: 1.35;
}

/* evita que se vea vertical o partido raro */
.reply-message-text *,
.msg-reply-text *,
.reply-text *,
.message-text *,
.msg-text * {
  writing-mode: horizontal-tb !important;
  white-space: inherit;
  word-break: inherit;
  overflow-wrap: inherit;
}

/* acciones a la derecha: reacciones + reply */
.message-actions,
.msg-actions,
.msg-reactions,
.message-reactions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: 10px;
  align-self: flex-start;
  white-space: nowrap;
}

/* botones de reacción / reply */
.message-actions button,
.msg-actions button,
.msg-reactions button,
.message-reactions button {
  flex: 0 0 auto;
}

/* si hay avatar a la izquierda */
.message-avatar,
.msg-avatar,
.chat-avatar {
  flex: 0 0 auto;
}

/* preview de “Respondiendo a…” encima del input */
.reply-compose-bar,
.reply-preview-bar,
#replyPreviewBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 4px solid #6d8cff;
  border-radius: 12px;
  background: #16213d;
  color: #fff;
  box-sizing: border-box;
}

.reply-compose-bar .reply-preview-text,
.reply-preview-bar .reply-preview-text,
#replyPreviewBar .reply-preview-text {
  min-width: 0;
  flex: 1 1 auto;
}

.reply-compose-bar .reply-preview-title,
.reply-preview-bar .reply-preview-title,
#replyPreviewBar .reply-preview-title {
  display: block;
  font-weight: 700;
  color: #6d8cff;
  margin-bottom: 2px;
}

.reply-compose-bar .reply-preview-snippet,
.reply-preview-bar .reply-preview-snippet,
#replyPreviewBar .reply-preview-snippet {
  display: block;
  color: #fff;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* X de cerrar pegada al texto y blanca */
.reply-close-btn,
.reply-cancel-btn,
#replyCloseBtn {
  flex: 0 0 auto;
  margin-left: 6px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* responsive */
@media (max-width: 768px) {
  .message-body,
  .msg-row,
  .chat-line,
  .message-row {
    gap: 8px;
  }

  .message-actions,
  .msg-actions,
  .msg-reactions,
  .message-reactions {
    gap: 6px;
    margin-left: 6px;
  }

  .reply-quote,
  .msg-reply,
  .reply-box {
    padding: 7px 9px;
  }
}
 

.react-btn {
  display: none;
}

.reply-quote {
    display: inline-flex !important;
background: beige !important;
}

.msg-reply-btn {
display: none !important;
}

@media (max-width: 768px) {
  #roomsBtn .rooms-text {
    display: none;
  }
}


@media (max-width: 768px) {
  header {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .camera-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow: visible !important;
  }

      .header-mainbar {
        display: flex !important;
        flex-wrap: nowrap;
        width: 100% !important;
        overflow: visible !important;
        flex-direction: row;
    }
}

#giftModal .modal-content {
  color: #fff;
}

.gift-card:hover {
  transform: translateY(-2px);
  transition: .15s ease;
}

.gift-card.selected {
  border-color: #ddd !important;
}

.gift-card .gift-image {
  image-rendering: auto;
}

@media (max-width: 768px) {
  #roomTabs {
    width: 100% !important;
    display: flex !important;
    gap: 1px !important;
    margin-top: 6px !important;
    padding: 4px 0 !important;
    flex-wrap: wrap !important;
    height: auto !important;
    flex-direction: column !important;
flex-direction: row !important;
  }
}

@media (max-width: 768px) {
  #giftsBtn {
background: transparent;  
  font-size: 0 !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #giftsBtn::before {
    content: "🎁";
    font-size: 24px;
    line-height: 1;
  }

  #giftsBtn .gifts-text,
  #giftsBtn span {
    display: none !important;
  }
}

/* ===== Gifts cards más compactas ===== */
#giftGrid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}

.gift-card {
  padding: 8px !important;
  border-radius: 12px !important;
}

.gift-card img,
.gift-card .gift-image {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  margin: 0 auto 8px auto !important;
  display: block !important;
}

.gift-card .gift-name {
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.gift-card .gift-cost,
.gift-card .gift-status {
  font-size: 11px !important;
}

.gift-card .gift-lock {
  font-size: 14px !important;
  top: 6px !important;
  right: 6px !important;
}

/* móvil: aún más compacto */
@media (max-width: 768px) {
  #giftGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gift-card {
    padding: 7px !important;
    border-radius: 10px !important;
  }

  .gift-card img,
  .gift-card .gift-image {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    margin-bottom: 6px !important;
  }

  .gift-card .gift-name {
    font-size: 11px !important;
  }

  .gift-card .gift-cost,
  .gift-card .gift-status {
    font-size: 10px !important;
  }
}

.gift-room-message,
.gift-private-message {
  animation: giftPopIn .18s ease-out;
}

.gift-room-message img,
.gift-private-message img {
  display: block;
  border-radius: 10px;
}

@keyframes giftPopIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== REGALOS EN SALA - DISEÑO PRO ===== */
.gift-room-message,
.gift-private-message {
  display: block !important;
  width: auto !important;
  max-width: 540px !important;
  margin: 10px 0 !important;
  animation: giftPopIn .22s ease-out;
}

.gift-room-card,
.gift-private-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255,215,0,.18), transparent 35%),
    linear-gradient(135deg, #17110a 0%, #241707 45%, #120d08 100%);
  border: 1px solid rgba(255, 196, 0, 0.45);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 18px rgba(255,166,0,.08);
  position: relative;
  overflow: hidden;
}

.gift-room-card::before,
.gift-private-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 28%, transparent 52%);
  transform: translateX(-120%);
  animation: giftShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.gift-room-thumb,
.gift-private-thumb {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,215,0,.24);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
  padding: 6px;
}

.gift-room-body,
.gift-private-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gift-room-title,
.gift-private-title {
  color: #ddd;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .2px;
}

.gift-room-text,
.gift-private-text {
  color: #fff7ea;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

.gift-room-name {
  color: #ff8a65;
  font-weight: 800;
}

.gift-room-target {
  color: #81d4fa;
  font-weight: 800;
}

.gift-room-giftname,
.gift-private-giftname {
  color: #ffe082;
  font-weight: 800;
}

@keyframes giftPopIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes giftShine {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* móvil */
@media (max-width: 768px) {
  .gift-room-message,
  .gift-private-message {
    max-width: 100% !important;
  }

  .gift-room-card,
  .gift-private-card {
    width: 100%;
    border-radius: 14px;
    padding: 10px 12px;
    gap: 10px;
  }

  .gift-room-thumb,
  .gift-private-thumb {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 12px;
    padding: 4px;
  }

  .gift-room-title,
  .gift-private-title {
    font-size: 13px;
  }

  .gift-room-text,
  .gift-private-text {
    font-size: 12px;
  }
}

/* ===== REGALOS EN SALA - FONDO DORADO ===== */
.gift-room-card,
.gift-private-card {
  background:
    radial-gradient(circle at top left, rgba(255,245,180,.40), transparent 30%),
    radial-gradient(circle at top right, rgba(255,215,0,.22), transparent 28%),
    linear-gradient(135deg, #5a3a00 0%, #b8860b 28%, #f3c54a 52%, #b8860b 74%, #4a2f00 100%) !important;
  border: 1px solid rgba(255, 223, 120, 0.72) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 18px rgba(255,255,255,.08) !important;
}

.gift-room-title,
.gift-private-title {
  color: #fff8d9 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.gift-room-text,
.gift-private-text {
  color: #fffdf3 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.gift-room-name {
  color: #fff3b0 !important;
}

.gift-room-target {
  color: #ffe082 !important;
}

.gift-room-giftname,
.gift-private-giftname {
  color: #ffffff !important;
}

.gift-room-thumb,
.gift-private-thumb {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,241,180,.45) !important;
}

.gift-room-message {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}

/* ===== REGALO EN SALA CON FONDO DORADO DIRECTO EN .gift-room-message ===== */
.gift-room-message {
  display: inline-block !important;
  width: auto !important;
  max-width: 540px !important;
  margin: 10px 0 !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,220,.35), transparent 28%),
    radial-gradient(circle at top right, rgba(255,215,0,.22), transparent 24%),
    linear-gradient(135deg, #8a5a00 0%, #c99212 22%, #ddd 50%, #c99212 78%, #7a4d00 100%) !important;
  border: 1px solid rgba(255, 226, 120, 0.75) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 18px rgba(255,215,0,.28) !important;
  overflow: hidden !important;
  position: relative !important;
}

.gift-room-message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 28%, transparent 52%);
  transform: translateX(-120%);
  animation: giftShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.gift-room-message img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,245,180,.5) !important;
  padding: 4px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

.gift-room-message .gift-room-title,
.gift-room-message .gift-private-title {
  color: #fff9dc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}

.gift-room-message .gift-room-text,
.gift-room-message .gift-private-text {
  color: #fffef7 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.gift-room-message .gift-room-name,
.gift-room-message .gift-room-target,
.gift-room-message .gift-room-giftname,
.gift-room-message .gift-private-giftname {
  color: #fff3b0 !important;
  font-weight: 800 !important;
}

@keyframes giftShine {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@media (max-width: 768px) {
  .gift-room-message {
    display: block !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .gift-room-message img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ===== FORZAR TODO EL MENSAJE DE REGALO A DORADO ===== */
.gift-room-message,
.gift-room-message > div,
.gift-room-message .gift-room-card,
.gift-room-message .gift-private-card {
  background:
    radial-gradient(circle at top left, rgba(255,255,220,.35), transparent 28%),
    radial-gradient(circle at top right, rgba(255,215,0,.22), transparent 24%),
    linear-gradient(135deg, #8a5a00 0%, #c99212 22%, #ddd 50%, #c99212 78%, #7a4d00 100%) !important;
  border: 1px solid rgba(255, 226, 120, 0.75) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 18px rgba(255,215,0,.28) !important;
  border-radius: 0px !important;
}

/* brillo */
.gift-room-message::before,
.gift-room-message > div::before,
.gift-room-message .gift-room-card::before,
.gift-room-message .gift-private-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 28%, transparent 52%);
  transform: translateX(-120%);
  animation: giftShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.gift-room-message,
.gift-room-message > div,
.gift-room-message .gift-room-card,
.gift-room-message .gift-private-card {
  position: relative !important;
  overflow: hidden !important;
}

/* texto */
.gift-room-message,
.gift-room-message * {
  color: #fffef7 !important;
}

.gift-room-message .gift-room-title,
.gift-room-message .gift-private-title {
  color: #fff9dc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}

.gift-room-message .gift-room-name,
.gift-room-message .gift-room-target,
.gift-room-message .gift-room-giftname,
.gift-room-message .gift-private-giftname {
  color: #fff3b0 !important;
  font-weight: 800 !important;
}

/* imagen */
.gift-room-message img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,245,180,.5) !important;
  padding: 4px !important;
}

@keyframes giftShine {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Texto negro en mensajes de regalo */
.gift-room-message,
.gift-room-message *,
.gift-private-message,
.gift-private-message * {
  color: #111 !important;
  text-shadow: none !important;
}

.gift-room-message .gift-room-title,
.gift-room-message .gift-private-title,
.gift-private-message .gift-room-title,
.gift-private-message .gift-private-title {
  color: #111 !important;
  font-weight: 800 !important;
}

.gift-room-message .gift-room-text,
.gift-room-message .gift-private-text,
.gift-private-message .gift-room-text,
.gift-private-message .gift-private-text {
  color: #111 !important;
}

.gift-room-message .gift-room-name,
.gift-room-message .gift-room-target,
.gift-room-message .gift-room-giftname,
.gift-room-message .gift-private-giftname,
.gift-private-message .gift-room-name,
.gift-private-message .gift-room-target,
.gift-private-message .gift-room-giftname,
.gift-private-message .gift-private-giftname {
  color: #111 !important;
  font-weight: 800 !important;
}


/* =========================================================
   CHAT DORADO PREMIUM / ORO + DIAMANTES
   PEGAR AL FINAL DEL style.css
========================================================= */

/* ---------- Base general ---------- */
body {
  background:
    radial-gradient(circle at top, rgba(255,215,0,.08), transparent 35%),
    linear-gradient(180deg, #140f07 0%, #1b1409 45%, #0f0b06 100%) !important;
  color: #111 !important;
}

/* ---------- Header dorado ---------- */
header {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(135deg, #6e4700 0%, #b8860b 25%, #f3cf63 48%, #b8860b 72%, #5b3900 100%) !important;
  border-bottom: 1px solid rgba(255,231,150,.65) !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 20px rgba(255,255,255,.05) !important;
}

/* ---------- Tabs de salas ---------- */
#roomTabs,
.room-tabs {
  background:
    linear-gradient(135deg, rgba(255,215,0,.16), rgba(80,48,0,.85)) !important;
  border-top: 1px solid rgba(255,231,150,.35) !important;
  border-bottom: 1px solid rgba(255,231,150,.35) !important;
}

.room-tab {
  background:
    linear-gradient(135deg, #5b3900 0%, #b8860b 50%, #7a4d00 100%) !important;
  color: #fff9e1 !important;
  border: 1px solid rgba(255,228,138,.45) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.room-tab.active {
  background:
    linear-gradient(135deg, #7e5300 0%, #ddd 50%, #9b6700 100%) !important;
  color: #1a1200 !important;
  font-weight: 800 !important;
  box-shadow:
    0 0 16px rgba(255,215,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

/* ---------- Sidebar usuarios ---------- */
.sidebar {
  background:
    linear-gradient(180deg, #221708 0%, #1a1208 100%) !important;
  border-left: 1px solid rgba(255,223,130,.22) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.03) !important;
}

.sidebar h3 {
  background:
    linear-gradient(135deg, #8a5a00 0%, #d4a72c 55%, #8a5a00 100%) !important;
  color: #1c1200 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
}

.sidebar li,
.user-item {
  background:
    linear-gradient(135deg, #f3dfaa 0%, #f7e8bf 50%, #ead190 100%) !important;
  color: #2b1c00 !important;
  border: 1px solid rgba(170,120,0,.18) !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.08) !important;
}

.sidebar li:hover,
.user-item:hover {
  background:
    linear-gradient(135deg, #ffe9a4 0%, #fff1c7 50%, #f0d37b 100%) !important;
  transform: translateY(-1px);
}

/* ---------- Área de chat ---------- */
.chat-log {
  background:
    radial-gradient(circle at top, rgba(255,223,100,.08), transparent 22%),
    linear-gradient(180deg, #fff8ea 0%, #fff3d8 100%) !important;
  border: 1px solid rgba(214,168,45,.35) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 8px 24px rgba(0,0,0,.08) !important;
  color: #1b1408 !important;
}

/* ---------- Input ---------- */
.chat-input {
  background:
    linear-gradient(180deg, rgba(255,236,177,.25), rgba(120,80,0,.08)) !important;
  border-top: 1px solid rgba(255,222,129,.35) !important;
}

.chat-input input,
.private-input input,
.modal-content input,
textarea,
select {
  background: #fff9ef !important;
  color: #1b1408 !important;
  border: 1px solid rgba(193,144,22,.45) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.05),
    0 2px 6px rgba(255,255,255,.02) !important;
}

/* ---------- Botones oro premium ---------- */
button,
.actions button,
.chat-input button,
#roomsBtn,
#giftsBtn,
#openWebcamPanelBtn,
#toggleRequestsBtn,
#togglePrivadosBtn,
#publicBtn,
#privateBtn,
#offBtn,
#fullScreenBtn,
#refreshRadioBtn,
#advancedBtn,
#uploadAvatarBtn,
#resetAvatarBtn,
.drawer-btn,
.header-primary-btn {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, #704700 0%, #b8860b 30%, #f5cf67 52%, #b8860b 74%, #5a3800 100%) !important;
  color: #1d1300 !important;
  border: 1px solid rgba(255,232,150,.78) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 0 14px rgba(255,255,255,.04) !important;
  position: relative;
  overflow: hidden;
}

button:hover,
.actions button:hover,
.chat-input button:hover,
#roomsBtn:hover,
#giftsBtn:hover,
#openWebcamPanelBtn:hover,
#toggleRequestsBtn:hover,
#togglePrivadosBtn:hover,
#publicBtn:hover,
#privateBtn:hover,
#offBtn:hover,
.drawer-btn:hover,
.header-primary-btn:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.03);
}

/* brillo */
button::before,
.actions button::before,
.chat-input button::before,
#roomsBtn::before,
#giftsBtn::before,
#openWebcamPanelBtn::before,
#toggleRequestsBtn::before,
.drawer-btn::before,
.header-primary-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 30%, transparent 56%);
  transform: translateX(-120%);
  animation: goldShine 3.4s ease-in-out infinite;
  pointer-events: none;
}

/* diamante pequeño premium */
button::after,
#roomsBtn::after,
#giftsBtn::after,
#openWebcamPanelBtn::after,
#toggleRequestsBtn::after,
.drawer-btn::after,
.header-primary-btn::after {
  content: "◆";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 0 6px rgba(255,255,255,.45);
  pointer-events: none;
}

/* ---------- Menús ---------- */
#userMenu,
#adminMenu,
.dropdown-menu,
#generalOptionsMenu,
.header-drawer,
.modal-content {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.04), transparent 24%),
    linear-gradient(180deg, #241808 0%, #171108 100%) !important;
  border: 1px solid rgba(255,226,140,.35) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
  color: #fff4cf !important;
}

#userMenu button,
#adminMenu button,
.dropdown-menu button {
  color: #fff1c0 !important;
  border-bottom: 1px solid rgba(255,226,140,.18) !important;
}

#userMenu button:hover,
#adminMenu button:hover,
.dropdown-menu button:hover {
  background: rgba(255,255,255,.04) !important;
}

/* ---------- Privados ---------- */
.private-window {
  background:
    linear-gradient(180deg, #241808 0%, #171108 100%) !important;
  border: 1px solid rgba(255,226,140,.35) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.32),
    0 0 18px rgba(255,215,0,.10) !important;
}

.private-header {
  background:
    linear-gradient(135deg, #7f5200 0%, #d4a72c 50%, #7f5200 100%) !important;
  color: #1e1400 !important;
  font-weight: 800 !important;
}

.private-log {
  background: linear-gradient(180deg, #fff9ea 0%, #fff1d1 100%) !important;
  color: #1c1408 !important;
}

/* ---------- Radio ---------- */
#radioPlayer {
  background:
    linear-gradient(135deg, #573700 0%, #a77b16 50%, #573700 100%) !important;
  border: 1px solid rgba(255,222,129,.35) !important;
  border-radius: 14px !important;
}

/* ---------- Scroll ---------- */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8d6000, #d8a928) !important;
  border-radius: 10px !important;
}

/* ---------- Mensajes de regalo ---------- */
.gift-room-message,
.gift-private-message {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,220,.35), transparent 28%),
    radial-gradient(circle at top right, rgba(255,215,0,.22), transparent 24%),
    linear-gradient(135deg, #8a5a00 0%, #c99212 22%, #ddd 50%, #c99212 78%, #7a4d00 100%) !important;
  border: 1px solid rgba(255, 226, 120, 0.75) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 18px rgba(255,215,0,.28) !important;
  color: #111 !important;
display: flex !important;
}

/* ---------- Nick panel / color panel ---------- */
#nickColorPanel,
#colorPanel,
.color-panel {
  background:
    linear-gradient(180deg, #241808 0%, #171108 100%) !important;
  border: 1px solid rgba(255,226,140,.3) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}

.panel-title,
.color-panel-title,
.drawer-title,
.drawer-section-title {
  color: #ffe59a !important;
  font-weight: 800 !important;
}

/* ---------- Íconos y badges ---------- */
#paletteIcon,
#filterGenderIcon,
#viewersFilterIcon,
#sortCamIcon,
#filterIcon {
  color: #ffea9a !important;
  text-shadow: 0 0 8px rgba(255,215,0,.18);
}

.pv-top-badge,
#privateInboxTopCount,
#giftsCreditsBadge {
  background: linear-gradient(135deg, #fff4c4, #ddd) !important;
  color: #1a1200 !important;
  border: 1px solid rgba(145,103,0,.35) !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.15) !important;
}

/* ---------- Animación brillo ---------- */
@keyframes goldShine {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ---------- Móvil ---------- */
@media (max-width: 768px) {
  .chat-log {
    border-radius: 12px !important;
  }

  button,
  .actions button,
  .chat-input button,
  #roomsBtn,
  #giftsBtn,
  #openWebcamPanelBtn,
  #toggleRequestsBtn,
  .drawer-btn,
  .header-primary-btn {
    border-radius: 12px !important;
  }

  button::after,
  #roomsBtn::after,
  #giftsBtn::after,
  #openWebcamPanelBtn::after,
  #toggleRequestsBtn::after,
  .drawer-btn::after,
  .header-primary-btn::after {
    top: 4px;
    right: 6px;
    font-size: 8px;
  }
}

/* ===== FIX DEFINITIVO CAMPANA SOLICITUDES EN MÓVIL ===== */
@media (max-width: 768px) {
  /* botón caja fija */
  #toggleRequestsBtn {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    text-indent: 0 !important;
    white-space: normal !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  /* matar cualquier sistema anterior */
  #toggleRequestsBtn::before {
    content: none !important;
    display: none !important;
  }

  #toggleRequestsBtn .icon,
  #toggleRequestsBtn span,
  #toggleRequestsBtn .jaja,
  #toggleRequestsBtn .btn-text,
  #toggleRequestsBtn .btn-text2 {
    display: none !important;
  }

  /* usar SOLO ::after para la campana */
  #toggleRequestsBtn::after {
    content: "🔔" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    font-size: 23px !important;
    line-height: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    top: 0 !important;
    left: 0 !important;
  }
}

@media (max-width: 768px) {
  .buttons-left,
  .header-mainbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
   
    min-height: 64px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .buttons-left::-webkit-scrollbar,
  .header-mainbar::-webkit-scrollbar {
    display: none !important;
  }

  #roomsBtn,
  #giftsBtn,
  #openWebcamPanelBtn,
  #toggleRequestsBtn,
  .header-hamburger {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    position: relative !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  .header-hamburger i,
  .header-hamburger .fa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  #openWebcamPanelBtn::before,
  #toggleRequestsBtn::before,
  #roomsBtn::before,
  #giftsBtn::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
  }

  #openWebcamPanelBtn::before { content: "🎦" !important; font-size: 22px !important; }
  #toggleRequestsBtn::before { content: "🔔" !important; font-size: 22px !important; }
  #roomsBtn::before          { content: "🏠" !important; font-size: 22px !important; }
  #giftsBtn::before          { content: "🎁" !important; font-size: 22px !important; }

  #openWebcamPanelBtn span,
  #toggleRequestsBtn span,
  #roomsBtn span,
  #giftsBtn span:not(#giftsCreditsBadge),
  .rooms-text,
  .gifts-text,
  .btn-text,
  .btn-text2,
  .jaja {
    display: none !important;
  }

  #giftsCreditsBadge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 18px !important;
    z-index: 4 !important;
  }

  #roomTabs {
    margin-top: 6px !important;
  }
}

@media (max-width: 768px) {
  /* fila completa */
  .sidebar h3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px !important; /* texto | 4 iconos */
    align-items: center !important;
    column-gap: 10px !important;
    padding-right: 12px !important;
    overflow: visible !important;
  }

  /* bloque izquierdo: Usuarios + contador */
  .sidebar h3 > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }

  /* contador visible en móvil */
  #userCount {
    display: inline-block !important;
    position: static !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  /* bloque derecho: iconos */
  .sidebar h3 > span:last-child {
    display: grid !important;
    grid-template-columns: repeat(4, 22px) !important;
    justify-content: end !important;
    align-items: center !important;
    gap: 8px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }

  /* base común */
  #filterIcon,
  #sortCamIcon,
  #filterGenderIcon,
  #viewersFilterIcon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    line-height: 1 !important;
    font-size: 18px !important;
    color: #fff3b0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* si la campana usa FontAwesome */
  #filterGenderIcon.fa,
  #filterGenderIcon[class*="fa-"] {
    display: inline-flex !important;
  }

  /* no inventar pseudo iconos */
  #filterGenderIcon::before,
  #filterGenderIcon::after {
    content: none !important;
    display: none !important;
  }

  /* badge de la campana */
  #privateInboxTopCount,
  #pvTotalBadge,
  [data-private-inbox-count] {
    position: absolute !important;
    top: -5px !important;
    right: -6px !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    z-index: 5 !important;
  }
}

 .sidebar h3 > span:last-child {
      gap: 5px !important;
    }


/* ===== CAMPANA SIN EFECTO DE BRILLO / SIN MOVIMIENTO ===== */
#filterGenderIcon,
#filterGenderIcon:hover,
#filterGenderIcon:active {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* apagar cualquier brillo heredado */
#filterGenderIcon::before,
#filterGenderIcon::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transform: none !important;
}

/* si el icono inyectado existe, también quieto */
#filterGenderIcon .mobile-bell-icon,
#filterGenderIcon .desktop-bell-icon {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}
 #camRequestsPanel {
background: white !important;
}

/* ===== RADIO AUDIO DORADO ===== */
#radioAudio {
  width: 220px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, #6f4700 0%, #b8860b 28%, #f5d06a 52%, #b8860b 76%, #5a3800 100%) !important;
  border: 1px solid rgba(255,232,150,.78) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 14px rgba(255,255,255,.04) !important;
}

/* Chrome / Edge / Safari */
#radioAudio::-webkit-media-controls-panel {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(135deg, #6f4700 0%, #b8860b 28%, #f5d06a 52%, #b8860b 76%, #5a3800 100%) !important;
  border-radius: 999px !important;
}

/* botones internos */
#radioAudio::-webkit-media-controls-play-button,
#radioAudio::-webkit-media-controls-mute-button {
  filter: sepia(1) saturate(1.6) hue-rotate(358deg) brightness(1.02) !important;
}

/* barra de tiempo */
#radioAudio::-webkit-media-controls-timeline {
  filter: sepia(.9) saturate(1.4) brightness(1.02) !important;
  border-radius: 999px !important;
}

/* móvil un poco más compacto */
@media (max-width: 768px) {
  #radioAudio {
    width: 190px !important;
    height: 28px !important;
  }
}

@media (max-width: 768px) {
  #mobileUploadImgBtn,
  #uploadImgBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    border-radius: 10px !important;
    padding: 0 !important;
  }
}

/* ===== AUDIO EN SALA / PRIVADOS DORADO ===== */
.chat-log audio,
.private-log audio,
.message audio,
.audio-message audio,
.voice-message audio {
  width: 220px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, #6f4700 0%, #b8860b 28%, #f5d06a 52%, #b8860b 76%, #5a3800 100%) !important;
  border: 1px solid rgba(255,232,150,.78) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 14px rgba(255,255,255,.04) !important;
}

/* Chrome / Edge / Safari */
.chat-log audio::-webkit-media-controls-panel,
.private-log audio::-webkit-media-controls-panel,
.message audio::-webkit-media-controls-panel,
.audio-message audio::-webkit-media-controls-panel,
.voice-message audio::-webkit-media-controls-panel {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(135deg, #6f4700 0%, #b8860b 28%, #f5d06a 52%, #b8860b 76%, #5a3800 100%) !important;
  border-radius: 999px !important;
}

/* botones internos */
.chat-log audio::-webkit-media-controls-play-button,
.chat-log audio::-webkit-media-controls-mute-button,
.private-log audio::-webkit-media-controls-play-button,
.private-log audio::-webkit-media-controls-mute-button,
.message audio::-webkit-media-controls-play-button,
.message audio::-webkit-media-controls-mute-button,
.audio-message audio::-webkit-media-controls-play-button,
.audio-message audio::-webkit-media-controls-mute-button,
.voice-message audio::-webkit-media-controls-play-button,
.voice-message audio::-webkit-media-controls-mute-button {
  filter: sepia(1) saturate(1.6) hue-rotate(358deg) brightness(1.02) !important;
}

/* timeline */
.chat-log audio::-webkit-media-controls-timeline,
.private-log audio::-webkit-media-controls-timeline,
.message audio::-webkit-media-controls-timeline,
.audio-message audio::-webkit-media-controls-timeline,
.voice-message audio::-webkit-media-controls-timeline {
  filter: sepia(.9) saturate(1.4) brightness(1.02) !important;
  border-radius: 999px !important;
}

/* móvil un poco más compacto */
@media (max-width: 768px) {
  .chat-log audio,
  .private-log audio,
  .message audio,
  .audio-message audio,
  .voice-message audio {
    width: 190px !important;
    height: 28px !important;
  }
}

.gift-room-message.is-room {
    justify-content: space-between;
    /* gap: 12px; */
    flex-wrap: nowrap !important;
}


.yt-popup-close{
    cursor: pointer;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    line-height: 1;
    color: white !important;
}

/* =========================================
   FOTO + MICRÓFONO DORADOS
========================================= */

/* Botón/ícono subir foto */
#uploadImgBtn,
#mobileUploadImgBtn,
button[title="Subir Imagen"],
button[title="Subir imagen"],
i[title="Subir imagen"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;

  background:
    radial-gradient(circle at top, rgba(255,215,0,.18), transparent 30%),
    linear-gradient(135deg, #7f5200 0%, #d4a72c 50%, #7f5200 100%) !important;
  border: 1px solid rgba(255, 226, 140, 0.35) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 14px rgba(255,255,255,.04) !important;

  color: #fff1c0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-shadow: 0 0 2px rgba(0,0,0,.45) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

/* Micrófono */
#micIcon,
#mobileMicIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;

  background:
    radial-gradient(circle at top, rgba(255,215,0,.18), transparent 30%),
    linear-gradient(135deg, #7f5200 0%, #d4a72c 50%, #7f5200 100%) !important;
  border: 1px solid rgba(255, 226, 140, 0.35) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 14px rgba(255,255,255,.04) !important;

  color: #fff1c0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-shadow: 0 0 2px rgba(0,0,0,.45) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

/* Si el icono va dentro de button */
#uploadImgBtn i,
#mobileUploadImgBtn i,
#micIcon i,
#mobileMicIcon i {
  color: #fff1c0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* Hover */
#uploadImgBtn:hover,
#mobileUploadImgBtn:hover,
button[title="Subir Imagen"]:hover,
button[title="Subir imagen"]:hover,
i[title="Subir imagen"]:hover,
#micIcon:hover,
#mobileMicIcon:hover {
  transform: translateY(-1px) scale(1.02) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 18px rgba(255,215,0,.18) !important;
}

/* =========================================
   Override golden palette for desktop toolbar
========================================= */
#desktopTools > #paletteIcon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #e17055 !important;
  text-shadow: none !important;
  width: auto !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 2px 5px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  transform: none !important;
  filter: none !important;
  cursor: pointer !important;
}

/* =========================================
   PINCEL DORADO
========================================= */

#paletteIcon,
#mobilePaletteIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;

  background:
    radial-gradient(circle at top, rgba(255,215,0,.18), transparent 30%),
    linear-gradient(135deg, #7f5200 0%, #d4a72c 50%, #7f5200 100%) !important;
  border: 1px solid rgba(255, 226, 140, 0.35) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 14px rgba(255,255,255,.04) !important;

  color: #fff1c0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-shadow: 0 0 2px rgba(0,0,0,.45) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

/* botón móvil con icono dentro */
#mobilePaletteIcon i {
  color: #fff1c0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* hover */
#paletteIcon:hover,
#mobilePaletteIcon:hover {
  transform: translateY(-1px) scale(1.02) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 18px rgba(255,215,0,.18) !important;
}

/* =========================================
   MENÚ MÓVIL ORDENADO Y UNIFORME
========================================= */
@media (max-width: 768px) {
  #mobileToolsMenu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(78px, 1fr)) !important;
    gap: 14px !important;
    padding: 16px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  /* TODOS los items del menú móvil iguales */
  #mobileToolsMenu > button,
  #mobileToolsMenu > i {
    width: 100% !important;
    min-width: 0 !important;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
      radial-gradient(circle at top, rgba(255,215,0,.18), transparent 30%),
      linear-gradient(135deg, #7f5200 0%, #d4a72c 50%, #7f5200 100%) !important;
    border: 1px solid rgba(255, 226, 140, 0.35) !important;
    box-shadow:
      0 6px 18px rgba(0,0,0,.25),
      inset 0 0 0 1px rgba(255,255,255,.08),
      0 0 14px rgba(255,255,255,.04) !important;

    color: #fff1c0 !important;
    text-shadow: 0 0 2px rgba(0,0,0,.45) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
    overflow: hidden !important;
  }

  /* Botones con texto */
  #emojiBtn2,
  #mobileGifBtn {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
  }

  /* Botones/iconos visuales */
  #nickColorBtn2,
  #uploadImgBtn,
  #mobilePaletteIcon,
  #mobileYtIcon,
  #mobileMicIcon {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  /* Si hay icono dentro del botón */
  #mobilePaletteIcon i {
    font-size: 28px !important;
    color: #fff1c0 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Font Awesome dentro de <i> */
  #mobileYtIcon,
  #mobileMicIcon {
    font-size: 28px !important;
    color: #fff1c0 !important;
  }

  /* Hover/touch visual */
  #mobileToolsMenu > button:hover,
  #mobileToolsMenu > i:hover,
  #mobileToolsMenu > button:active,
  #mobileToolsMenu > i:active {
    transform: translateY(-1px) scale(1.02) !important;
    filter: brightness(1.05) !important;
    box-shadow:
      0 8px 22px rgba(0,0,0,.32),
      inset 0 0 0 1px rgba(255,255,255,.10),
      0 0 18px rgba(255,215,0,.18) !important;
  }

  /* Nada de márgenes inline raros */
  #mobileYtIcon[style],
  #mobileMicIcon[style],
  #uploadImgBtn[style] {
    margin: 0 !important;
  }
}


/* ==================================================
   style_optimizado.css
   Cargar DESPUÉS de style.css
   Objetivo: bajar repaints, reflow y jank visual
   ================================================== */

:root {
  --sidebar-width: 250px;
  --panel-shadow: 0 4px 12px rgba(0,0,0,.28);
}

/* --------- Reset de coste visual --------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce animaciones costosas globales */
*, *::before, *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-property: none !important;
  scroll-behavior: auto !important;
}

/* Excepción mínima para elementos que sí necesitan aparecer/desaparecer */
.modal-content,
.dropdown-menu,
.sidebar,
#mobileToolsMenu,
#nickColorPanel,
#colorPanel {
  transition: opacity .12s ease !important;
}

/* --------- Layout principal más estable --------- */
#chatApp,
.app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
}

header {
  flex: 0 0 auto;
}

main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chat-log,
.private-log,
.sidebar {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.chat-log {
  contain: layout paint;
  content-visibility: auto;
  background: #fff;
  color: #111;
  padding: 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: none;
}

.private-log,
.sidebar,
#userList {
  contain: layout paint;
}

/* --------- Sidebar más barata --------- */
.sidebar {
  width: var(--sidebar-width) !important;
  max-height: none;
  height: auto !important;
  padding: 8px;
  box-shadow: none !important;
  border-left: 1px solid #30363d;
}

@media (min-width: 1100px) {
  .chat {
    margin-right: var(--sidebar-width);
  }
}

.sidebar li,
.user-item {
  transition: none !important;
}

.sidebar li:hover,
.user-item:hover {
  background: rgba(35,134,54,.08);
}

/* --------- Input estable --------- */
.chat-input {
  position: relative !important;
  bottom: auto !important;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  margin-top: 8px;
  padding: 8px;
  background: #0d1117;
  z-index: 20 !important;
}

.chat-input input,
#messageInput {
  flex: 1 1 auto;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  font-size: 15px !important;
}

.chat-input button,
.tool-btn,
#emojiBtn,
#gifBtn,
#ytIcon,
#uploadImgBtn,
#paletteIcon,
#mobileToolsBtn {
  transform: none !important;
  box-shadow: none !important;
}

/* --------- Paneles y menús: sin escalados raros --------- */
#mobileToolsMenu,
#colorPanel,
#nickColorPanel,
.dropdown-menu,
#adminMenu,
#userMenu,
.private-window,
.camera-window,
.webcam-floating,
.modal-content,
.img-modal-content {
  box-shadow: var(--panel-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#mobileToolsMenu,
#colorPanel,
#nickColorPanel {
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

#mobileToolsMenu {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 70px !important;
  display: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 45vh !important;
  overflow-y: auto !important;
}

#mobileToolsMenu.show,
#mobileToolsMenu:not(.hidden) {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#colorPanel,
#nickColorPanel {
  position: fixed !important;
  left: auto !important;
  right: 12px !important;
  bottom: 76px !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
  padding: 12px !important;
}

.color-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.color-btn,
.nick-color-box,
#nickColorPanel .nick-color-box {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  transform: none !important;
  box-shadow: none !important;
}

.color-btn:hover,
.nick-color-box:hover,
#nickColorPanel .nick-color-box:hover,
.chat-thumb:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* --------- Modales e imagen --------- */
.img-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0,0,0,.78);
}

.modal,
#avatarModal,
.img-modal {
  contain: layout paint;
}

/* --------- Mensajes: menos coste visual --------- */
.chat-log div {
  margin-bottom: 4px;
}

.chat-image,
.chat-image-thumb,
.chat-log img.gif-message,
.private-log img.gif-message,
.gif-message {
  max-width: 140px !important;
  max-height: 140px !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover;
}

.message strong,
.message em,
.message span[style*="underline"] {
  color: inherit !important;
}

/* --------- Regalos y efectos premium: sin brillo infinito --------- */
.gift-room-message::before,
.gift-room-message > div::before,
.gift-room-message .gift-room-card::before,
.gift-room-message .gift-private-card::before {
  content: none !important;
}

.gift-room-message,
.gift-room-message > div,
.gift-room-message .gift-room-card,
.gift-room-message .gift-private-card {
  overflow: visible !important;
}

/* --------- Ventanas privadas y cámaras --------- */
.private-window,
.camera-window {
  overflow: hidden;
  contain: layout paint;
}

.private-header,
.cam-header {
  cursor: move;
  user-select: none;
}

/* --------- Móvil --------- */
@media (max-width: 1099px) {
  main {
    flex-direction: column;
  }

  .sidebar {
    width: min(280px, 80vw) !important;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto !important;
    transform: none !important;
  }

  .sidebar:not(.open) {
    display: none !important;
  }

  .sidebar.open {
    display: block !important;
  }

  .chat {
    margin-right: 0;
  }

  .chat-log {
    content-visibility: visible;
    contain: layout paint;
    padding-bottom: calc(var(--keyboard-inset-height, 0px) + 12px) !important;
  }

  .chat-input {
    padding: 8px;
  }

  #mobileToolsMenu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    bottom: 74px !important;
  }

  #colorPanel,
  #nickColorPanel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 42vh !important;
  }

  .camera-window {
    width: 60vw;
    height: 30vh;
  }
}

/* --------- Accesibilidad / rendimiento del sistema --------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 769px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  #chatApp,
  .app {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  main {
    display: flex !important;
    flex-direction: row-reverse !important;
    height: calc(100vh - 0px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .chat {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    margin-right: 0 !important;
  }

  .chat-log,
  #chatLog {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .chat-input {
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  /* sidebar: gestionado por max-width:1099px y min-width:1100px */
}

/* ===== FIX MENSAJES CORTADOS ABAJO ===== */

/* Escritorio */
@media (min-width: 769px) {
  .chat {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .chat-log,
  #chatLog {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 90px !important; /* espacio para el input */
    box-sizing: border-box !important;
  }

  .chat-input {
    position: relative !important;
    bottom: auto !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    z-index: 20 !important;
  }
}

/* Móvil */
@media (max-width: 768px) {
  .chat-log,
  #chatLog {
    padding-bottom: 110px !important;
    box-sizing: border-box !important;
  }

  .chat-input {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
  }
}


/* ===== FIX FINAL: MENSAJES CORTADOS ABAJO ===== */

/* Escritorio */
@media (min-width: 769px) {
  .chat {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .chat-log,
  #chatLog {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 90px !important;
    box-sizing: border-box !important;
  }

  .chat-input {
    position: relative !important;
    bottom: auto !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    z-index: 20 !important;
  }
}

/* Móvil */
@media (max-width: 768px) {
  .chat-log,
  #chatLog {
    padding-bottom: 110px !important;
    box-sizing: border-box !important;
  }

  .chat-input {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
  }
}

/* ===== AJUSTE FINO: sin hueco abajo + más separación entre mensajes ===== */

.chat-log .message,
#chatLog .message,
.chat-log > div,
#chatLog > div {
  margin-bottom: 14px !important;
  line-height: 1.45 !important;
}

.chat-log .message:last-child,
#chatLog .message:last-child,
.chat-log > div:last-child,
#chatLog > div:last-child {
  margin-bottom: 6px !important;
}

.chat-log img,
#chatLog img {
  vertical-align: middle;
}

@media (min-width: 769px) {
  .chat {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .chat-log,
  #chatLog {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 16px !important;
    box-sizing: border-box !important;
    align-content: flex-start !important;
  }

  .chat-input {
    position: relative !important;
    bottom: auto !important;
    margin-top: 8px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    z-index: 20 !important;
  }
}

@media (max-width: 768px) {
  .chat-log,
  #chatLog {
    padding-bottom: 72px !important;
    box-sizing: border-box !important;
  }

  .chat-input {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    margin-top: 6px !important;
  }
}

/* ============================================================
   FIX FINAL: colorPanel + nickColorPanel siempre visibles
   ============================================================ */
#colorPanel,
#nickColorPanel {
  position: fixed !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
  padding: 12px !important;
}

@media (max-width: 1099px) {
  #colorPanel,
  #colorPanel:not(.hidden),
  #nickColorPanel,
  #nickColorPanel:not(.hidden) {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 72px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 99999 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  #colorPanel .color-row,
  #nickColorPanel .color-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .color-btn,
  .nick-color-box,
  #colorPanel .nick-color-box,
  #nickColorPanel .nick-color-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 30px !important;
    border-radius: 8px !important;
    transform: none !important;
  }
}

@media (min-width: 1100px) {
  #colorPanel {
    right: 264px !important;
    left: auto !important;
    bottom: 76px !important;
    width: 360px !important;
    max-width: 360px !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #nickColorPanel {
    right: 264px !important;
    left: auto !important;
    bottom: 76px !important;
    width: 440px !important;
    max-width: 440px !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #colorPanel .color-row,
  #nickColorPanel .color-row {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .color-btn,
  .nick-color-box,
  #colorPanel .nick-color-box,
  #nickColorPanel .nick-color-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .chat {
    margin-right: 250px !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }
}

/* Modal z-index above header-drawer */
.modal { z-index: 20000 !important; }
.modal-content { pointer-events: auto !important; }

/* Chat log padding fix - solo móvil, NO iPad */
@media (max-width: 768px) {
  .chat-log, #chatLog { padding-bottom: 8px !important; box-sizing: border-box !important; }
  .chat-input { position: sticky !important; bottom: 0 !important; z-index: 30 !important; }
}


/* =========================================================
   TEMA DARK -- chat blanco, botones negros, letras doradas
   ========================================================= */

body.theme-dark {
  background: #111 !important;
  color: #ccc !important;
}

body.theme-dark header {
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 50%, #0a0a0a 100%) !important;
  border-bottom: 2px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.7) !important;
}

body.theme-dark button,
body.theme-dark .actions button,
body.theme-dark .chat-input button,
body.theme-dark #roomsBtn,
body.theme-dark #giftsBtn,
body.theme-dark #openWebcamPanelBtn,
body.theme-dark #toggleRequestsBtn,
body.theme-dark #togglePrivadosBtn,
body.theme-dark #publicBtn,
body.theme-dark #privateBtn,
body.theme-dark #offBtn,
body.theme-dark #fullScreenBtn,
body.theme-dark #refreshRadioBtn,
body.theme-dark #advancedBtn,
body.theme-dark #uploadAvatarBtn,
body.theme-dark #resetAvatarBtn,
body.theme-dark .drawer-btn,
body.theme-dark .header-primary-btn {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%) !important;
  color: #ddd !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important;
}

body.theme-dark button:hover,
body.theme-dark .drawer-btn:hover,
body.theme-dark .header-primary-btn:hover {
  background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 50%, #3a3a3a 100%) !important;
  border-color: #888 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}

body.theme-dark #roomTabs,
body.theme-dark .room-tabs {
  background: #0e0e0e !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.theme-dark .room-tab {
  background: linear-gradient(135deg, #1a1a1a, #252525) !important;
  color: #bbb !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

body.theme-dark .room-tab.active {
  background: linear-gradient(135deg, #333, #444) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 0 10px rgba(255,255,255,.05) !important;
}

body.theme-dark .sidebar {
  background: #0e0e0e !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
}

body.theme-dark .sidebar h3 {
  background: linear-gradient(135deg, #444, #555) !important;
  color: #eee !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

body.theme-dark .sidebar li,
body.theme-dark .user-item {
  background: #d8d8d8 !important;
  color: #222 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  box-shadow: none !important;
}

body.theme-dark .sidebar li:hover,
body.theme-dark .user-item:hover {
  background: #e0e0e0 !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* CHAT LOG: fondo BLANCO, letras negras */
body.theme-dark .chat-log,
body.theme-dark #chatLog {
  background: #f0f0f0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #111 !important;
}

body.theme-dark .chat-input {
  background: #0e0e0e !important;
}

body.theme-dark .chat-input input,
body.theme-dark #messageInput {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

body.theme-dark .chat-input input::placeholder {
  color: rgba(0,0,0,.4) !important;
}

body.theme-dark .header-drawer-inner {
  background: #0d0d0d !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

body.theme-dark .drawer-section-title {
  color: #888 !important;
}

body.theme-dark .drawer-me {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
}

body.theme-dark .drawer-me-nick { color: #ddd !important; }
body.theme-dark .drawer-me-sub  { color: #888 !important; }

body.theme-dark .modal-content {
  background: linear-gradient(180deg, #111 0%, #161616 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #ddd !important;
}

body.theme-dark #userMenu,
body.theme-dark #adminMenu,
body.theme-dark .dropdown-menu,
body.theme-dark #generalOptionsMenu {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

body.theme-dark #userMenu button,
body.theme-dark #adminMenu button,
body.theme-dark .dropdown-menu button {
  color: #ccc !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

body.theme-dark #userMenu button:hover,
body.theme-dark #adminMenu button:hover {
  background: rgba(255,255,255,.05) !important;
}

body.theme-dark #colorPanel,
body.theme-dark #nickColorPanel,
body.theme-dark .color-panel {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #ccc !important;
}

body.theme-dark .color-panel-title,
body.theme-dark .color-group {
  color: #bbb !important;
  border-color: rgba(255,255,255,.08) !important;
  background: #0d0d0d !important;
}

body.theme-dark .private-window {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

body.theme-dark .private-header {
  background: linear-gradient(135deg, #1a1a1a, #252525) !important;
  color: #ddd !important;
}

body.theme-dark .private-log {
  background: #ffffff !important;
  color: #111 !important;
}

body.theme-dark #radioPlayer {
  background: #0d0d0d !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

body.theme-dark ::-webkit-scrollbar { width: 5px; }
body.theme-dark ::-webkit-scrollbar-track { background: #0a0a0a; }
body.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.3);
}

/* ============================================================
   TEMA DARK: nicks negros en lista → forzar blanco
   Cubre color inline y clases que puedan poner el nick negro
   ============================================================ */

/* Cualquier span/texto dentro de user-item que sea negro → blanco */
body.theme-dark .sidebar li span[style*="color: #000"],
body.theme-dark .sidebar li span[style*="color:#000"],
body.theme-dark .sidebar li span[style*="color: black"],
body.theme-dark .sidebar li span[style*="color:black"],
body.theme-dark .sidebar li span[style*="color: rgb(0, 0, 0)"],
body.theme-dark .sidebar li span[style*="color:rgb(0,0,0)"],
body.theme-dark .user-item span[style*="color: #000"],
body.theme-dark .user-item span[style*="color:#000"],
body.theme-dark .user-item span[style*="color: black"],
body.theme-dark .user-item span[style*="color:black"],
body.theme-dark .user-item span[style*="color: rgb(0, 0, 0)"],
body.theme-dark .user-item span[style*="color:rgb(0,0,0)"] {
  color: #e8e8e8 !important;
}

/* Colores muy oscuros genéricos (negro, casi negro) */
/* Pastel sidebar: dark text readable on light background - no override needed */

/* Fallback general: si ningún color inline lo aclara, el item ya tiene color:#e8e8e8 heredado */
body.theme-dark .user-item .nick:not([style*="color"]),
body.theme-dark .sidebar li span:not([style*="color"]) {
  color: #444 !important;
}


/* ============================================================
   FIX IPAD / TABLET (769px - 1099px)
   - Sidebar oculto por defecto, toggle visible
   - Chat-input siempre visible en la parte inferior
   - Sin sidebar encima del chat
   ============================================================ */
@media (min-width: 769px) and (max-width: 1099px) {

  /* Mostrar botón toggle de sidebar */
  .sidebar-toggle,
  #toggleSidebar,
  #toggleSidebar.sidebar-toggle {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 99999 !important;
    font-size: 22px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Sidebar oculto por defecto — fuera de pantalla */
  .sidebar:not(.open) {
    position: fixed !important;
    top: 0 !important;
    right: -280px !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 999 !important;
    display: block !important;
    transition: right 0.3s ease !important;
  }

  /* Sidebar abierto */
  .sidebar.open {
    right: 0 !important;
  }

  /* Chat ocupa todo el ancho — sin margen para sidebar */
  .chat {
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Barra de escritura siempre visible abajo */
  .chat-input {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    display: flex !important;
    flex-shrink: 0 !important;
    background: #0d1117 !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
  }

  #messageInput {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* CLAVE: el chat debe ser flex column con altura fija */
  .chat {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* chat-log crece pero deja espacio al input */
  .chat-log,
  #chatLog {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  /* input NUNCA se encoge */
  .chat-input {
    flex: 0 0 auto !important;
    min-height: 52px !important;
    max-height: 80px !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 50 !important;
    display: flex !important;
    width: 100% !important;
    background: #0d1117 !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   FIX DEFINITIVO IPAD — barra de escritura SIEMPRE VISIBLE
   Safari en iPad no calcula 100vh correctamente con overflow hidden
   Forzar position:fixed al fondo del viewport
   ============================================================ */
@media (min-width: 769px) and (max-width: 1099px) {
  /* El contenedor principal debe dejar espacio abajo para el input */
  .app,
  #chatApp {
    padding-bottom: 60px !important;
    box-sizing: border-box !important;
  }

  /* Barra de escritura anclada al fondo del viewport, siempre visible */
  .chat-input {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #0d1117 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 56px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,.3) !important;
  }

  /* El input de texto dentro de la barra */
  #messageInput,
  .chat-input input[type="text"] {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Botón Enviar y hamburguesa visibles */
  .chat-input button,
  #mobileToolsBtn,
  #sendBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* El chat-log debe reservar espacio abajo para no quedar tapado por el input fixed */
  .chat-log,
  #chatLog {
    padding-bottom: 110px !important;
    box-sizing: border-box !important;
  }
}

/* iOS Safari específico: usar safe-area-inset para evitar notch/home bar */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (min-width: 769px) and (max-width: 1099px) {
    .chat-input {
      padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
  }
}


/* ============================================================
   FIX FINAL IPAD - ultimo mensaje visible arriba del input
   ============================================================ */
@media (min-width: 769px) and (max-width: 1099px) {
  body .chat-log,
  body #chatLog,
  html body .chat-log,
  html body #chatLog {
    padding-bottom: 70px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }
}

#chatLog {
padding-bottom: 20px !important;
}

@media (min-width: 769px) and (max-width: 1099px) {
    .chat {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        min-height: 0 !important;
        /* padding-top: 30px; */
    }
}
/* ===== CHAT THEMES SYSTEM ===== */
:root {
  --theme-bg: #0d1117;
  --theme-header: #161b22;
  --theme-modal: #1f5581;
  --theme-modal-gradient: linear-gradient(135deg, #1f5581, #1a4a73);
  --theme-sidebar: #161b22;
  --theme-sidebar-li-bg: #b8d7f0;
  --theme-sidebar-li-text: #000;
  --theme-sidebar-li-active: #2196F3;
  --theme-chat-bg: #ffffff;
  --theme-chat-text: #000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #2196F3;
  --theme-btn-text: #fff;
  --theme-btn-primary: #236186;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #b0b8c4;
  --theme-accent: #2196F3;
  --theme-accent-glow: rgba(33,150,243,0.3);
  --theme-border: rgba(255,255,255,0.1);
  --theme-msg-bubble: #e8f0fe;
  --theme-msg-bubble-self: #d1e8ff;
  --theme-private-bg: #1f5581;
  --theme-cam-border: #2196F3;
}

/* === DORADO (Default - Original) === */
body.theme-dorado {
  --theme-bg: #0d1117;
  --theme-header: linear-gradient(180deg, #161b22, #1a3050);
  --theme-modal: #1f5581;
  --theme-modal-gradient: linear-gradient(135deg, #1f5581, #1a4a73);
  --theme-sidebar: #0e1520;
  --theme-sidebar-li-bg: #b8d7f0;
  --theme-sidebar-li-text: #000;
  --theme-sidebar-li-active: #2196F3;
  --theme-chat-bg: #ffffff;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #2196F3;
  --theme-btn-text: #fff;
  --theme-btn-primary: #2196F3;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #b0b8c4;
  --theme-accent: #2196F3;
  --theme-accent-glow: rgba(33,150,243,0.3);
  --theme-border: rgba(255,255,255,0.1);
  --theme-msg-bubble: #e8f0fe;
  --theme-msg-bubble-self: #d1e8ff;
  --theme-private-bg: #1f5581;
  --theme-cam-border: #2196F3;
}

/* === OSCURO (Dark) === */
body.theme-oscuro {
  --theme-bg: #111;
  --theme-header: linear-gradient(180deg, #0a0a0a, #141414);
  --theme-modal: #111;
  --theme-modal-gradient: linear-gradient(135deg, #111, #1a1a1a);
  --theme-sidebar: #0e0e0e;
  --theme-sidebar-li-bg: #d8d8d8;
  --theme-sidebar-li-text: #222;
  --theme-sidebar-li-active: #666;
  --theme-chat-bg: #f0f0f0;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #444;
  --theme-btn-text: #eee;
  --theme-btn-primary: #555;
  --theme-text-primary: #ddd;
  --theme-text-secondary: #888;
  --theme-accent: #888;
  --theme-accent-glow: rgba(136,136,136,0.2);
  --theme-border: rgba(255,255,255,0.1);
  --theme-msg-bubble: #222;
  --theme-msg-bubble-self: #333;
  --theme-private-bg: #1a1a1a;
  --theme-cam-border: #666;
}

/* === CYBER NEON === */
body.theme-cyber {
  --theme-bg: #0a0a0f;
  --theme-header: linear-gradient(180deg, #0a0a12, #0f0f1a);
  --theme-modal: #0a0a0f;
  --theme-modal-gradient: linear-gradient(135deg, #0a0a12, #0f1020);
  --theme-sidebar: #0a0f0d;
  --theme-sidebar-li-bg: #c8ffe8;
  --theme-sidebar-li-text: #0a3a20;
  --theme-sidebar-li-active: #00ff88;
  --theme-chat-bg: #e8fff0;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #00ff88;
  --theme-btn-text: #0a0a0f;
  --theme-btn-primary: #00ff88;
  --theme-text-primary: #00ff88;
  --theme-text-secondary: #008844;
  --theme-accent: #00ff88;
  --theme-accent-glow: rgba(0,255,136,0.25);
  --theme-border: rgba(0,255,136,0.2);
  --theme-msg-bubble: #0f0f1a;
  --theme-msg-bubble-self: #0a1a10;
  --theme-private-bg: #0d0d15;
  --theme-cam-border: #00ff88;
}

/* === MEDIANOCHE (Midnight) === */
body.theme-medianoche {
  --theme-bg: #070b1a;
  --theme-header: linear-gradient(180deg, #050816, #0a1025);
  --theme-modal: #070b1a;
  --theme-modal-gradient: linear-gradient(135deg, #070b1a, #0d1530);
  --theme-sidebar: #0a0f1a;
  --theme-sidebar-li-bg: #c8dbff;
  --theme-sidebar-li-text: #1a2a50;
  --theme-sidebar-li-active: #3b82f6;
  --theme-chat-bg: #e0ecff;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #3b82f6;
  --theme-btn-text: #fff;
  --theme-btn-primary: #3b82f6;
  --theme-text-primary: #c8ddf5;
  --theme-text-secondary: #4a6a8f;
  --theme-accent: #3b82f6;
  --theme-accent-glow: rgba(59,130,246,0.25);
  --theme-border: rgba(59,130,246,0.2);
  --theme-msg-bubble: #0d1530;
  --theme-msg-bubble-self: #0a1540;
  --theme-private-bg: #0a1025;
  --theme-cam-border: #3b82f6;
}

/* === ROSA (Pink) === */
body.theme-rosa {
  --theme-bg: #1a0a14;
  --theme-header: linear-gradient(180deg, #1a0a14, #2a1020);
  --theme-modal: #1a0a14;
  --theme-modal-gradient: linear-gradient(135deg, #2a1020, #3a1530);
  --theme-sidebar: #1a0f15;
  --theme-sidebar-li-bg: #ffcce5;
  --theme-sidebar-li-text: #4a1030;
  --theme-sidebar-li-active: #e91e8c;
  --theme-chat-bg: #ffe8f2;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #e91e8c;
  --theme-btn-text: #fff;
  --theme-btn-primary: #e91e8c;
  --theme-text-primary: #f7a8c4;
  --theme-text-secondary: #8a4a6a;
  --theme-accent: #e91e8c;
  --theme-accent-glow: rgba(233,30,140,0.25);
  --theme-border: rgba(233,30,140,0.2);
  --theme-msg-bubble: #2a1020;
  --theme-msg-bubble-self: #3a1530;
  --theme-private-bg: #2a1020;
  --theme-cam-border: #e91e8c;
}

/* === LAVANDA (Lavender) === */
body.theme-lavanda {
  --theme-bg: #0f0a1a;
  --theme-header: linear-gradient(180deg, #0f0a1a, #1a1030);
  --theme-modal: #0f0a1a;
  --theme-modal-gradient: linear-gradient(135deg, #1a1030, #251840);
  --theme-sidebar: #0f0d1a;
  --theme-sidebar-li-bg: #e0d0f0;
  --theme-sidebar-li-text: #3a2050;
  --theme-sidebar-li-active: #9b59b6;
  --theme-chat-bg: #f0e6ff;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #9b59b6;
  --theme-btn-text: #fff;
  --theme-btn-primary: #9b59b6;
  --theme-text-primary: #c8a2f0;
  --theme-text-secondary: #6a4a8a;
  --theme-accent: #9b59b6;
  --theme-accent-glow: rgba(155,89,182,0.25);
  --theme-border: rgba(155,89,182,0.2);
  --theme-msg-bubble: #1a1030;
  --theme-msg-bubble-self: #251840;
  --theme-private-bg: #1a1030;
  --theme-cam-border: #9b59b6;
}

/* === ATARDECER (Sunset) === */
body.theme-atardecer {
  --theme-bg: #1a0f0a;
  --theme-header: linear-gradient(180deg, #1a0f0a, #2a1510);
  --theme-modal: #1a0f0a;
  --theme-modal-gradient: linear-gradient(135deg, #2a1510, #3a2015);
  --theme-sidebar: #1a100c;
  --theme-sidebar-li-bg: #ffe0c0;
  --theme-sidebar-li-text: #4a2a10;
  --theme-sidebar-li-active: #e67e22;
  --theme-chat-bg: #fff0e0;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #e67e22;
  --theme-btn-text: #fff;
  --theme-btn-primary: #e67e22;
  --theme-text-primary: #f0b088;
  --theme-text-secondary: #8a5a3a;
  --theme-accent: #e67e22;
  --theme-accent-glow: rgba(230,126,34,0.25);
  --theme-border: rgba(230,126,34,0.2);
  --theme-msg-bubble: #2a1510;
  --theme-msg-bubble-self: #3a2015;
  --theme-private-bg: #2a1510;
  --theme-cam-border: #e67e22;
}

/* === ESMERALDA (Emerald - diseño propio) ===
   Verde jade profundo con acentos esmeralda.
   Chat claro verde suave: fresco, natural y legible. */
body.theme-esmeralda {
  --theme-bg: #0a1712;
  --theme-header: linear-gradient(180deg, #06120d, #0d211a);
  --theme-modal: #0a1712;
  --theme-modal-gradient: linear-gradient(135deg, #0d211a, #123528);
  --theme-sidebar: #08160f;
  --theme-sidebar-li-bg: #c8f5e0;
  --theme-sidebar-li-text: #0a3a26;
  --theme-sidebar-li-active: #10b981;
  --theme-chat-bg: #e8fff5;
  --theme-chat-text: #000000;
  --theme-input-bg: #ffffff;
  --theme-input-text: #000000;
  --theme-input-border: #cccccc;
  --theme-btn-bg: #10b981;
  --theme-btn-text: #fff;
  --theme-btn-primary: #10b981;
  --theme-text-primary: #a7e8cd;
  --theme-text-secondary: #4a8a6f;
  --theme-accent: #10b981;
  --theme-accent-glow: rgba(16,185,129,0.25);
  --theme-border: rgba(16,185,129,0.2);
  --theme-msg-bubble: #0d241c;
  --theme-msg-bubble-self: #123528;
  --theme-private-bg: #0d241c;
  --theme-cam-border: #10b981;
}

/* ===== Apply theme variables to elements ===== */
body[class*="theme-"]:not(.theme-dorado) {
  background: var(--theme-bg) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .modal-content,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #loginModal .modal-content {
  background: var(--theme-modal-gradient) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) header,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #topBar {
  background: var(--theme-header) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .sidebar,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #sidebar {
  background: var(--theme-sidebar) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .sidebar li,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #sidebar li,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .user-item {
  background: var(--theme-sidebar-li-bg) !important;
  color: var(--theme-sidebar-li-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .sidebar li.active,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #sidebar li.active {
  background: var(--theme-sidebar-li-active) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-log,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #chatLog {
  background: var(--theme-chat-bg) !important;
  color: var(--theme-chat-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-input input,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #messageInput {
  background: var(--theme-input-bg) !important;
  color: var(--theme-input-text) !important;
  border-color: var(--theme-input-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-input button,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #sendBtn {
  background: var(--theme-btn-primary) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .actions button,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #loginModal .actions button {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
  border: 1px solid var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-window,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-win {
  background: var(--theme-private-bg) !important;
  border-color: var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .camera-window,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .cam-win {
  border-color: var(--theme-cam-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .msg-bubble {
  background: var(--theme-msg-bubble) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .msg-bubble.self {
  background: var(--theme-msg-bubble-self) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado),
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) * {
  --accent-color: var(--theme-accent);
}

/* ===== COMPREHENSIVE THEME OVERRIDES ===== */
/* Force ALL interactive elements to use theme accent color for non-dark themes */

/* --- Header & drawer buttons --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-primary-btn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-btn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-requests-btn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-hamburger {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
  border: 1px solid var(--theme-accent) !important;
  box-shadow: 0 4px 12px var(--theme-accent-glow) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-primary-btn:hover,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-btn:hover {
  filter: brightness(1.15) !important;
}

/* Remove gold shimmer/diamond from themed buttons — preserve ::before on header-primary-btn for mobile emoji icons */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-primary-btn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-btn::before,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-btn::after {
  content: none !important;
}

/* --- All main header button IDs (Webcam, VIP, Salas, Regalos, etc.) --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #giftsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openWebcamPanelBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #publicBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #privateBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #offBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #fullScreenBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #fullScreenExitBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #refreshRadioBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #advancedBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #uploadAvatarBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #resetAvatarBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #webcamMainBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #generalOptionsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openGeneralOptionsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #camRequestsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #manageStatusBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #darkThemeBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openPrivateBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleJoinLeaveBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #scrollDownBtn {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
  border: 1px solid var(--theme-accent) !important;
}

/* Remove gold shimmer/diamond from these IDs — but preserve ::before on mobile where it carries the emoji icon */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomsBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #giftsBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openWebcamPanelBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosBtn::after {
  content: none !important;
}

/* --- Generic button override (catches everything else) --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) button:not(.color-btn):not(.nick-color-box):not(.accept-request-btn):not(.reject-request-btn):not(.cam-close):not(.close-request-btn):not(.accept):not(.reject):not(.privateBtn-off):not(.pv-minimize):not(.min-btn):not(.close-btn):not(.viewer-row button) {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
  border-color: var(--theme-accent) !important;
}

/* Remove gold shimmer/diamond from generic buttons — preserve ::before for header buttons that use emoji icons on mobile */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) button:not(.color-btn):not(.header-primary-btn):not(.header-hamburger)::before,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) button:not(.color-btn)::after {
  content: none !important;
}

/* --- Room tabs --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomTabs,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .room-tabs {
  background: var(--theme-bg) !important;
  border-top: 1px solid var(--theme-border) !important;
  border-bottom: 1px solid var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .room-tab {
  background: var(--theme-sidebar-li-bg) !important;
  color: var(--theme-sidebar-li-text) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: none !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .room-tab:hover {
  filter: brightness(1.1) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .room-tab.active {
  background: var(--theme-accent) !important;
  color: var(--theme-btn-text) !important;
  border: 1px solid var(--theme-accent) !important;
  box-shadow: 0 0 10px var(--theme-accent-glow) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .room-tab .close {
  color: var(--theme-accent) !important;
}

/* --- Sidebar --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .sidebar h3 {
  background: var(--theme-accent) !important;
  color: var(--theme-btn-text) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* --- Chat input area --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-input {
  background: var(--theme-bg) !important;
  border-top: 1px solid var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-input input,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #messageInput {
  background: var(--theme-input-bg) !important;
  color: var(--theme-input-text) !important;
  border: 1px solid var(--theme-input-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-input input::placeholder {
  color: var(--theme-text-secondary) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-input button,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #sendBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .send-button {
  background: var(--theme-btn-primary) !important;
  color: var(--theme-btn-text) !important;
  border-color: var(--theme-accent) !important;
}

/* --- Tool/format buttons in input area --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .tool-btn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .format-btn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #emojiBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #emojiBtn2,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #gifBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileGifBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #ytIcon,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #uploadImgBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #uploadImgBtnMobile,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #paletteIcon,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileToolsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #boldBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #italicBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #underlineBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #nickColorBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #nickColorBtn2,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #fontPickerBtn {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
  border-color: var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .format-btn.active {
  outline: 2px solid var(--theme-accent) !important;
  background: var(--theme-accent) !important;
}

/* --- Menus --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #userMenu,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #adminMenu,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .dropdown-menu,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #generalOptionsMenu {
  background: var(--theme-bg) !important;
  border: 1px solid var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #userMenu button,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #adminMenu button,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .dropdown-menu button {
  color: var(--theme-text-primary) !important;
  border-bottom: 1px solid var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #userMenu button:hover,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #adminMenu button:hover {
  background: var(--theme-accent-glow) !important;
}

/* --- Modals --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .modal-content,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #loginModal .modal-content,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .room-modal,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .settings-modal {
  background: var(--theme-modal-gradient) !important;
  border: 1px solid var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .modal-content input,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #loginModal .modal-content input {
  background: var(--theme-input-bg) !important;
  color: var(--theme-input-text) !important;
  border: 1px solid var(--theme-input-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #advancedModal .tabs button {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #advancedModal .tabs button:hover {
  background: var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomModal .enterRoomBtn {
  background: var(--theme-accent) !important;
  color: var(--theme-btn-text) !important;
}

/* --- Webcam / camera windows --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .webcam-floating {
  background: var(--theme-bg) !important;
  border: 2px solid var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .wf-header button {
  background: var(--theme-accent) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .wf-requests {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .wf-public {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .wf-buttons button {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .camera-controls button {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .cam-header {
  background: var(--theme-accent) !important;
  color: var(--theme-btn-text) !important;
}

/* --- Private windows --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-header {
  background: var(--theme-bg) !important;
  border-bottom: 1px solid var(--theme-accent) !important;
  color: var(--theme-text-primary) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-header button {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-input {
  background: var(--theme-bg) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-input button {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-input input {
  background: var(--theme-input-bg) !important;
  color: var(--theme-input-text) !important;
  border-color: var(--theme-input-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .private-log {
  background: var(--theme-chat-bg) !important;
  color: var(--theme-chat-text) !important;
}

/* --- Radio player --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #radioPlayer {
  background: var(--theme-bg) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #radioNowPlaying {
  color: var(--theme-accent) !important;
}

/* --- Zoom buttons --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #zoomInBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #zoomOutBtn {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}

/* --- Mention box --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .mention-item:hover,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .mention-item.active {
  background: var(--theme-accent) !important;
  color: var(--theme-btn-text) !important;
}

/* --- Color panels --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #colorPanel,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #nickColorPanel,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .color-panel {
  background: var(--theme-bg) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .color-group {
  background: var(--theme-sidebar-li-bg) !important;
  border-color: var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .color-panel-title {
  color: var(--theme-accent) !important;
}

/* --- Mobile tools menu --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileToolsMenu {
  background: var(--theme-bg) !important;
  border: 1px solid var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileToolsMenu button {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}

/* --- Drawer / sidebar --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-drawer-inner {
  background: var(--theme-sidebar) !important;
  border-right: 1px solid var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-section-title {
  color: var(--theme-text-secondary) !important;
}

/* --- VIP modal --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #vipAccessModal .modal-content {
  background: var(--theme-modal-gradient) !important;
  border: 1px solid var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #vipPaypalMonthly,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #vipPaypalAnnual {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
  border: 1px solid var(--theme-accent) !important;
}

/* --- Scrollbar --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) ::-webkit-scrollbar-thumb {
  background: var(--theme-accent) !important;
  border-radius: 4px;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) ::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.2) !important;
}

/* --- Links only (NOT chat-nick — role/gender colors must be preserved) --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) a:not(.chat-nick),
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .nick-link {
  color: var(--theme-accent) !important;
}

/* Chat nicks keep their role/gender colors (pink=female, blue=male, etc) */
/* Do NOT override .chat-nick color — inline styles from JS set the correct role/gender color */

/* --- Text selection --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) ::selection {
  background: var(--theme-accent-glow) !important;
}

/* --- Drawer me section --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-me {
  background: var(--theme-accent-glow) !important;
  border: 1px solid var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-me-nick {
  color: var(--theme-accent) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .drawer-me-sub {
  color: var(--theme-text-secondary) !important;
}

/* --- Accept/Reject buttons (keep semantic colors but tinted with accent) --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .accept {
  background: var(--theme-accent) !important;
  color: var(--theme-btn-text) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .reject,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #privateBtn {
  background: #da3633 !important;
  color: #fff !important;
}

/* --- Override inline styles set by JS (togglePrivadosBtn etc.) --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosBtn[style*="background"] {
  background: var(--theme-btn-bg) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosBtn[style*="background"] {
  background: var(--theme-accent) !important;
}

/* --- General text color --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) {
  color: var(--theme-text-primary) !important;
}

/* --- Sidebar toggle button --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleSidebar {
  background: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
}

/* --- Avatar option border --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .avatar-option:hover {
  border-color: var(--theme-accent) !important;
}

/* --- Chat log --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .chat-log,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #chatLog {
  background: var(--theme-chat-bg) !important;
  color: var(--theme-chat-text) !important;
  border-color: var(--theme-border) !important;
}

/* --- Header --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) header {
  background: var(--theme-header) !important;
}

/* --- Sidebar --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .sidebar,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #sidebar {
  background: var(--theme-sidebar) !important;
  border-color: var(--theme-border) !important;
}

/* --- Request windows --- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .request-window {
  background: var(--theme-bg) !important;
  border-color: var(--theme-border) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .request-header {
  background: var(--theme-sidebar) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

/* ===== MOBILE: Restore emoji icons on header buttons for new themes ===== */
@media (max-width: 768px) {
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openWebcamPanelBtn::before,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn::before,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomsBtn::before,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #giftsBtn::before,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn::before,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-hamburger::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
  }
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openWebcamPanelBtn::before { content: "🎦" !important; font-size: 22px !important; }
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn::before { content: "🔔" !important; font-size: 22px !important; }
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomsBtn::before          { content: "🏠" !important; font-size: 22px !important; }
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #giftsBtn::before          { content: "🎁" !important; font-size: 22px !important; }
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn::before { content: "👑" !important; font-size: 22px !important; }

  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openWebcamPanelBtn span,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn span,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomsBtn span:not(#roomsUsersBadge),
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #giftsBtn span:not(#giftsCreditsBadge),
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn span,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .rooms-text,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .gifts-text,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .btn-text,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .btn-text2,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .jaja {
    display: none !important;
  }

  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #roomsBtn,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #giftsBtn,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openWebcamPanelBtn,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn,
  body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) .header-hamburger {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    position: relative !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
}

/* ===== END COMPREHENSIVE THEME OVERRIDES ===== */


body.theme-dark {
  background: #111 !important;
  color: #ccc !important;
}

body.theme-dark header {
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 50%, #0a0a0a 100%) !important;
  border-bottom: 2px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.7) !important;
}

body.theme-dark button,
body.theme-dark .actions button,
body.theme-dark .chat-input button,
body.theme-dark #roomsBtn,
body.theme-dark #giftsBtn,
body.theme-dark #openWebcamPanelBtn,
body.theme-dark #toggleRequestsBtn,
body.theme-dark #togglePrivadosBtn,
body.theme-dark #publicBtn,
body.theme-dark #privateBtn,
body.theme-dark #offBtn,
body.theme-dark #fullScreenBtn,
body.theme-dark #refreshRadioBtn,
body.theme-dark #advancedBtn,
body.theme-dark #uploadAvatarBtn,
body.theme-dark #resetAvatarBtn,
body.theme-dark .drawer-btn,
body.theme-dark .header-primary-btn {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%) !important;
  color: #ddd !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important;
}

body.theme-dark button:hover,
body.theme-dark .drawer-btn:hover,
body.theme-dark .header-primary-btn:hover {
  background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 50%, #3a3a3a 100%) !important;
  border-color: #888 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}

body.theme-dark #roomTabs,
body.theme-dark .room-tabs {
  background: #0e0e0e !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.theme-dark .room-tab {
  background: linear-gradient(135deg, #1a1a1a, #252525) !important;
  color: #bbb !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

body.theme-dark .room-tab.active {
  background: linear-gradient(135deg, #333, #444) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 0 10px rgba(255,255,255,.05) !important;
}

body.theme-dark .sidebar {
  background: #0e0e0e !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
}

body.theme-dark .sidebar h3 {
  background: linear-gradient(135deg, #444, #555) !important;
  color: #eee !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

body.theme-dark .sidebar li,
body.theme-dark .user-item {
  background: #161616 !important;
  color: #e8e8e8;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  box-shadow: none !important;
}

body.theme-dark .sidebar li:hover,
body.theme-dark .user-item:hover {
  background: #e0e0e0 !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* CHAT LOG: fondo BLANCO, letras negras */
body.theme-dark .chat-log,
body.theme-dark #chatLog {
  background: #f0f0f0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #111;
}

body.theme-dark .chat-input {
  background: #0e0e0e !important;
}

body.theme-dark .chat-input input,
body.theme-dark #messageInput {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

body.theme-dark .chat-input input::placeholder {
  color: rgba(0,0,0,.4) !important;
}

body.theme-dark .header-drawer-inner {
  background: #0d0d0d !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

body.theme-dark .drawer-section-title {
  color: #888 !important;
}

body.theme-dark .drawer-me {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
}

body.theme-dark .drawer-me-nick { color: #ddd !important; }
body.theme-dark .drawer-me-sub  { color: #888 !important; }

body.theme-dark .modal-content {
  background: linear-gradient(180deg, #111 0%, #161616 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #ddd !important;
}

body.theme-dark #userMenu,
body.theme-dark #adminMenu,
body.theme-dark .dropdown-menu,
body.theme-dark #generalOptionsMenu {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

body.theme-dark #userMenu button,
body.theme-dark #adminMenu button,
body.theme-dark .dropdown-menu button {
  color: #ccc !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

body.theme-dark #userMenu button:hover,
body.theme-dark #adminMenu button:hover {
  background: rgba(255,255,255,.05) !important;
}

body.theme-dark #colorPanel,
body.theme-dark #nickColorPanel,
body.theme-dark .color-panel {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #ccc !important;
}

body.theme-dark .color-panel-title,
body.theme-dark .color-group {
  color: #bbb !important;
  border-color: rgba(255,255,255,.08) !important;
  background: #0d0d0d !important;
}

body.theme-dark .private-window {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

body.theme-dark .private-header {
  background: linear-gradient(135deg, #1a1a1a, #252525) !important;
  color: #ddd !important;
}

body.theme-dark .private-log {
  background: #ffffff !important;
  color: #111 !important;
}

body.theme-dark #radioPlayer {
  background: #0d0d0d !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

body.theme-dark ::-webkit-scrollbar { width: 5px; }
body.theme-dark ::-webkit-scrollbar-track { background: #0a0a0a; }
body.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.3);
}

/* ============================================================
   TEMA DARK: nicks sin color → color visible por género
   ============================================================ */

/* Pastel sidebar in dark theme: black text is now visible, no color override needed */
body.theme-dark .user-item span[style*="color: black"],
body.theme-dark .user-item span[style*="color:black"],
body.theme-dark .sidebar li span[style*="color: black"],
body.theme-dark .sidebar li span[style*="color:black"] {
  color: #3a3520 !important;
}

/* Fallback: nicks without inline color */
body.theme-dark .user-item .nick:not([style*="color"]),
body.theme-dark .sidebar li span:not([style*="color"]) {
  color: #444;
}


/* ============================================================
   FIX IPAD / TABLET (769px - 1099px)
   - Sidebar oculto por defecto, toggle visible
   - Chat-input siempre visible en la parte inferior
   - Sin sidebar encima del chat
   ============================================================ */
@media (min-width: 769px) and (max-width: 1099px) {

  /* Mostrar botón toggle de sidebar */
  .sidebar-toggle,
  #toggleSidebar,
  #toggleSidebar.sidebar-toggle {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 99999 !important;
    font-size: 22px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Sidebar oculto por defecto — fuera de pantalla */
  .sidebar:not(.open) {
    position: fixed !important;
    top: 0 !important;
    right: -280px !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 999 !important;
    display: block !important;
    transition: right 0.3s ease !important;
  }

  /* Sidebar abierto */
  .sidebar.open {
    right: 0 !important;
  }

  /* Chat ocupa todo el ancho — sin margen para sidebar */
  .chat {
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Barra de escritura siempre visible abajo */
  .chat-input {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    display: flex !important;
    flex-shrink: 0 !important;
    background: #0d1117 !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
  }

  #messageInput {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* CLAVE: el chat debe ser flex column con altura fija */
  .chat {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* chat-log crece pero deja espacio al input */
  .chat-log,
  #chatLog {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  /* input NUNCA se encoge */
  .chat-input {
    flex: 0 0 auto !important;
    min-height: 52px !important;
    max-height: 80px !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 50 !important;
    display: flex !important;
    width: 100% !important;
    background: #0d1117 !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   FIX DEFINITIVO IPAD — barra de escritura SIEMPRE VISIBLE
   Safari en iPad no calcula 100vh correctamente con overflow hidden
   Forzar position:fixed al fondo del viewport
   ============================================================ */
@media (min-width: 769px) and (max-width: 1099px) {
  /* El contenedor principal debe dejar espacio abajo para el input */
  .app,
  #chatApp {
    padding-bottom: 60px !important;
    box-sizing: border-box !important;
  }

  /* Barra de escritura anclada al fondo del viewport, siempre visible */
  .chat-input {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #0d1117 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 56px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,.3) !important;
  }

  /* El input de texto dentro de la barra */
  #messageInput,
  .chat-input input[type="text"] {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Botón Enviar y hamburguesa visibles */
  .chat-input button,
  #mobileToolsBtn,
  #sendBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* El chat-log debe reservar espacio abajo para no quedar tapado por el input fixed */
  .chat-log,
  #chatLog {
    padding-bottom: 110px !important;
    box-sizing: border-box !important;
  }
}

/* iOS Safari específico: usar safe-area-inset para evitar notch/home bar */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (min-width: 769px) and (max-width: 1099px) {
    .chat-input {
      padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
  }
}


/* ============================================================
   FIX FINAL IPAD - ultimo mensaje visible arriba del input
   ============================================================ */
@media (min-width: 769px) and (max-width: 1099px) {
  body .chat-log,
  body #chatLog,
  html body .chat-log,
  html body #chatLog {
    padding-bottom: 70px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }
}

#chatLog {
padding-bottom: 20px !important;
}

@media (min-width: 769px) and (max-width: 1099px) {
    .chat {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        min-height: 0 !important;
        /* padding-top: 30px; */
    }
}


/* ============================================================
   FIX: Cam icons visible on mobile
   Ensures .cam-wrap and .cam-icon are never hidden on mobile
   ============================================================ */
@media (max-width: 1099px) {
  .cam-wrap {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .cam-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .cam-icon::before {
    display: inline-block !important;
    visibility: visible !important;
    font-weight: 900 !important;
    font-family: "Font Awesome 6 Free" !important;
  }

  /* Ensure userList doesn't clip cam icons */
  #userList {
    overflow: visible !important;
  }

  /* Ensure sidebar li items don't clip their children */
  .sidebar li {
    overflow: visible !important;
  }
}


/* ===== FULLSCREEN THEME SELECTOR ===== */
.theme-selector-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #0d1117;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(33,150,243,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(155,89,182,0.06) 0%, transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
}
.theme-selector-fullscreen.hidden {
  display: none !important;
}

.theme-selector-inner {
  width: 100%;
  max-width: 900px;
  margin: auto;
}

.theme-selector-header {
  text-align: center;
  margin-bottom: 36px;
}
.theme-selector-header h1 {
  color: #e6edf3;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
}
.theme-selector-header p {
  color: #8b949e;
  font-size: 16px;
  margin: 0;
}

.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Theme Card Large */
.theme-card-large {
  cursor: pointer;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.08);
  padding: 10px;
  background: rgba(255,255,255,0.03);
  transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
  text-align: center;
}
.theme-card-large.selected {
  border-color: #58a6ff !important;
  box-shadow: 0 0 20px rgba(88,166,255,0.2);
}
.theme-card-large:hover {
  border-color: #58a6ff;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(88,166,255,0.15);
}
.theme-card-large:active {
  transform: translateY(-2px);
}

.theme-card-info {
  margin-top: 10px;
}
.theme-card-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #e6edf3;
}
.theme-card-tag {
  display: inline-block;
  font-size: 11px;
  color: #8b949e;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 2px 10px;
  margin-top: 4px;
}

/* Large Preview */
.theme-preview-large {
  width: 100%;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.theme-preview-large .tp-header {
  height: 18px;
  width: 100%;
}
.theme-preview-large .tp-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.theme-preview-large .tp-sidebar {
  width: 30%;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-preview-large .tp-user {
  height: 10px;
  border-radius: 3px;
  opacity: 0.5;
}
.theme-preview-large .tp-chat {
  flex: 1;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-preview-large .tp-msg {
  height: 12px;
  border-radius: 4px;
  width: 70%;
  opacity: 0.4;
}
.theme-preview-large .tp-msg.self {
  width: 55%;
  margin-left: auto;
  opacity: 0.6;
}
.theme-preview-large .tp-input {
  height: 18px;
  width: 100%;
}

/* === THEME PREVIEW COLORS === */

/* Dorado (Default) */
.theme-preview-dorado { background: linear-gradient(135deg, #0d1117, #162030); }
.theme-preview-dorado .tp-header { background: linear-gradient(90deg, #1a3050, #2196F3); }
.theme-preview-dorado .tp-sidebar { background: #0e1a28; }
.theme-preview-dorado .tp-user { background: #b8d7f0; }
.theme-preview-dorado .tp-msg { background: #ffffff; }
.theme-preview-dorado .tp-msg.self { background: #e0ecff; }
.theme-preview-dorado .tp-input { background: #fff; border-top: 1px solid #b8d7f0; }

/* Oscuro */
.theme-preview-oscuro { background: #1a1a1a; }
.theme-preview-oscuro .tp-header { background: linear-gradient(90deg, #0a0a0a, #141414); }
.theme-preview-oscuro .tp-sidebar { background: #0e0e0e; }
.theme-preview-oscuro .tp-user { background: #d8d8d8; }
.theme-preview-oscuro .tp-msg { background: #f0f0f0; }
.theme-preview-oscuro .tp-msg.self { background: #e0e0e0; }
.theme-preview-oscuro .tp-input { background: #fff; border-top: 1px solid #ccc; }

/* Cyber */
.theme-preview-cyber { background: #0d0d15; }
.theme-preview-cyber .tp-header { background: linear-gradient(90deg, #0a0a12, #0f0f1a); }
.theme-preview-cyber .tp-sidebar { background: #08080d; }
.theme-preview-cyber .tp-user { background: #c8ffe8; }
.theme-preview-cyber .tp-msg { background: #c8ffe8; }
.theme-preview-cyber .tp-msg.self { background: #a0f0d0; }
.theme-preview-cyber .tp-input { background: #fff; border-top: 1px solid #ccc; }

/* Medianoche */
.theme-preview-medianoche { background: #0a1025; }
.theme-preview-medianoche .tp-header { background: linear-gradient(90deg, #050816, #0a1025); }
.theme-preview-medianoche .tp-sidebar { background: #050816; }
.theme-preview-medianoche .tp-user { background: #c8dbff; }
.theme-preview-medianoche .tp-msg { background: #c8dbff; }
.theme-preview-medianoche .tp-msg.self { background: #a8c4f0; }
.theme-preview-medianoche .tp-input { background: #fff; border-top: 1px solid #ccc; }

/* Rosa */
.theme-preview-rosa { background: #1f0c18; }
.theme-preview-rosa .tp-header { background: linear-gradient(90deg, #1a0a14, #2a1020); }
.theme-preview-rosa .tp-sidebar { background: #1a0a14; }
.theme-preview-rosa .tp-user { background: #ffcce5; }
.theme-preview-rosa .tp-msg { background: #ffcce5; }
.theme-preview-rosa .tp-msg.self { background: #ffaad0; }
.theme-preview-rosa .tp-input { background: #fff; border-top: 1px solid #ccc; }

/* Lavanda */
.theme-preview-lavanda { background: #120c1f; }
.theme-preview-lavanda .tp-header { background: linear-gradient(90deg, #0f0a1a, #1a1030); }
.theme-preview-lavanda .tp-sidebar { background: #0f0a1a; }
.theme-preview-lavanda .tp-user { background: #e0d0f0; }
.theme-preview-lavanda .tp-msg { background: #e0d0f0; }
.theme-preview-lavanda .tp-msg.self { background: #c8b0e0; }
.theme-preview-lavanda .tp-input { background: #fff; border-top: 1px solid #ccc; }

/* Atardecer */
.theme-preview-atardecer { background: #1f120c; }
.theme-preview-atardecer .tp-header { background: linear-gradient(90deg, #1a0f0a, #2a1510); }
.theme-preview-atardecer .tp-sidebar { background: #1a0a0a; }
.theme-preview-atardecer .tp-user { background: #ffe0c0; }
.theme-preview-atardecer .tp-msg { background: #ffe0c0; }
.theme-preview-atardecer .tp-msg.self { background: #ffd0a0; }
.theme-preview-atardecer .tp-input { background: #fff; border-top: 1px solid #ccc; }

/* Esmeralda */
.theme-preview-esmeralda { background: #0a1712; }
.theme-preview-esmeralda .tp-header { background: linear-gradient(90deg, #06120d, #0d211a); }
.theme-preview-esmeralda .tp-sidebar { background: #06150f; }
.theme-preview-esmeralda .tp-user { background: #c8f5e0; }
.theme-preview-esmeralda .tp-msg { background: #c8f5e0; }
.theme-preview-esmeralda .tp-msg.self { background: #a0e8c8; }
.theme-preview-esmeralda .tp-input { background: #fff; border-top: 1px solid #ccc; }

/* Responsive */
@media (max-width: 768px) {
  .theme-selector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .theme-selector-header h1 {
    font-size: 24px;
  }
  .theme-selector-header p {
    font-size: 14px;
  }
  .theme-preview-large {
    height: 130px;
  }
  .theme-selector-inner {
    max-width: 100%;
  }
}

@media (max-width: 400px) {
  .theme-selector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .theme-preview-large {
    height: 100px;
  }
  .theme-card-large {
    padding: 6px;
    border-radius: 10px;
  }
  .theme-card-name {
    font-size: 13px;
  }
  .theme-card-tag {
    font-size: 10px;
  }
}


/* ===== Chat Popup Ad ===== */
.chat-popup-ad {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  touch-action: manipulation;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.chat-popup-ad.hidden {
  display: none !important;
}

.chat-popup-ad-inner {
  position: relative;
  background: rgba(13,13,26,0.97);
  border: 1px solid #ffd700;
  border-radius: 12px;
  padding: 6px;
  padding-top: 32px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  max-width: 400px;
  width: 90vw;
}

.chat-popup-ad-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  background: #e74c3c;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  line-height: 1;
  padding: 0;
  transition: background 0.2s;
  pointer-events: auto !important;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  -webkit-tap-highlight-color: transparent;
}

.chat-popup-ad-close:hover {
  background: #c0392b;
}

.chat-popup-ad-content {
  width: 100%;
  min-height: 90px;
  max-height: 250px;
  overflow: hidden;
  border-radius: 8px;
}

/* Desktop sizing */
@media (min-width: 769px) {
  .chat-popup-ad-inner {
    max-width: 500px;
  }
  .chat-popup-ad-content {
    min-height: 90px;
    max-height: 300px;
  }
}

/* Mobile sizing */
@media (max-width: 768px) {
  .chat-popup-ad-inner {
    max-width: 320px;
  }
  .chat-popup-ad-content {
    min-height: 60px;
    max-height: 200px;
  }
}
}

/* ===== Hide sidebar ad on mobile/tablet ===== */
@media (max-width: 1099px) {
  .ad-desktop-only,
  #adSidebar {
    display: none !important;
  }
}

#uploadImgBtn {
display: none !important;
}







/* ======================== NORMAS MODAL (sobre salas) ======================== */
.normas-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 30000 !important;
  background: rgba(0,0,0,0.6) !important;
  pointer-events: auto !important;
}
.normas-overlay.hidden { display: none !important; }
.normas-overlay:not(.hidden) { display: flex !important; }

.normas-modal-box {
  background: linear-gradient(145deg, #0d0d1a, #1a1a2e) !important;
  border-radius: 14px !important;
  width: 420px !important;
  max-width: 94% !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  box-shadow: 0 14px 50px rgba(0,0,0,0.7), 0 0 30px rgba(233,69,96,0.2) !important;
  border: 2px solid #e94560 !important;
  color: #e0e0e0 !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  animation: normasPop 0.25s ease-out !important;
  pointer-events: auto !important;
}

@keyframes normasPop {
  from { opacity: 0; transform: scale(0.93); }
  to { opacity: 1; transform: scale(1); }
}

.normas-modal-header {
  text-align: center !important;
  padding: 14px 16px 10px !important;
  background: linear-gradient(180deg, rgba(233,69,96,0.1) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(233,69,96,0.3) !important;
  flex-shrink: 0 !important;
}

.normas-header-icon-box {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 6px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e94560, #c23152) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(233,69,96,0.4) !important;
}
.normas-header-icon-box i { font-size: 18px !important; color: #fff !important; }

.normas-modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #e94560 !important;
  margin: 0 !important;
}

.normas-modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(233,69,96,0.3) transparent !important;
}
.normas-modal-body::-webkit-scrollbar { width: 5px !important; }
.normas-modal-body::-webkit-scrollbar-track { background: transparent !important; }
.normas-modal-body::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3) !important; border-radius: 3px !important; }

.normas-section {
  margin-bottom: 10px !important;
  padding: 10px 12px !important;
  background: rgba(17,17,34,0.9) !important;
  border-radius: 8px !important;
  border-left: 3px solid #e94560 !important;
}
.normas-section-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e94560 !important;
  margin-bottom: 6px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid rgba(233,69,96,0.15) !important;
}
.normas-section-head i { font-size: 13px !important; }

.normas-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.normas-items li {
  position: relative !important;
  padding: 4px 0 4px 14px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #ccc !important;
}
.normas-items li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #e94560 !important;
}
.normas-items li strong { color: #eee !important; }

.normas-notice {
  padding: 8px 10px !important;
  background: rgba(233,69,96,0.06) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(233,69,96,0.12) !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #999 !important;
  text-align: center !important;
}
.normas-notice i { color: #e94560 !important; margin-right: 4px !important; }
.normas-notice a { color: #e94560 !important; text-decoration: underline !important; }

.normas-modal-footer {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  border-top: 1px solid rgba(233,69,96,0.3) !important;
  background: #0d0d1a !important;
  flex-shrink: 0 !important;
}

.normas-btn-accept {
  flex: 2 !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #e94560, #c23152) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(233,69,96,0.3) !important;
  transition: all 0.15s !important;
}
.normas-btn-accept:hover {
  background: linear-gradient(135deg, #f05a73, #d63f55) !important;
  transform: translateY(-1px) !important;
}

.normas-btn-decline {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #777 !important;
  transition: all 0.15s !important;
}
.normas-btn-decline:hover {
  border-color: rgba(233,69,96,0.3) !important;
  color: #e94560 !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .normas-modal-box { 
    width: 96% !important; 
    max-height: 82vh !important; 
    border-radius: 12px !important;
  }
  .normas-modal-title { font-size: 15px !important; }
  .normas-section-head { font-size: 12px !important; }
  .normas-items li { font-size: 11px !important; padding: 3px 0 3px 12px !important; }
  .normas-notice { font-size: 10px !important; }
  .normas-btn-accept { font-size: 13px !important; padding: 9px 12px !important; }
  .normas-btn-decline { font-size: 12px !important; padding: 9px 12px !important; }
  .normas-modal-header { padding: 10px 12px 8px !important; }
  .normas-modal-body { padding: 8px 10px !important; }
  .normas-modal-footer { padding: 10px 12px !important; }
}

@media (min-width: 768px) {
  .normas-modal-box { 
    width: 460px !important; 
    max-height: 75vh !important;
  }
}

/* ======================== NORMAS MODAL - Theme Protection ======================== */
/* Ensure normas modal keeps its style across ALL themes */
body.theme-dark .normas-modal-box,
body.theme-oscuro .normas-modal-box,
body.theme-cyber .normas-modal-box,
body.theme-medianoche .normas-modal-box,
body.theme-rosa .normas-modal-box,
body.theme-lavanda .normas-modal-box,
body.theme-atardecer .normas-modal-box,
body[class*="theme-"] .normas-modal-box {
  background: linear-gradient(145deg, #0d0d1a, #1a1a2e) !important;
  border: 2px solid #e94560 !important;
  color: #e0e0e0 !important;
  box-shadow: 0 14px 50px rgba(0,0,0,0.7), 0 0 30px rgba(233,69,96,0.2) !important;
}

body.theme-dark .normas-overlay,
body.theme-oscuro .normas-overlay,
body.theme-cyber .normas-overlay,
body.theme-medianoche .normas-overlay,
body.theme-rosa .normas-overlay,
body.theme-lavanda .normas-overlay,
body.theme-atardecer .normas-overlay,
body[class*="theme-"] .normas-overlay {
  background: rgba(0,0,0,0.6) !important;
  z-index: 30000 !important;
}

body.theme-dark .normas-modal-title,
body.theme-oscuro .normas-modal-title,
body.theme-cyber .normas-modal-title,
body.theme-medianoche .normas-modal-title,
body.theme-rosa .normas-modal-title,
body.theme-lavanda .normas-modal-title,
body.theme-atardecer .normas-modal-title,
body[class*="theme-"] .normas-modal-title {
  color: #e94560 !important;
}

body.theme-dark .normas-header-icon-box,
body.theme-oscuro .normas-header-icon-box,
body.theme-cyber .normas-header-icon-box,
body.theme-medianoche .normas-header-icon-box,
body.theme-rosa .normas-header-icon-box,
body.theme-lavanda .normas-header-icon-box,
body.theme-atardecer .normas-header-icon-box,
body[class*="theme-"] .normas-header-icon-box {
  background: linear-gradient(135deg, #e94560, #c23152) !important;
  box-shadow: 0 4px 14px rgba(233,69,96,0.4) !important;
}

body.theme-dark .normas-section,
body.theme-oscuro .normas-section,
body.theme-cyber .normas-section,
body.theme-medianoche .normas-section,
body.theme-rosa .normas-section,
body.theme-lavanda .normas-section,
body.theme-atardecer .normas-section,
body[class*="theme-"] .normas-section {
  background: rgba(17,17,34,0.9) !important;
  border-left: 3px solid #e94560 !important;
}

body.theme-dark .normas-section-head,
body.theme-oscuro .normas-section-head,
body.theme-cyber .normas-section-head,
body.theme-medianoche .normas-section-head,
body.theme-rosa .normas-section-head,
body.theme-lavanda .normas-section-head,
body.theme-atardecer .normas-section-head,
body[class*="theme-"] .normas-section-head {
  color: #e94560 !important;
  border-bottom: 1px solid rgba(233,69,96,0.15) !important;
}

body.theme-dark .normas-items li,
body.theme-oscuro .normas-items li,
body.theme-cyber .normas-items li,
body.theme-medianoche .normas-items li,
body.theme-rosa .normas-items li,
body.theme-lavanda .normas-items li,
body.theme-atardecer .normas-items li,
body[class*="theme-"] .normas-items li {
  color: #ccc !important;
}

body.theme-dark .normas-items li::before,
body.theme-oscuro .normas-items li::before,
body.theme-cyber .normas-items li::before,
body.theme-medianoche .normas-items li::before,
body.theme-rosa .normas-items li::before,
body.theme-lavanda .normas-items li::before,
body.theme-atardecer .normas-items li::before,
body[class*="theme-"] .normas-items li::before {
  background: #e94560 !important;
}

body.theme-dark .normas-items li strong,
body.theme-oscuro .normas-items li strong,
body.theme-cyber .normas-items li strong,
body.theme-medianoche .normas-items li strong,
body.theme-rosa .normas-items li strong,
body.theme-lavanda .normas-items li strong,
body.theme-atardecer .normas-items li strong,
body[class*="theme-"] .normas-items li strong {
  color: #eee !important;
}

body.theme-dark .normas-notice,
body.theme-oscuro .normas-notice,
body.theme-cyber .normas-notice,
body.theme-medianoche .normas-notice,
body.theme-rosa .normas-notice,
body.theme-lavanda .normas-notice,
body.theme-atardecer .normas-notice,
body[class*="theme-"] .normas-notice {
  background: rgba(233,69,96,0.06) !important;
  border: 1px solid rgba(233,69,96,0.12) !important;
  color: #999 !important;
}

body.theme-dark .normas-notice i,
body.theme-oscuro .normas-notice i,
body.theme-cyber .normas-notice i,
body.theme-medianoche .normas-notice i,
body.theme-rosa .normas-notice i,
body.theme-lavanda .normas-notice i,
body.theme-atardecer .normas-notice i,
body[class*="theme-"] .normas-notice i {
  color: #e94560 !important;
}

body.theme-dark .normas-notice a,
body.theme-oscuro .normas-notice a,
body.theme-cyber .normas-notice a,
body.theme-medianoche .normas-notice a,
body.theme-rosa .normas-notice a,
body.theme-lavanda .normas-notice a,
body.theme-atardecer .normas-notice a,
body[class*="theme-"] .normas-notice a {
  color: #e94560 !important;
}

body.theme-dark .normas-modal-header,
body.theme-oscuro .normas-modal-header,
body.theme-cyber .normas-modal-header,
body.theme-medianoche .normas-modal-header,
body.theme-rosa .normas-modal-header,
body.theme-lavanda .normas-modal-header,
body.theme-atardecer .normas-modal-header,
body[class*="theme-"] .normas-modal-header {
  background: linear-gradient(180deg, rgba(233,69,96,0.1) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(233,69,96,0.3) !important;
}

body.theme-dark .normas-modal-footer,
body.theme-oscuro .normas-modal-footer,
body.theme-cyber .normas-modal-footer,
body.theme-medianoche .normas-modal-footer,
body.theme-rosa .normas-modal-footer,
body.theme-lavanda .normas-modal-footer,
body.theme-atardecer .normas-modal-footer,
body[class*="theme-"] .normas-modal-footer {
  background: #0d0d1a !important;
  border-top: 1px solid rgba(233,69,96,0.3) !important;
}

body.theme-dark .normas-btn-accept,
body.theme-oscuro .normas-btn-accept,
body.theme-cyber .normas-btn-accept,
body.theme-medianoche .normas-btn-accept,
body.theme-rosa .normas-btn-accept,
body.theme-lavanda .normas-btn-accept,
body.theme-atardecer .normas-btn-accept,
body[class*="theme-"] .normas-btn-accept {
  background: linear-gradient(135deg, #e94560, #c23152) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(233,69,96,0.3) !important;
}

body.theme-dark .normas-btn-decline,
body.theme-oscuro .normas-btn-decline,
body.theme-cyber .normas-btn-decline,
body.theme-medianoche .normas-btn-decline,
body.theme-rosa .normas-btn-decline,
body.theme-lavanda .normas-btn-decline,
body.theme-atardecer .normas-btn-decline,
body[class*="theme-"] .normas-btn-decline {
  background: transparent !important;
  color: #777 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

body.theme-dark .normas-header-icon-box i,
body.theme-oscuro .normas-header-icon-box i,
body.theme-cyber .normas-header-icon-box i,
body.theme-medianoche .normas-header-icon-box i,
body.theme-rosa .normas-header-icon-box i,
body.theme-lavanda .normas-header-icon-box i,
body.theme-atardecer .normas-header-icon-box i,
body[class*="theme-"] .normas-header-icon-box i {
  color: #fff !important;
}

body.theme-dark .normas-section-head i,
body.theme-oscuro .normas-section-head i,
body.theme-cyber .normas-section-head i,
body.theme-medianoche .normas-section-head i,
body.theme-rosa .normas-section-head i,
body.theme-lavanda .normas-section-head i,
body.theme-atardecer .normas-section-head i,
body[class*="theme-"] .normas-section-head i {
  color: #e94560 !important;
}

/* === mobileToolsMenu limpio === */
#mobileToolsMenu {
  position: absolute;
  right: 50px;
  bottom: 50px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 4px;
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  max-width: 168px;
}
#mobileToolsMenu:not(.hidden) {
  display: flex !important;
}
#mobileToolsMenu button,
#mobileToolsMenu i {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-align: center;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}
#mobileToolsMenu button::before,
#mobileToolsMenu button::after {
  content: none;
  display: none;
}

/* === Boton privados fix === */
#togglePrivadosHeaderBtn {
  overflow: visible !important;
}
#togglePrivadosHeaderBtn::before,
#togglePrivadosHeaderBtn::after {
  content: none !important;
  display: none !important;
}
#privadosLockIcon {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#generalOptionsMenu:not(.hidden) {
  display: block !important;
}
#generalOptionsMenu button::before,
#generalOptionsMenu button::after {
  content: none !important;
  display: none !important;
}

/* === Fix: boton cam movil === */
#mobileCamToggleBtn {
  overflow: visible !important;
  padding: 4px 8px !important;
  font-size: 16px !important;
  background: #21262d !important;
  color: #fff !important;
  border: 1px solid #30363d !important;
  border-radius: 8px !important;
  display: none;
}
#mobileCamToggleBtn::before,
#mobileCamToggleBtn::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 1099px) {
  #mobileCamToggleBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === Login modal wrapper === */
.login-modal-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: 900px !important;
  width: auto !important;
}
.login-modal-wrapper .modal-content {
  flex-shrink: 0 !important;
}
.login-modal-wrapper .ad-side-login {
  flex-shrink: 0 !important;
  width: 160px !important;
  height: 600px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}
@media (max-width: 960px) {
  .login-modal-wrapper {
    flex-direction: column !important;
  }
  .login-modal-wrapper .ad-side-login {
    display: none !important;
  }
}





  /* Hide the desktop toolbar comment area - no extra space */
  .chat-input > .desktopTool + input,
  .chat-input > input#messageInput {
    display: block !important;
  }
}


/* Desktop Toolbar (above input bar, desktop only) - PV style */
@media (min-width: 1100px) {
  #desktopTools {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(20,20,40,0.95);
    border-top: 1px solid #333;
    position: relative;
  }
  #desktopTools > i,
  #desktopTools > button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: auto;
    padding: 2px 5px !important;
    border: none !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.05) !important;
    color: #ccc !important;
    font-size: 20px !important;
    cursor: pointer;
    transition: all 0.15s ease !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
    font-weight: normal;
    box-shadow: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    filter: none !important;
  }
  #desktopTools > i:hover,
  #desktopTools > button:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    transform: none !important;
    filter: none !important;
  }
  /* Allow FontAwesome ::before icons to render */
  #desktopTools > #emojiBtn {
    font-size: 20px !important;
    padding: 2px 5px !important;
    color: #f0c040 !important;
    background: transparent !important;
   }
  #desktopTools > #gifBtn {
    font-size: 10px !important;
    padding: 2px 5px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #e44, #a2d) !important;
    border-radius: 4px !important;
  }
  #desktopTools > #nickColorBtn {
    font-size: 20px !important;
    padding: 2px 5px !important;
    background: transparent !important;
  }
  #desktopTools > #paletteIcon {
    color: #e17055 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 20px !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
    padding: 2px 5px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  #desktopTools > #ytIcon {
    background: transparent !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  #desktopTools > #ytIcon svg {
    display: block !important;
  }
  #desktopTools > #ytIcon:hover { transform: scale(1.1); }
  #desktopTools > #scrollLockBtn {
    color: rgba(255,255,255,0.5) !important;
    font-size: 20px !important;
    background: transparent !important;
  }
  #desktopTools > #scrollLockBtn.locked { color: #ffd700 !important; }
}

/* Hide desktopTools on mobile */
@media (max-width: 1099px) {
  #desktopTools {
    display: none !important;
  }
}


/* ============================================================
   HEADER v2 (2026-08) — Iconos claros + código de color por función
   Orden: Menú | Cámara | Solicitudes | Privados | Radio | VIP | Juegos
   ============================================================ */

/* ---------- 1) Base: píldoras con icono + etiqueta ---------- */
#mobileCamToggleBtn,
#toggleRequestsBtn,
#togglePrivadosHeaderBtn,
#openVipAccessHeaderBtn,
#juegosBtn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  overflow: visible !important;
  position: relative !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

/* ---------- 2) Matar pseudo-elementos viejos (emoji 🔔 / diamante ◆ / brillo) ---------- */
#mobileCamToggleBtn::before,
#mobileCamToggleBtn::after,
#toggleRequestsBtn::before,
#toggleRequestsBtn::after,
#togglePrivadosHeaderBtn::before,
#togglePrivadosHeaderBtn::after,
#openVipAccessHeaderBtn::before,
#openVipAccessHeaderBtn::after,
#juegosBtn::before,
#juegosBtn::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* ---------- 3) Iconos y etiquetas SIEMPRE visibles ---------- */
#mobileCamToggleBtn .hbtn-ico,
#toggleRequestsBtn .hbtn-ico,
#togglePrivadosHeaderBtn .hbtn-ico,
#openVipAccessHeaderBtn .hbtn-ico,
#juegosBtn .hbtn-ico,
#privadosLockIcon .hbtn-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#privadosLockIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#mobileCamToggleBtn .hbtn-label,
#toggleRequestsBtn .hbtn-label,
#togglePrivadosHeaderBtn .hbtn-label,
#privadosLockText,
#openVipAccessHeaderBtn .hbtn-label,
#juegosBtn .hbtn-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* ---------- 4) Color por función (vence a temas gold/dark/etc.) ---------- */
/* Cámara: violeta — activar webcam + salas de cámara */
#mobileCamToggleBtn,
body.theme-dark #mobileCamToggleBtn,
body[class*="theme-"] #mobileCamToggleBtn {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
  border-color: rgba(167,139,250,0.55) !important;
}

/* Solicitudes: rojo — peticiones de cámara */
#toggleRequestsBtn,
body.theme-dark #toggleRequestsBtn,
body[class*="theme-"] #toggleRequestsBtn {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
  border-color: rgba(253,164,175,0.55) !important;
}

/* Solicitudes OFF: gris apagado */
#toggleRequestsBtn[data-requests-on="0"],
body.theme-dark #toggleRequestsBtn[data-requests-on="0"],
body[class*="theme-"] #toggleRequestsBtn[data-requests-on="0"] {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  border-color: rgba(209,213,219,0.4) !important;
}

/* Privados: verde desbloqueado / rojo bloqueado */
#togglePrivadosHeaderBtn,
body.theme-dark #togglePrivadosHeaderBtn,
body[class*="theme-"] #togglePrivadosHeaderBtn {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
  border-color: rgba(134,239,172,0.55) !important;
}
#togglePrivadosHeaderBtn.hbtn-locked,
body.theme-dark #togglePrivadosHeaderBtn.hbtn-locked,
body[class*="theme-"] #togglePrivadosHeaderBtn.hbtn-locked {
  background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%) !important;
  border-color: rgba(252,165,165,0.55) !important;
}

/* VIP: dorado */
#openVipAccessHeaderBtn,
body.theme-dark #openVipAccessHeaderBtn,
body[class*="theme-"] #openVipAccessHeaderBtn {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
  border-color: rgba(253,230,138,0.6) !important;
  color: #fff !important;
}

/* Juegos: naranja */
#juegosBtn,
body.theme-dark #juegosBtn,
body[class*="theme-"] #juegosBtn {
  background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%) !important;
  border-color: rgba(253,186,116,0.55) !important;
}

/* Hover / active */
#mobileCamToggleBtn:hover,
#toggleRequestsBtn:hover,
#togglePrivadosHeaderBtn:hover,
#openVipAccessHeaderBtn:hover,
#juegosBtn:hover,
body.theme-dark #mobileCamToggleBtn:hover,
body.theme-dark #toggleRequestsBtn:hover,
body.theme-dark #togglePrivadosHeaderBtn:hover,
body.theme-dark #openVipAccessHeaderBtn:hover,
body.theme-dark #juegosBtn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.12) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
}
#mobileCamToggleBtn:active,
#toggleRequestsBtn:active,
#togglePrivadosHeaderBtn:active,
#openVipAccessHeaderBtn:active,
#juegosBtn:active {
  transform: translateY(0) scale(0.97) !important;
  filter: brightness(0.95) !important;
}

/* Cámara: visible solo en móvil/tablet (en escritorio el panel lateral ya está fijo) */
@media (min-width: 1100px) {
  #mobileCamToggleBtn { display: none !important; }
}

/* ---------- 5) Radio compacta azul ---------- */
#radioPlayerInline,
body.theme-dark #radioPlayerInline,
body[class*="theme-"] #radioPlayerInline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%) !important;
  border: 1px solid rgba(147,197,253,0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}
#radioPlayPauseBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.14) !important;
  border: none !important;
  border-radius: 9px !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
#radioPlayPauseBtn:hover { background: rgba(255,255,255,0.28) !important; }
#radioPlayPauseBtn::before,
#radioPlayPauseBtn::after { content: none !important; display: none !important; }
#radioPlayPauseBtn .fa-solid { font-size: 13px !important; line-height: 1 !important; }
#radioVolumeSlider {
  width: 44px !important;
  height: 4px !important;
  accent-color: #93c5fd !important;
  cursor: pointer !important;
  opacity: 0.75 !important;
}
#radioVolumeSlider:hover { opacity: 1 !important; }

/* ---------- 6) Móvil/tablet ≤1099px: botón vertical icono-arriba + etiqueta-abajo ---------- */
@media (max-width: 1099px) {
  .header-mainbar { gap: 5px !important; }

  #mobileCamToggleBtn,
  #toggleRequestsBtn,
  #togglePrivadosHeaderBtn,
  #openVipAccessHeaderBtn,
  #juegosBtn {
    flex-direction: column !important;
    gap: 3px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 6px 2px 5px !important;
    border-radius: 14px !important;
  }

  #mobileCamToggleBtn .hbtn-ico,
  #toggleRequestsBtn .hbtn-ico,
  #togglePrivadosHeaderBtn .hbtn-ico,
  #openVipAccessHeaderBtn .hbtn-ico,
  #juegosBtn .hbtn-ico,
  #privadosLockIcon .hbtn-ico {
    font-size: 19px !important;
  }

  #mobileCamToggleBtn .hbtn-label,
  #toggleRequestsBtn .hbtn-label,
  #togglePrivadosHeaderBtn .hbtn-label,
  #privadosLockText,
  #openVipAccessHeaderBtn .hbtn-label,
  #juegosBtn .hbtn-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ---------- 7) Botón dinámico de solicitudes pendientes (red.js) ---------- */
#camRequestsBtn.cam-req-notification {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
  border: 1px solid rgba(253,164,175,0.55) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
#camRequestsBtn.cam-req-notification:hover {
  background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%) !important;
  filter: brightness(1.1) !important;
}
#camRequestsBtn .cam-req-icon {
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
#camRequestsBtn .cam-req-icon .fa-solid { font-size: 15px !important; line-height: 1 !important; }
#camRequestsBtn .cam-req-badge {
  background: #fff !important;
  color: #be123c !important;
  font-weight: 900 !important;
}

/* ---------- 8) Chip usuario más compacto en móvil ---------- */
@media (max-width: 1099px) {
  .header-me-chip {
    max-width: 120px !important;
    padding: 4px 8px !important;
  }
  .header-me-avatar { width: 24px !important; height: 24px !important; }
  .header-me-nick { font-size: 12px !important; max-width: 80px !important; }
}

/* ---------- 9) ANULACIÓN de reglas de tema antiguas (cyber, medianoche, rosa, lavanda, atardecer, oscuro)
   que pintaban los botones con var(--theme-*) y mostraban emojis vía ::before ---------- */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileCamToggleBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #juegosBtn {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important; /* sobrescrito abajo por botón */
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileCamToggleBtn {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
  border-color: rgba(167,139,250,0.55) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
  border-color: rgba(253,164,175,0.55) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn[data-requests-on="0"] {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  border-color: rgba(209,213,219,0.4) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
  border-color: rgba(134,239,172,0.55) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn.hbtn-locked {
  background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%) !important;
  border-color: rgba(252,165,165,0.55) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
  border-color: rgba(253,230,138,0.6) !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #juegosBtn {
  background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%) !important;
  border-color: rgba(253,186,116,0.55) !important;
}

/* Matar emojis ::before/::after de temas en móvil */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn::before,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn::before,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileCamToggleBtn::before,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileCamToggleBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #juegosBtn::before,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #juegosBtn::after,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn::before,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Re-mostrar etiquetas ocultas por reglas de tema */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn .hbtn-label,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn .hbtn-label,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileCamToggleBtn .hbtn-label,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #juegosBtn .hbtn-label,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn .hbtn-label,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn #privadosLockText {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #toggleRequestsBtn .hbtn-ico,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #openVipAccessHeaderBtn .hbtn-ico,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #mobileCamToggleBtn .hbtn-ico,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #juegosBtn .hbtn-ico,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn .hbtn-ico,
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #togglePrivadosHeaderBtn #privadosLockIcon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Botón dinámico de solicitudes: mismo rojo en temas */
body[class*="theme-"]:not(.theme-dark):not(.theme-dorado) #camRequestsBtn.cam-req-notification {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(253,164,175,0.55) !important;
}

/* ============================================================
   HEADER v2.1 — Ajustes solicitados por el usuario
   - Ocultar botón rojo duplicado de solicitudes (camRequestsBtn de red.js)
   - Radio con etiqueta "Radio" (icono + texto + play/pause + volumen)
   - "Solicitudes de cam" (permitir 2 líneas en móvil)
   - Botón Juegos eliminado del HTML
   ============================================================ */

/* 1) Botón rojo de solicitudes: el JS (updateCamRequestsBadge en red.js)
      controla su visibilidad — SOLO aparece cuando hay solicitudes pendientes
      y sirve para reabrir la bandeja de aceptar/rechazar. Al llegar una
      solicitud, la bandeja se abre automáticamente. */

/* 2) Radio: fila con etiqueta [icono + "Radio"] + fila de controles */
#radioPlayerInline .header-radio-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
#radioPlayerInline .header-radio-label .hbtn-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#radioPlayerInline .header-radio-label .hbtn-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#radioPlayerInline .header-radio-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
}

/* 3) "Solicitudes de cam" puede ocupar 2 líneas (móvil) */
#toggleRequestsBtn .hbtn-label {
  white-space: normal !important;
  text-align: center !important;
}

/* 4) Móvil: radio en vertical, igual que los demás botones */
@media (max-width: 1099px) {
  #radioPlayerInline {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    padding: 5px 2px 4px !important;
    gap: 3px !important;
    border-radius: 14px !important;
  }
  #radioPlayerInline .header-radio-label {
    flex-direction: column !important;
    gap: 3px !important;
  }
  #radioPlayerInline .header-radio-label .hbtn-ico { font-size: 14px !important; }
  #radioPlayerInline .header-radio-label .hbtn-label { font-size: 9.5px !important; }
  #radioPlayerInline .header-radio-controls { gap: 4px !important; }
  #radioPlayPauseBtn {
    width: 24px !important;
    height: 20px !important;
    min-width: 24px !important;
    min-height: 20px !important;
    border-radius: 7px !important;
  }
  #radioPlayPauseBtn .fa-solid { font-size: 10px !important; }
  #radioVolumeSlider { width: 26px !important; }
}

/* 5) Etiquetas de solicitudes en móvil: máx 2 líneas compactas */
@media (max-width: 1099px) {
  #toggleRequestsBtn .hbtn-label {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* ============================================================
   HEADER v2.2 — Botón "Cámara y Salas" (dos iconos: cámara + casa)
   ============================================================ */

/* Envoltorio de los dos iconos (📹 + 🏠) juntos */
#mobileCamToggleBtn .hbtn-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1 !important;
}

/* Etiqueta "Cámara y Salas" permite 2 líneas */
#mobileCamToggleBtn .hbtn-label {
  white-space: normal !important;
  text-align: center !important;
}

/* Móvil: iconos algo más compactos para que quepan ambos */
@media (max-width: 1099px) {
  #mobileCamToggleBtn .hbtn-icons {
    gap: 3px !important;
  }
  #mobileCamToggleBtn .hbtn-icons .hbtn-ico {
    font-size: 15px !important;
  }
  #mobileCamToggleBtn .hbtn-label {
    line-height: 1.15 !important;
  }
}

/* ============================================================
   HEADER v2.3 — Notificaciones de solicitudes de cámara
   - Badge contador en la campana (nº de solicitudes pendientes)
   - Botón rojo de bandeja visible SOLO con pendientes (JS lo controla)
   - Panel de solicitudes se abre automáticamente al recibir una
   ============================================================ */

/* Badge contador sobre la campana: oculto por defecto, visible con clase has-requests */
#toggleRequestsBtn .hbtn-badge {
  display: none !important;
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #be123c !important;
  border: 2px solid #be123c !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 14px !important;
  text-align: center !important;
  z-index: 6 !important;
  pointer-events: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}
/* Con pendientes: mostrar badge (mayor especificidad que reglas viejas
   que ocultan spans del botón en móvil) */
#toggleRequestsBtn.has-requests .hbtn-badge,
body.theme-dark #toggleRequestsBtn.has-requests .hbtn-badge,
body[class*="theme-"] #toggleRequestsBtn.has-requests .hbtn-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Pulso suave del badge para llamar la atención */
@keyframes hbtnBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
#toggleRequestsBtn.has-requests .hbtn-badge {
  animation: hbtnBadgePulse 1.6s ease-in-out infinite !important;
}

/* Botón rojo de bandeja: transición suave al aparecer */
#camRequestsBtn.cam-req-notification {
  transition: opacity .2s ease, transform .2s ease !important;
}

/* ============================================================
   HEADER v2.4 — Bandeja de solicitudes redimensionable
   Asa de agarre en la esquina inferior derecha (sticky para que
   permanezca visible aunque el contenido haga scroll)
   ============================================================ */

#camReqResizeHandle {
  position: sticky !important;
  bottom: -4px !important;          /* se mete un poco en el padding del panel */
  margin-top: auto !important;      /* con contenido corto, se pega abajo */
  align-self: flex-end !important;  /* pegada a la derecha */
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 28px !important;
  cursor: nwse-resize !important;
  touch-action: none !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 2px 3px !important;
  background: transparent !important;
  border-radius: 0 0 8px 0 !important;
}

/* Grip visual: tres líneas diagonales (estilo clásico de resize) */
#camReqResizeHandle::after {
  content: "" !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  border-bottom-right-radius: 6px !important;
  background: repeating-linear-gradient(135deg,
    transparent 0px, transparent 3px,
    #8a8a8a 3px, #8a8a8a 5px) !important;
  opacity: 0.85 !important;
  transition: opacity .15s ease !important;
}

/* Al pasar el ratón / mientras se arrastra: grip brillante */
#camReqResizeHandle:hover::after,
#camReqResizeHandle:active::after {
  background: repeating-linear-gradient(135deg,
    transparent 0px, transparent 3px,
    #ffffff 3px, #ffffff 5px) !important;
  opacity: 1 !important;
}

/* ============================================================= */
/* MODAL SELECTOR DE ICONO JUNTO AL NICK (corazón) — v3 rediseñado */
/* ============================================================= */
.user-icon-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  background: rgba(8, 6, 20, 0.7) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: none !important;                 /* hidden by default */
  align-items: center !important;
  justify-content: center !important;
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif !important;
  animation: uipFadeIn 0.18s ease-out !important;
}
.user-icon-modal.is-open {
  display: flex !important;
}
@keyframes uipFadeIn { from { opacity: 0; } to { opacity: 1; } }

.user-icon-modal-box {
  width: min(620px, 96vw) !important;
  max-height: 90vh !important;
  background: linear-gradient(180deg, #1c1530 0%, #14101f 100%) !important;
  color: #ece8f5 !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 59, 107, 0.25) inset !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: uipSlideUp 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
}
@keyframes uipSlideUp {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* HEADER */
.user-icon-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #ff3b6b 0%, #c026d3 100%) !important;
  color: #fff !important;
  flex: 0 0 auto !important;
  position: relative !important;
  overflow: hidden !important;
}
.user-icon-modal-header::after {
  content: "";
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.18), transparent 40%) !important;
  pointer-events: none !important;
}
.user-icon-modal-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}
.user-icon-modal-title-ico {
  font-size: 20px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}
.user-icon-modal-close {
  background: rgba(255, 255, 255, 0.18) !important;
  border: none !important;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, transform 0.15s !important;
  position: relative !important;
  z-index: 1 !important;
}
.user-icon-modal-close:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: rotate(90deg) !important;
}

/* PREVIEW + QUITAR */
.uip-preview-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 14px 16px 10px !important;
  flex: 0 0 auto !important;
}
.uip-preview-card {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(255, 59, 107, 0.10), rgba(192, 38, 211, 0.10)) !important;
  border: 1px solid rgba(255, 59, 107, 0.25) !important;
  border-radius: 12px !important;
  min-height: 64px !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.uip-preview-card:hover {
  border-color: rgba(255, 59, 107, 0.5) !important;
}
.uip-preview-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%) !important;
  border-radius: 10px !important;
  flex: 0 0 48px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
}
.uip-preview-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.uip-preview-label {
  font-size: 11px !important;
  color: #a297c2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-weight: 600 !important;
}
.uip-preview-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.uip-clear-btn {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  background: linear-gradient(135deg, #3a2a4a, #2a1a3a) !important;
  border: 1px solid rgba(255, 100, 100, 0.3) !important;
  border-radius: 12px !important;
  color: #ff8a9a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.uip-clear-btn:hover {
  background: linear-gradient(135deg, #4a2a4a, #3a1a2a) !important;
  border-color: rgba(255, 100, 100, 0.55) !important;
  color: #fff !important;
}
.uip-clear-btn i { font-size: 14px !important; }

/* CONTROLS (search + tabs) */
.uip-controls {
  padding: 0 16px 8px !important;
  flex: 0 0 auto !important;
}
.uip-search-wrap {
  position: relative !important;
  margin-bottom: 10px !important;
}
.uip-search-ico {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #8d7eb0 !important;
  font-size: 13px !important;
  pointer-events: none !important;
}
.uip-search {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 12px 9px 34px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.uip-search::placeholder { color: #6f6390 !important; }
.uip-search:focus {
  border-color: rgba(255, 59, 107, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* TABS (pills) */
.user-icon-modal-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 6px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,59,107,0.4) transparent !important;
}
.user-icon-modal-tabs::-webkit-scrollbar { height: 5px !important; }
.user-icon-modal-tabs::-webkit-scrollbar-thumb {
  background: rgba(255,59,107,0.35) !important;
  border-radius: 4px !important;
}
.user-icon-tab {
  flex: 0 0 auto !important;
  padding: 6px 13px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: #c5b9e0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.user-icon-tab:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}
.user-icon-tab.active {
  background: linear-gradient(135deg, #ff3b6b, #c026d3) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 59, 107, 0.45) !important;
}

/* GRID */
.user-icon-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important;
  gap: 8px !important;
  padding: 4px 16px 12px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 180px !important;
  max-height: 38vh !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,59,107,0.4) transparent !important;
}
.user-icon-modal-grid::-webkit-scrollbar { width: 7px !important; }
.user-icon-modal-grid::-webkit-scrollbar-thumb {
  background: rgba(255,59,107,0.35) !important;
  border-radius: 4px !important;
}
.user-icon-cell {
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 11px !important;
  cursor: pointer !important;
  font-size: 20px !important;
  color: #d6d6e0 !important;
  position: relative !important;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
}
.user-icon-cell:hover {
  transform: translateY(-3px) scale(1.06) !important;
  border-color: rgba(255, 59, 107, 0.55) !important;
  background: linear-gradient(135deg, rgba(255,59,107,0.15), rgba(192,38,211,0.12)) !important;
  box-shadow: 0 8px 18px rgba(255, 59, 107, 0.25) !important;
}
.user-icon-cell.selected {
  border-color: #ff3b6b !important;
  background: linear-gradient(135deg, rgba(255,59,107,0.22), rgba(192,38,211,0.18)) !important;
  box-shadow: 0 0 0 2px rgba(255, 59, 107, 0.45), 0 6px 16px rgba(255, 59, 107, 0.35) !important;
}
.user-icon-cell.selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 8px !important;
  background: #ff3b6b !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* COLOR PICKER */
.uip-colors-section {
  padding: 12px 16px 14px !important;
  background: rgba(0,0,0,0.18) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  flex: 0 0 auto !important;
}
.uip-colors-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #c5b9e0 !important;
  margin-bottom: 8px !important;
}
.uip-colors-hint {
  font-size: 10px !important;
  color: #7d6fa0 !important;
  font-weight: 500 !important;
}
.uip-color-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}
.uip-color-swatch {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  position: relative !important;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
}
.uip-color-swatch:hover {
  transform: scale(1.18) !important;
  border-color: rgba(255,255,255,0.55) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.uip-color-swatch.selected {
  border-color: #fff !important;
  transform: scale(1.18) !important;
  box-shadow: 0 0 0 2px rgba(255,59,107,0.7), 0 4px 12px rgba(0,0,0,0.4) !important;
}
.uip-color-swatch.selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
.uip-color-rainbow {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  background: conic-gradient(from 0deg,
    #ff3b6b, #ff8c1a, #f6c544, #7ee1a8, #5cd6ff, #9b6cff, #c026d3, #ff3b6b) !important;
  position: relative !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
  overflow: hidden !important;
}
.uip-color-rainbow:hover {
  transform: scale(1.18) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.uip-color-rainbow input[type="color"] {
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}

/* FOOTER */
.user-icon-modal-footer {
  padding: 10px 16px 12px !important;
  text-align: center !important;
  background: rgba(0,0,0,0.25) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  flex: 0 0 auto !important;
}
.user-icon-modal-hint {
  font-size: 11px !important;
  color: #8d7eb0 !important;
  font-style: italic !important;
}

/* Badge junto al nick en la lista de usuarios */
.user-icon-badge {
  font-size: 15px !important;
  margin-left: 3px !important;
  vertical-align: middle !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)) !important;
}

/* ============================================================= */
/* ANIMACIONES para iconos "fa-anim:*" (tipo GIF que se mueve)  */
/* ============================================================= */
@keyframes userIconHeartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.18); }
  20% { transform: scale(1); }
  30% { transform: scale(1.28); }
  40% { transform: scale(1); }
}
@keyframes userIconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
@keyframes userIconSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes userIconSpinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes userIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes userIconShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-4deg); }
  40% { transform: translateX(2px) rotate(4deg); }
  60% { transform: translateX(-2px) rotate(-3deg); }
  80% { transform: translateX(2px) rotate(3deg); }
}
@keyframes userIconTada {
  0% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.9) rotate(-4deg); }
  30%, 50%, 70%, 90% { transform: scale(1.15) rotate(4deg); }
  40%, 60%, 80% { transform: scale(1.15) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes userIconWiggle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes userIconSwing {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes userIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-3px) rotate(3deg); }
  66% { transform: translateY(2px) rotate(-2deg); }
}
@keyframes userIconGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 200, 80, 0.4)) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 200, 80, 0.95)) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
}
@keyframes userIconFlicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 1; }
  50% { opacity: 0.45; }
  55% { opacity: 1; }
  70% { opacity: 0.7; }
  72% { opacity: 1; }
}
@keyframes userIconSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.anim-heartbeat { animation: userIconHeartbeat 1.4s ease-in-out infinite; transform-origin: center; }
.anim-pulse     { animation: userIconPulse 1.2s ease-in-out infinite; transform-origin: center; }
.anim-spin      { animation: userIconSpin 2.4s linear infinite; transform-origin: center; }
.anim-spin-slow { animation: userIconSpinSlow 8s linear infinite; transform-origin: center; }
.anim-bounce    { animation: userIconBounce 1s ease-in-out infinite; }
.anim-shake     { animation: userIconShake 0.6s ease-in-out infinite; }
.anim-tada      { animation: userIconTada 2s ease-in-out infinite; transform-origin: center; }
.anim-wiggle    { animation: userIconWiggle 0.8s ease-in-out infinite; transform-origin: center; }
.anim-swing    { animation: userIconSwing 1.2s ease-in-out infinite; transform-origin: top center; }
.anim-float     { animation: userIconFloat 2.6s ease-in-out infinite; }
.anim-glow      { animation: userIconGlow 1.6s ease-in-out infinite; }
.anim-flicker   { animation: userIconFlicker 1.8s linear infinite; }
.anim-sway      { animation: userIconSway 2.2s ease-in-out infinite; transform-origin: bottom center; }

/* Responsive: modal más pequeño en móvil */
@media (max-width: 640px) {
  .user-icon-modal-box { width: 98vw !important; max-height: 92vh !important; border-radius: 14px !important; }
  .user-icon-modal-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) !important; gap: 6px !important; max-height: 32vh !important; }
  .user-icon-modal-title { font-size: 15px !important; }
  .uip-preview-icon { width: 40px !important; height: 40px !important; font-size: 22px !important; flex: 0 0 40px !important; }
  .uip-preview-name { font-size: 14px !important; }
  .uip-color-swatch, .uip-color-rainbow { width: 24px !important; height: 24px !important; }
  .uip-preview-row { padding: 10px 12px 8px !important; gap: 8px !important; }
  .uip-controls { padding: 0 12px 8px !important; }
  .user-icon-modal-grid { padding: 4px 12px 10px !important; }
  .uip-colors-section { padding: 10px 12px 12px !important; }
}


/* ============================================================= */
/* FIX v2: Menú hamburguesa móvil compacto como escritorio      */
/* Botones cuadrados uniformes — alta especificidad por ID      */
/* ============================================================= */

/* Estado base (no móvil): oculto porque el trigger solo existe en móvil */
@media (min-width: 1100px) {
  #mobileToolsMenu { display: none !important; }
}

/* === Override móvil y tablet (≤1099px) === */
@media (max-width: 1099px) {
  /* Contenedor: fila horizontal compacta, ancho auto, sin grid */
  #mobileToolsMenu,
  #mobileToolsMenu.hidden,
  #mobileToolsMenu.show,
  #mobileToolsMenu:not(.hidden) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    left: 8px !important;
    right: auto !important;
    bottom: 64px !important;
    top: auto !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    background: rgba(20, 20, 40, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    transform: none !important;
    -webkit-transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5000 !important;
    font-size: 14px !important;
    overflow: visible !important;
    position: fixed !important;
  }
  /* Si tiene clase .hidden, mantener oculto */
  #mobileToolsMenu.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* === Reset base para TODOS los items (alta especificidad: 2 IDs) === */
  #mobileToolsMenu #mobileScrollLockBtn,
  #mobileToolsMenu #emojiBtn2,
  #mobileToolsMenu #mobileGifBtn,
  #mobileToolsMenu #nickColorBtn2,
  #mobileToolsMenu #uploadImgBtnMobile,
  #mobileToolsMenu #mobilePaletteIcon,
  #mobileToolsMenu #mobileUserIconPickerBtn,
  #mobileToolsMenu #mobileYtIcon,
  #mobileToolsMenu #mobileMicIcon,
  #mobileToolsMenu > button,
  #mobileToolsMenu > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ccc !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    letter-spacing: 0 !important;
  }

  /* Quitar shimmer dorado y diamante ◆ heredados */
  #mobileToolsMenu #mobileScrollLockBtn::before,
  #mobileToolsMenu #mobileScrollLockBtn::after,
  #mobileToolsMenu #emojiBtn2::before,
  #mobileToolsMenu #emojiBtn2::after,
  #mobileToolsMenu #mobileGifBtn::before,
  #mobileToolsMenu #mobileGifBtn::after,
  #mobileToolsMenu #nickColorBtn2::before,
  #mobileToolsMenu #nickColorBtn2::after,
  #mobileToolsMenu #mobilePaletteIcon::before,
  #mobileToolsMenu #mobilePaletteIcon::after,
  #mobileToolsMenu #mobileUserIconPickerBtn::before,
  #mobileToolsMenu #mobileUserIconPickerBtn::after,
  #mobileToolsMenu #mobileYtIcon::before,
  #mobileToolsMenu #mobileYtIcon::after,
  #mobileToolsMenu #mobileMicIcon::before,
  #mobileToolsMenu #mobileMicIcon::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* === Estado hover/active uniforme === */
  #mobileToolsMenu #mobileScrollLockBtn:hover,
  #mobileToolsMenu #emojiBtn2:hover,
  #mobileToolsMenu #mobileGifBtn:hover,
  #mobileToolsMenu #nickColorBtn2:hover,
  #mobileToolsMenu #mobilePaletteIcon:hover,
  #mobileToolsMenu #mobileUserIconPickerBtn:hover,
  #mobileToolsMenu #mobileYtIcon:hover,
  #mobileToolsMenu #mobileMicIcon:hover,
  #mobileToolsMenu > button:hover,
  #mobileToolsMenu > i:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }

  /* === BOTONES INDIVIDUALES — cada uno con su color e icono === */

  /* 1. 🔒 Candado (bloquear scroll) — emoji Unicode directo, JS alterna 🔒/🔓 */
  #mobileToolsMenu #mobileScrollLockBtn {
    background: transparent !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-style: normal !important;
  }

  /* 2. 😊 Emoji — texto directamente en el HTML (sin ::before) */
  #mobileToolsMenu #emojiBtn2 {
    font-size: 20px !important;            /* emoji cara visible */
    background: transparent !important;
    color: #f0c040 !important;
    line-height: 1 !important;
  }

  /* 3. GIF — botón con gradiente pero cuadrado como los demás */
  #mobileToolsMenu #mobileGifBtn {
    font-size: 10px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #e44, #a2d) !important;
    color: #fff !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
  }

  /* 4. 🎨 Colores del nick */
  #mobileToolsMenu #nickColorBtn2 {
    font-size: 0 !important;            /* ocultar el emoji crudo si lo trae */
    background: transparent !important;
    color: #ff3b6b !important;
  }
  #mobileToolsMenu #nickColorBtn2::before {
    content: "🎨" !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* 5. 🖌️ Pincel — exactamente como desktop: cuadrado, transparente, naranja */
  #mobileToolsMenu #mobilePaletteIcon {
    background: transparent !important;
    color: #e17055 !important;
    font-size: 18px !important;
  }
  #mobileToolsMenu #mobilePaletteIcon i,
  #mobileToolsMenu #mobilePaletteIcon .fa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: inherit !important;
    margin: 0 !important;
  }

  /* 6. ❤️ Corazón — selector de icono junto al nick (emoji Unicode directo) */
  #mobileToolsMenu #mobileUserIconPickerBtn {
    background: transparent !important;
    color: #ff3b6b !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-style: normal !important;
  }

  /* 7. ▶️ YouTube — OCULTO en móvil a petición del usuario */
  #mobileToolsMenu #mobileYtIcon {
    display: none !important;
    background: transparent !important;
    color: #FF0000 !important;
    font-size: 18px !important;
  }

  /* 8. 🎤 Micrófono */
  #mobileToolsMenu #mobileMicIcon {
    background: transparent !important;
    color: #00ff00 !important;
    font-size: 18px !important;
  }
}

/* === Pantallas muy pequeñas === */
@media (max-width: 480px) {
  #mobileToolsMenu #mobileScrollLockBtn,
  #mobileToolsMenu #emojiBtn2,
  #mobileToolsMenu #mobileGifBtn,
  #mobileToolsMenu #nickColorBtn2,
  #mobileToolsMenu #mobilePaletteIcon,
  #mobileToolsMenu #mobileUserIconPickerBtn,
  #mobileToolsMenu #mobileYtIcon,
  #mobileToolsMenu #mobileMicIcon,
  #mobileToolsMenu > button,
  #mobileToolsMenu > i {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 16px !important;
  }
  #mobileToolsMenu #emojiBtn2,
  #mobileToolsMenu #mobileUserIconPickerBtn { font-size: 18px !important; }
  #mobileToolsMenu #nickColorBtn2 { font-size: 18px !important; }
  #mobileToolsMenu #mobileGifBtn { font-size: 9px !important; }
  #mobileToolsMenu {
    padding: 5px 6px !important;
    gap: 3px !important;
    bottom: 60px !important;
  }
}