/* Elimina márgenes, rellenos y fuerza box-sizing en todos los elementos */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* El body ocupa toda la altura de la pantalla y apila verticalmente header + main */
body {
  min-height: 100vh;
  background-color: #0a1628;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
}

/* Banda roja superior que actúa como identidad visual de la plataforma */
header {
  width: 100%;
  background-color: #ff0000;
}

/* Contenedor del banner: alinea el título y el contador de espectadores horizontalmente */
.banner {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

/* Título del sitio: responsivo con clamp para adaptarse a distintos anchos de pantalla */
.banner h1 {
  color: #ffffff;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 140px 0 0;
  text-align: right;
}

/* Pastilla flotante en la esquina derecha que muestra el número de espectadores activos */
.online-counter {
  position: absolute;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 6px 12px;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  font-size: 0.95rem;
}

/* Indicador circular verde con animación de pulso para señalar estado en vivo */
.online-dot {
  width: 10px;
  height: 10px;
  background-color: #00ff00;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

/* Animación de onda expansiva para el punto verde de estado en vivo */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(0, 255, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
}

/* El main crece para ocupar el espacio restante y centra su contenido verticalmente */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  gap: 20px;
}

/* Contenedor del iframe con relación de aspecto 16:9 forzada mediante padding-top */
.iframe-wrapper {
  width: 100%;
  max-width: 960px;
  position: relative;
  padding-top: 56.25%; /* 9/16 = 56.25% — técnica CSS para aspect ratio sin JS */
}

/* El iframe se posiciona absolutamente para rellenar todo el contenedor padre */
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #000000;
}

/* Contenedor del chat: mismo ancho máximo que el reproductor, con borde rojo distintivo */
.chat-section {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 2px solid #ff0000;
  border-radius: 8px;
  overflow: hidden;
  background-color: #0f1e36;
}

/* Área de mensajes con scroll vertical y altura fija para no empujar el contenido inferior */
.chat-box {
  height: 220px;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

/* Scrollbar personalizado con estética oscura similar a YouTube */
.chat-box::-webkit-scrollbar {
  width: 6px;
}

.chat-box::-webkit-scrollbar-track {
  background: #0f1e36;
}

.chat-box::-webkit-scrollbar-thumb {
  background: #ff0000;
  border-radius: 3px;
}

/* Estilo base de cada mensaje del chat */
.chat-message {
  font-size: 0.9rem;
  color: #e8e8e8;
  line-height: 1.4;
  word-break: break-word;
}

/* El nombre del autor se renderiza en rojo; el color real se sobreescribe inline por JS según sessionId */
.chat-message .chat-author {
  color: #ff4444;
  font-weight: 700;
  margin-right: 6px;
}

/* Barra inferior del chat: input + temporizador de cooldown + botón de envío en fila */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 2px solid #ff0000;
  background-color: #0a1628;
}

/* Input de texto transparente para integrarse visualmente con el fondo oscuro */
#chatInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.95rem;
  padding: 12px 16px;
  font-family: inherit;
}

#chatInput::placeholder {
  color: #6b7a99;
}

/* Temporizador de cooldown mostrado entre el input y el botón de envío */
.cooldown-timer {
  background-color: transparent;
  border: 1px solid #ff4444;
  color: #ff4444;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
}

/* Botón de envío: muestra solo el ícono de flecha SVG; el texto "Enviar" queda oculto para lectores de pantalla */
#chatSendBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 2px solid #ff0000;
  cursor: pointer;
  padding: 0 16px;
  height: 48px;
  transition: background-color 0.2s ease;
  color: #ff0000;
  font-size: 0; /* Oculta visualmente el texto del botón manteniendo accesibilidad */
}

/* Ícono de flecha "send" renderizado como máscara SVG sobre un fondo rojo */
#chatSendBtn::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: #ff0000;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease;
}

#chatSendBtn:hover {
  background-color: rgba(255, 0, 0, 0.15);
}

#chatSendBtn:hover::after {
  background-color: #ff4444;
}

#chatSendBtn:active {
  background-color: rgba(255, 0, 0, 0.3);
}