/*
 * Sala de teleconsulta WebRTC (C6S-RQ-03: sala de vídeo operador/paciente;
 * C6S-RQ-04: chat efêmero, indicador de gravação e estados de sessão).
 * TASK-4.2 da feature conformidade-c6-sala-webrtc.
 *
 * Usado em DOIS layouts: web (operador) e patient (paciente). Mobile-first,
 * reusa os design tokens de tokens.css e segue o padrão de dark mode do
 * projeto (prefers-color-scheme + :root[data-theme]). O palco de vídeo é
 * escuro em ambos os temas.
 *
 * Estados no container raiz:
 *   .telec-room[data-state="waiting|connecting|in_call|reconnecting|ended|blocked"]
 *   - overlay de status visível fora de in_call
 *   - controles visíveis apenas em in_call/reconnecting
 *   - pré-check oculto quando a chamada está ativa ou encerrada
 */

/* ---------------------------------------------------------------------------
 * Container raiz
 * ------------------------------------------------------------------------- */

.telec-room {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* ---------------------------------------------------------------------------
 * Palco de vídeo (remoto + PiP local + overlay de status)
 * ------------------------------------------------------------------------- */

.telec-room__stage {
  position: relative;
  width: 100%;
  /* Mobile: altura fluida, segura para barras dinâmicas do browser/webview */
  height: 56vh;
  height: 56dvh;
  min-height: 240px;
  background: var(--color-gray-900); /* palco escuro em ambos os temas */
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.telec-room__remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  background: var(--color-gray-900);
}

.telec-room__local {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 25%;
  min-width: 96px;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-gray-800);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 3;
}

/* Overlay central para estados sem mídia (espera/conectando/reconectando/encerrada/bloqueada) */
.telec-room__status-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  background: rgba(15, 23, 42, 0.82); /* gray-900 translúcido, ambos os temas */
  color: #f1f5f9;
}

.telec-room__status-overlay h2,
.telec-room__status-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: #ffffff;
}

.telec-room__status-overlay p,
.telec-room__status-text {
  margin: 0;
  max-width: 36rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: #cbd5e1;
}

/* Spinner (usado no overlay e no pré-check) */
.telec-room__spinner {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--color-primary-400);
  border-radius: var(--radius-full);
  animation: telec-room-spin 0.9s linear infinite;
}

@keyframes telec-room-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Pré-check (preview de câmera/microfone antes de entrar)
 * ------------------------------------------------------------------------- */

.telec-room__precheck {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.telec-room__preview {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-gray-900);
  border-radius: var(--radius-lg);
}

.telec-room__precheck label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.telec-room__precheck select {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px; /* alvo de toque */
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.telec-room__precheck select:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 1px;
}

.telec-room__error {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-danger-700);
  background: var(--color-danger-50);
  border: 1px solid var(--color-danger-500);
  border-radius: var(--radius-md);
}

.telec-room__error:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Barra de controles (abaixo do palco)
 * ------------------------------------------------------------------------- */

.telec-room__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Botão circular de controle — alvo de toque >= 44px */
.telec-room__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: var(--text-lg);
  color: var(--color-text);
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.telec-room__btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Sem affordance apenas-hover: estados também em :active (touch/webview) */
.telec-room__btn:hover,
.telec-room__btn:focus-visible {
  background: var(--color-gray-200);
}

.telec-room__btn:active {
  transform: scale(0.94);
}

.telec-room__btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.telec-room__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Microfone mutado / câmera desligada */
.telec-room__btn--muted,
.telec-room__btn--off {
  color: #ffffff;
  background: var(--color-gray-600);
  border-color: var(--color-gray-600);
}

.telec-room__btn--muted:hover,
.telec-room__btn--muted:focus-visible,
.telec-room__btn--off:hover,
.telec-room__btn--off:focus-visible {
  background: var(--color-gray-700);
}

/* Encerrar chamada */
.telec-room__btn--danger {
  color: #ffffff;
  background: var(--color-danger-600);
  border-color: var(--color-danger-600);
}

.telec-room__btn--danger:hover,
.telec-room__btn--danger:focus-visible {
  background: var(--color-danger-700);
}

/* Toggle ativo (ex.: chat aberto) */
.telec-room__btn--active {
  color: #ffffff;
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.telec-room__btn--active:hover,
.telec-room__btn--active:focus-visible {
  background: var(--color-primary-700);
}

/* Timer da sessão */
.telec-room__timer {
  min-width: 4.5ch;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* Indicador de gravação: bolinha vermelha pulsante + "REC" */
.telec-room__rec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-danger-700);
  background: var(--color-danger-50);
  border-radius: var(--radius-full);
}

.telec-room__rec::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-danger-500);
  animation: telec-room-pulse 1.4s ease-in-out infinite;
}

@keyframes telec-room-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

/* ---------------------------------------------------------------------------
 * Chat efêmero (mobile: drawer sobreposto; desktop: coluna à direita)
 * ------------------------------------------------------------------------- */

.telec-room__chat {
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  /* Mobile: drawer sobreposto ao conteúdo */
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 60;
  max-height: 60vh;
  max-height: 60dvh;
}

.telec-room__chat--open {
  display: flex;
}

.telec-room__chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.telec-room__chat-title {
  font-size: var(--text-sm);
  font-weight: 700;
}

.telec-room__chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.telec-room__chat-close:hover,
.telec-room__chat-close:focus-visible {
  background: var(--color-gray-100);
  color: var(--color-text);
}

.telec-room__chat-notice {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-warning-700);
  background: var(--color-warning-50);
  border-bottom: 1px solid var(--color-border-light);
}

.telec-room__chat-msgs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  margin: 0;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Bolhas de mensagem */
.telec-room__chat-msg-name {
  display: block;
  margin-bottom: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.65;
}

.telec-room__chat-msg {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  border-radius: var(--radius-lg);
  overflow-wrap: break-word;
}

.telec-room__chat-msg--mine {
  align-self: flex-end;
  color: #ffffff;
  background: var(--color-primary-600);
  border-bottom-right-radius: var(--radius-sm);
}

.telec-room__chat-msg--theirs {
  align-self: flex-start;
  color: var(--color-text);
  background: var(--color-gray-100);
  border-bottom-left-radius: var(--radius-sm);
}

.telec-room__chat-form {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.telec-room__chat-input {
  flex: 1;
  min-width: 0;
  min-height: 44px; /* alvo de toque */
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.telec-room__chat-input:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 1px;
}

.telec-room__chat-send {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #ffffff;
  background: var(--color-primary-600);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.telec-room__chat-send:hover,
.telec-room__chat-send:focus-visible {
  background: var(--color-primary-700);
}

.telec-room__chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Badge de presença (reutilizável fora da sala, ex.: na show da teleconsulta)
 * ------------------------------------------------------------------------- */

.telec-room__presence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}

.telec-room__presence::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-gray-400);
}

.telec-room__presence--waiting {
  color: var(--color-warning-700);
  background: var(--color-warning-50);
}

.telec-room__presence--waiting::before {
  background: var(--color-warning-500);
  animation: telec-room-pulse 1.4s ease-in-out infinite;
}

.telec-room__presence--connected {
  color: var(--color-success-700);
  background: var(--color-success-50);
}

.telec-room__presence--connected::before {
  background: var(--color-success-500);
}

/* ---------------------------------------------------------------------------
 * Visibilidade por estado (data-state no container raiz)
 * ------------------------------------------------------------------------- */

/* Overlay de status: visível por padrão, some quando a chamada está ativa */
.telec-room[data-state="in_call"] .telec-room__status-overlay {
  display: none;
}

/* Controles: só em chamada ativa/reconectando */
.telec-room__controls {
  display: none;
}

.telec-room[data-state="in_call"] .telec-room__controls,
.telec-room[data-state="reconnecting"] .telec-room__controls {
  display: flex;
}

/* Pré-check: visível SOMENTE no estado precheck, onde ele SUBSTITUI o palco —
 * evita o card "perdido" abaixo de um palco vazio e deixa claro que "Entrar"
 * trocou de tela (feedback do teste manual 2026-07-05). */
.telec-room__precheck {
  display: none;
}

.telec-room[data-state="precheck"] .telec-room__precheck {
  display: flex;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.telec-room[data-state="precheck"] .telec-room__stage {
  display: none;
}

/* Sessão encerrada/bloqueada: não há mídia local para exibir */
.telec-room[data-state="ended"] .telec-room__local,
.telec-room[data-state="blocked"] .telec-room__local {
  display: none;
}

/* Reconectando: overlay volta por cima do vídeo congelado, sem escondê-lo */
.telec-room[data-state="reconnecting"] .telec-room__status-overlay {
  background: rgba(15, 23, 42, 0.65);
}

/* [hidden] sempre vence as regras de display acima */
.telec-room [hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Desktop (>= 1024px, mesmo breakpoint da sidebar)
 * ------------------------------------------------------------------------- */

/* `--compact` (sala embutida no card estreito do portal do paciente): mantém o
 * layout mobile (chat = drawer sobreposto) mesmo em viewport larga — o grid de
 * coluna quebrava dentro dos ~560px do card (feedback do teste manual). */
@media (min-width: 1024px) {
  .telec-room:not(.telec-room--compact) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "controls"
      "precheck";
    align-items: start;
  }

  .telec-room:not(.telec-room--compact) .telec-room__stage {
    grid-area: stage;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .telec-room:not(.telec-room--compact) .telec-room__controls { grid-area: controls; }
  .telec-room[data-state="in_call"] .telec-room__controls,
  .telec-room[data-state="reconnecting"] .telec-room__controls {
    display: flex;
  }

  .telec-room:not(.telec-room--compact) .telec-room__precheck {
    grid-area: precheck;
    max-width: 560px;
    justify-self: center;
    width: 100%;
  }

  /* Chat vira coluna fixa à direita quando aberto (fora do modo compacto) */
  .telec-room--chat-open:not(.telec-room--compact) {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "stage chat"
      "controls chat"
      "precheck chat";
    gap: var(--space-3);
  }

  .telec-room:not(.telec-room--compact) .telec-room__chat--open {
    grid-area: chat;
    position: static;
    max-height: none;
    height: 100%;
    min-height: 320px;
    box-shadow: var(--shadow-sm);
    z-index: auto;
  }
}

/* ---------------------------------------------------------------------------
 * Dark mode (padrão do projeto: prefers-color-scheme + [data-theme])
 * ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .telec-room__btn {
    background: var(--color-gray-800);
    border-color: var(--color-border);
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) .telec-room__btn:hover,
  :root:not([data-theme="light"]) .telec-room__btn:focus-visible {
    background: var(--color-gray-700);
  }
  :root:not([data-theme="light"]) .telec-room__btn--muted,
  :root:not([data-theme="light"]) .telec-room__btn--off {
    background: var(--color-gray-600);
    border-color: var(--color-gray-600);
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .telec-room__btn--danger {
    background: var(--color-danger-600);
    border-color: var(--color-danger-600);
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .telec-room__btn--active {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .telec-room__chat-msg--theirs {
    background: var(--color-gray-800);
  }
  :root:not([data-theme="light"]) .telec-room__rec {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
  }
  :root:not([data-theme="light"]) .telec-room__error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
  }
  :root:not([data-theme="light"]) .telec-room__chat-notice {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
  }
  :root:not([data-theme="light"]) .telec-room__presence {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
  }
  :root:not([data-theme="light"]) .telec-room__presence--waiting {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
  }
  :root:not([data-theme="light"]) .telec-room__presence--connected {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
  }
}

[data-theme="dark"] .telec-room__btn {
  background: var(--color-gray-800);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .telec-room__btn:hover,
[data-theme="dark"] .telec-room__btn:focus-visible {
  background: var(--color-gray-700);
}
[data-theme="dark"] .telec-room__btn--muted,
[data-theme="dark"] .telec-room__btn--off {
  background: var(--color-gray-600);
  border-color: var(--color-gray-600);
  color: #ffffff;
}
[data-theme="dark"] .telec-room__btn--danger {
  background: var(--color-danger-600);
  border-color: var(--color-danger-600);
  color: #ffffff;
}
[data-theme="dark"] .telec-room__btn--active {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #ffffff;
}
[data-theme="dark"] .telec-room__chat-msg--theirs {
  background: var(--color-gray-800);
}
[data-theme="dark"] .telec-room__rec {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
[data-theme="dark"] .telec-room__error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}
[data-theme="dark"] .telec-room__chat-notice {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
[data-theme="dark"] .telec-room__presence {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}
[data-theme="dark"] .telec-room__presence--waiting {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
[data-theme="dark"] .telec-room__presence--connected {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

/* ---------------------------------------------------------------------------
 * Acessibilidade: reduzir animações quando o usuário preferir
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .telec-room__spinner {
    animation-duration: 2s;
  }
  .telec-room__rec::before,
  .telec-room__presence--waiting::before {
    animation: none;
  }
}

/* Ícones dos controles da sala (Material Symbols, fonte em fonts.css). A regra vive aqui
   porque o portal do paciente não carrega components/topnav.css, onde está a .ms geral. */
.telec-room .ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.telec-room .ms::before { content: attr(data-icon); }