* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  overflow-x: hidden;
  /* Safe area para muescas y barra home en móviles */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body.is-chat-open-mobile { overflow: hidden; }

/* Utilidades safe area */
.pt-safe { padding-top: max(0.75rem, env(safe-area-inset-top)); }
.pb-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
.pl-safe { padding-left: max(1rem, env(safe-area-inset-left)); }
.pr-safe { padding-right: max(1rem, env(safe-area-inset-right)); }

/* Área táctil mínima 44px (accesibilidad móvil) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.touch-target:not(button):not([role="button"]) { min-width: 0; min-height: 0; display: block; }

.status { font-size: 12px; color: #64748b; }
.video-wrapper { position: relative; }
.offline-screen-message:empty { display: none; }
#player {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  object-fit: contain;
}
.overlay-logo, .overlay-text { position: absolute; pointer-events: none; z-index: 10; }
.overlay-logo { top: 12px; left: 12px; bottom: auto; }
.overlay-logo img { max-height: 40px; max-width: 140px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.overlay-text { font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

#player .op-ui-progress,
#player .op-progress,
#player [class*="progress-bar"],
#player [class*="ProgressBar"],
#player .op-controls-progress,
#player .op-seek-bar,
#player div[class*="progress"],
#player [class*="seek"] {
  display: none !important;
}

.chat-panel {
  height: 100vh;
  max-height: 100vh;
}

/* Chat: light mode corporativo (contaduría / empresa) */
.chat-panel.chat-theme-light {
  background: #f8fafc;
  border-left-color: #e2e8f0;
}
.chat-panel.chat-theme-light .chat-header {
  background: #fff;
  border-color: #e2e8f0;
}
.chat-panel.chat-theme-light .chat-messages {
  background: #f8fafc;
}
.chat-panel.chat-theme-light .chat-msg {
  transition: background-color 0.15s ease;
}
.chat-panel.chat-theme-light .chat-msg:hover {
  background: #f1f5f9;
}
.chat-msg-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  color: #fff;
}
.chat-msg-link {
  color: #2563eb;
  text-decoration: underline;
}
.chat-msg-link:hover {
  color: #1d4ed8;
}

/* ========== MÓVIL: mitad player, mitad chat (50/50) ========== */
@media (max-width: 1023px) {
  .app-layout {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .player-main {
    flex: 0 0 50%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .video-wrapper {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
  }
  #player {
    min-height: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Chat en flujo: otra mitad */
  .chat-panel {
    flex: 0 0 50%;
    min-height: 0;
    height: auto;
    max-height: none;
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 0;
    box-shadow: none;
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }
  .chat-panel.chat-panel-hidden {
    position: relative;
    right: auto;
  }
  .chat-messages {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .chat-msg {
    padding: 0.5rem 0.75rem;
  }
  .chat-msg-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}
.chat-msg .msg { flex: 1; min-width: 0; word-break: break-word; }

@media (min-width: 1024px) {
  .app-layout { min-height: 100vh; }
  .chat-panel { height: auto; max-height: none; }
  .touch-target { min-width: 0; min-height: 0; display: inline-flex; }
}

/* Pantalla completa: todo el layout (video + chat) a pantalla completa */
.app-layout:fullscreen,
.app-layout:-webkit-full-screen,
.app-layout:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  background: #0f172a;
}
.app-layout:fullscreen .chat-panel,
.app-layout:-webkit-full-screen .chat-panel,
.app-layout:-ms-fullscreen .chat-panel {
  height: 100vh;
  max-height: 100vh;
}
.app-layout:fullscreen .video-wrapper,
.app-layout:-webkit-full-screen .video-wrapper,
.app-layout:-ms-fullscreen .video-wrapper {
  min-height: 0;
}