/* ---------- 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-image: url("https://elchatcam.com/navidad.png");
  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 {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.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;
  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: absolute;
  top: 0;
  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;
  overflow: hidden;
  z-index: 5000;
  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: absolute;        /* relativo al contenedor o al body */
  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: 80vh;          /* nunca más alto que la ventana */
  overflow-y: auto;          /* si se pasa, scroll interno */
  z-index: 5000;
  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: sidebar oculta y botón visible */
@media (max-width: 768px) {
  .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: "↘️";   /* 👈 icono visible */
  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;
}

/* Mensajes de sistema centrados */
.system-message {
  text-align: center;
  font-style: italic;
  color: #555;        /* gris suave, opcional */
  margin: 6px 0;      /* separa un poco de otros mensajes */
}

.private-header .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pv-drag {
  font-size: 12px;
  color: #fff;
  cursor: move;
  user-select: none;
}

.pv-resizer {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    cursor: se-resize;
    font-size: 20px;
    line-height: 18px;
    text-align: center;
    user-select: none;
    color: #ff0505;
    font-weight: bold;

}

.pv-resizer::after {

  font-size: 14px;
}

@media (max-width: 768px) {
    .private-window {
        width: 80vw;
     
        left: 5vw !important;
        top: 10vh;
        max-width: 95vw;
        max-height: 60vh;
        /* position: relative !important; */
        /* top: 100px !important; */
        /* z-index: 2000 !important; */
    }


  .private-log {
    font-size: 13px;    /* texto más compacto */
    padding: 6px;
  }

  .private-input input {
    font-size: 14px;
  }
}

#togglePrivadosBtn {
  background: #238636; /* verde por defecto */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 6px;
}

#togglePrivadosBtn.blocked {
  background: #da3633; /* rojo */
}


#radioPlayer {
  display: flex;
  flex-direction: column;   /* texto debajo del reproductor */
  align-items: flex-start;
  gap: 4px;
  flex-wrap: wrap;  
  margin-bottom: 8px;
  background: #1a476b;
}

#radioAudio {
  width: 220px;       /* ancho compacto */
  height: 28px;       /* altura baja */
  background: #000;   /* fondo negro */
  border-radius: 4px;
}

/* Panel de controles: fondo negro uniforme */
#radioAudio::-webkit-media-controls-panel {
  background-color: #03A9F4;
}

/* Texto de la canción */
#radioNowPlaying {
  font-size: 14px;
  font-weight: 600;
  color: #03A9F4;    /* verde uniforme */
  line-height: 1.4;
  word-wrap: break-word;
  white-space: normal;
}


#zoomInBtn, #zoomOutBtn {
  background: #2bb1e2;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 6px;
}

#messageInput

 {
    font-size: 17px;
    background: white !important;
    color: black !important;
}

.utility-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}


#fullScreenBtn {
  background: #444c56;
}


/* Menús contextuales */
#adminMenu,
#userMenu {
  position: absolute;       /* 👈 permite usar left/top */
  background: #222;         /* fondo oscuro */
  color: #fff;              /* texto blanco */
  padding: 6px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  z-index: 9999;            /* 👈 encima de todo */
  min-width: 120px;
  display: block;           /* visible por defecto */
}

/* 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;
}

#gifBtn {
  background: #444c56;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  font-weight: 600;
  margin-right: 6px;
}
#gifBtn:hover { background: #2ea043; }

#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: absolute;
  max-height: 80vh;     /* nunca más alto que la ventana */
  overflow-y: auto;     /* scroll interno si se pasa */
  z-index: 5000;
  top: 300px !important;
}

#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 en desktop */
@media (min-width: 769px) {
  #toggleSidebar { display: none; }
}

/* Sidebar móvil: desliza desde la derecha */
@media (max-width: 768px) {
  .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: 1000;           /* por encima del sidebar */
  }
}

/* Solo en PC */
@media (min-width: 769px) {
  .sidebar {
    position: fixed;     /* 👈 la fijamos */
    top: 0;              /* pegada arriba */
    right: 0;            /* pegada al borde derecho */
    width: 250px;        /* ancho fijo */
    height: 100vh;       /* ocupa toda la altura de la ventana */
    background: #222;    /* color de fondo */
    overflow-y: auto;    /* scroll si hay muchos usuarios */
    border-left: 1px solid #444; /* separador visual opcional */
    z-index: 900;
  }

  .chat {
    margin-right: 250px; /* deja espacio para la sidebar */
  }
}

@media (max-width: 768px) {
  #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;
  gap: 8px;
  padding: 8px;
}

.pv-input {
  flex: 1;
}

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

@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 ==== */
@media (max-width: 768px) {
  .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: ocultar texto, mostrar icono */
@media (max-width: 768px) {
  .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 */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
}

@media (min-width: 769px) {
  #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 { color: #ffffff !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;    /* Dinámico para teclado */
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !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: 768px) {
  .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: 250px !important;            /* Alineado a la derecha */
  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: translateX(-50%) scale(0.88) !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: translateX(-30%) scale(0.58) !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, 1fr) !important;
    gap: 10px !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: 420px !important;          /* ← Más ancho (antes 360px, ahora 420px) */
    max-width: none !important;
    transform: none !important;
    padding: 18px !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: 38px !important;           /* Un poquito más grandes */
    height: 38px !important;
    border-radius: 10px !important;
    border: 2px 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);
}

#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;
  }
}