/**
 * TbaiClub — Live room: mejoras responsive y de controles (2026-04-21).
 *
 * Overlay sobre live-call-overrides.css + live-call-ux-plus.css.
 * Solo afecta cuando se está en una sala Live (LivePage / LiveViewer / LiveCam / LiveJoin).
 */

/* === Contenedor de sala: safe areas + altura real en móvil === */
.tbai-live-room,
.live-page-root,
[data-tbai-live-room] {
  min-height: 100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* === Grid de participantes: auto-ajuste columnas === */
@media (max-width: 768px) {
  .tbai-live-participants-grid,
  .livekit-participants-grid,
  [data-tbai-participants-grid] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 6px !important;
  }
  .tbai-live-participant-tile,
  [data-tbai-participant-tile] {
    border-radius: 10px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tbai-live-participants-grid,
  .livekit-participants-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 8px !important;
  }
}

/* === Barra de controles inferior: siempre visible, tamaño táctil === */
@media (max-width: 640px) {
  .tbai-live-controls-bar,
  .livekit-controls-bar,
  [data-tbai-live-controls] {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    padding: 10px 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.95)) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    gap: 8px !important;
  }
  .tbai-live-controls-bar button,
  .livekit-controls-bar button,
  [data-tbai-live-controls] button {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }
}

/* === PIP del speaker en móvil: esquina inferior derecha si hay sidebar === */
@media (max-width: 640px) {
  .tbai-live-pip,
  .livekit-pip,
  [data-tbai-live-pip] {
    width: 96px !important;
    height: 128px !important;
    bottom: 72px !important;
    right: 10px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
  }
}

/* === Cabecera live (título + salir): compactar en móvil === */
@media (max-width: 520px) {
  .tbai-live-header,
  [data-tbai-live-header] {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .tbai-live-header h1,
  .tbai-live-header .tbai-live-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .tbai-live-header .tbai-live-badge-count {
    font-size: 11px !important;
  }
}

/* === Estado mic/cam: copy visible sin tap extra === */
.tbai-live-mic-state,
.tbai-live-cam-state,
[data-tbai-live-state] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.tbai-live-mic-state[data-muted='1'],
.tbai-live-cam-state[data-muted='1'] {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}
.tbai-live-mic-state[data-muted='0'],
.tbai-live-cam-state[data-muted='0'] {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

/* === Landscape móvil: grid horizontal compacto === */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .tbai-live-participants-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }
  .tbai-live-controls-bar,
  .livekit-controls-bar {
    padding: 6px 8px !important;
  }
  .tbai-live-controls-bar button {
    min-height: 36px !important;
    min-width: 36px !important;
  }
}

/* === prefers-reduced-motion: desactiva animaciones de entrada === */
@media (prefers-reduced-motion: reduce) {
  .tbai-live-participant-tile,
  .tbai-live-participants-grid *,
  [data-tbai-live-effect] {
    animation: none !important;
    transition: none !important;
  }
}

/* === Efectos: botones de efectos con paleta del tema activo === */
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald'] .tbai-live-effect-btn:hover,
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald']) .tbai-live-effect-btn:hover {
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
}
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby']) .tbai-live-effect-btn:hover {
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.45);
}
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber']) .tbai-live-effect-btn:hover {
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean']) .tbai-live-effect-btn:hover {
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}