/* ==============================
   operatorView (Telefonía)
   ============================== */

/* Tokens semánticos de estado para NLP/telefonía: derivados de la paleta de
   suite (theme-light.css), no introducen hex nuevos. Mantienen la semántica
   success/danger/neutral/warning sin tirar de Bootstrap. */
:root {
  --state-success: var(--success);
  --state-success-dim: color-mix(in srgb, var(--success) 14%, transparent);
  --state-success-ink: color-mix(in srgb, var(--success) 75%, var(--ink));
  --state-danger: var(--danger);
  --state-danger-dim: color-mix(in srgb, var(--danger) 14%, transparent);
  --state-danger-ink: color-mix(in srgb, var(--danger) 75%, var(--ink));
  --state-warning: var(--warning);
  --state-neutral: var(--muted);
  --state-neutral-dim: color-mix(in srgb, var(--muted) 14%, transparent);
  --state-neutral-ink: var(--muted);
}

#operatorView {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Orden visual = orden del DOM = flujo real de uso del operador:
   dialer (lo primero que se mira) → composer → transcripción → asistente.
   Antes el composer tenía order:1 y empujaba al dialer a la segunda posición,
   rompiendo la proporción pensada para :first-child (flex 0 0 280px, abajo). */
#operatorView > .card-dialer {
  order: 1;
}
#operatorView > .card-composer {
  order: 2;
}
#operatorView > .card-transcripcion {
  order: 3;
}
#operatorView > .card-asistente {
  order: 4;
}
#operatorView > div:first-child {
  flex: 0 0 280px;
}
#operatorView > div:not(:first-child) {
  flex: 1 1 280px;
  min-height: 120px;
}
#operatorView > * {
  min-width: 0;
  box-sizing: border-box;
}
#operatorView > .card-composer,
#operatorView > .card-transcripcion,
#operatorView > .card-asistente {
  min-height: var(--h-transcripcion) !important;
}
#operatorView .card-dialer {
  width: 100%;
  max-width: 280px;
}

#operatorView .dialer-input-group .na-input {
  font-weight: 600;
  letter-spacing: 0.08rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all 0.2s ease;
  height: 42px;
  min-height: 42px;
  font-size: 1.1rem;
}
#operatorView .dialer-input-group .na-input:focus {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

#operatorView .dialer-input-group .btn {
  /* Mismo alto que el input del discador (42px) para que el botón de borrar
     no quede más bajo que "Número a marcar". */
  height: 42px;
  min-height: 42px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

#operatorView .dialer-input {
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  font-weight: 700;
}

#operatorView .dialer-input::placeholder {
  font-size: 0.95rem;
  color: var(--muted);
}

#operatorView .dial-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

#operatorView .dial-button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.2rem;
  background: var(--surface);
  text-align: center;
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  cursor: pointer;
}

#operatorView .dial-button:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent);
}

#operatorView .dial-button:active {
  transform: scale(0.95);
}

#operatorView .dial-digit {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

#operatorView .dial-letters {
  display: block;
  font-size: 0.45rem;
  letter-spacing: 0.08rem;
  color: var(--muted);
  text-transform: uppercase;
}

#operatorView .dial-actions .btn {
  min-height: 2rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

/* Estado y logs compactos */
#operatorView .dialer-footer {
  min-height: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#operatorView .status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--state-neutral);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

#operatorView .status-dot.status-connected {
  background-color: var(--state-success);
}

#operatorView .status-dot.status-disconnected {
  background-color: var(--state-danger);
  animation: none;
}

#operatorView .status-dot.status-warning {
  background-color: var(--state-warning);
}

#operatorView .status-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

#operatorView .status-timer {
  font-family: "Monaco", "Menlo", monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

#operatorView .status-log {
  font-size: 0.75rem;
  color: var(--muted);
  max-height: 4.5rem;
  overflow-y: auto;
}

#operatorView .status-log.lg {
  max-height: 10rem;
  min-height: 8rem;
}

/* Insights (intención / sentimiento / empatía) */
#operatorView .insights {
  margin-top: 0.6rem;
  padding: 0.6rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

#operatorView .insight-row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

#operatorView .insight-row .title {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 50px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#operatorView .tone-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  background: var(--state-neutral);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

#operatorView .tone-pos {
  background: var(--state-success);
}

#operatorView .tone-neu {
  background: var(--state-warning);
}

#operatorView .tone-neg {
  background: var(--state-danger);
}

#operatorView .pill {
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--line);
  white-space: nowrap;
}

#operatorView .pill.positive {
  background: var(--state-success-dim);
  color: var(--state-success-ink);
  border-color: var(--state-success);
}

#operatorView .pill.negative {
  background: var(--state-danger-dim);
  color: var(--state-danger-ink);
  border-color: var(--state-danger);
}

#operatorView .pill.neutral {
  background: var(--state-neutral-dim);
  color: var(--state-neutral-ink);
  border-color: var(--line);
}

/* Select de país / prefijos */
#operatorView .country-select {
  font-size: 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

#operatorView .country-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

#operatorView #countryMenu {
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
    "Twemoji Mozilla", system-ui, sans-serif;
}

/* Audio/WebRTC */
#operatorView .webrtc-audio {
  display: none;
}

/* Speech Composer */
#operatorView .card-composer {
  display: flex;
  flex-direction: column;
  min-width: 25rem !important;
}
#operatorView .card-composer .panel-header {
  margin-bottom: 0.45rem;
}
#operatorView .composer-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
}
#operatorView .composer-fields {
  display: grid;
  gap: 0.4rem 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
#operatorView .composer-field-slider {
  grid-column: 1 / -1;
}
#operatorView .composer-field .form-label {
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
#operatorView .composer-slider {
  width: 100%;
  min-width: 100%;
  height: 4px;
  padding: 0;
  margin: 0.2rem 0 0 0;
  display: block;
}
#operatorView .composer-slider-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  min-width: 70px;
  text-align: right;
}
#operatorView .composer-actions {
  display: flex;
  width: 100%;
  margin-top: 0.35rem;
}
#operatorView .composer-actions .btn {
  --bs-btn-padding-y: 0.18rem;
  --bs-btn-padding-x: 0.6rem;
  font-size: 0.75rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
/* El gradiente sobre .btn-success se borró: el botón ahora es .btn-primary del
   shell (rose de acento), no hace falta override. */
#operatorView .composer-actions .btn i[data-lucide] {
  width: 16px;
  height: 16px;
}
#operatorView .composer-output {
  flex: 1 1 auto;
  height: 100%;
  min-height: 160px;
  max-height: none;
  resize: vertical;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  white-space: pre-wrap;
  font-size: 0.72rem;
}

/* Transcripción y asistente ocupan alto completo */
#operatorView .card-transcripcion,
#operatorView .card-asistente {
  display: flex;
  flex-direction: column;
}
#operatorView .card-transcripcion .panel-header,
#operatorView .card-asistente .panel-header {
  margin-bottom: 0.45rem;
}
#operatorView .card-transcripcion .panel-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
#operatorView .asr-model-select {
  width: auto;
  max-width: 9.5rem;
  height: 30px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
}
#operatorView .card-transcripcion #asrProgressWrap,
#operatorView .card-transcripcion #asrProgressLabel,
#operatorView .card-transcripcion #nlpIndicators {
  flex: 0 0 auto;
}
#operatorView .card-transcripcion .transcript-log,
#operatorView .card-asistente .transcript-log {
  /* Mantener altura fija y scroll interno para no crecer con el contenido */
  flex: 0 0 auto;
  height: var(--h-transcripcion);
  max-height: var(--h-transcripcion);
  min-height: 0;
  overflow-y: auto;
}
#operatorView .card-transcripcion .status-log,
#operatorView .card-asistente .status-log {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}

/* Transcripción en vivo estilo chat (Fase 05). #asrLog pasa de log de texto
   monospaciado a columna de burbujas operador↔interlocutor. Scoped bajo
   #asrLog para no tocar #txtAssistant ni #txtStory, que comparten la clase
   .transcript-log pero siguen siendo logs lineales. Tokens canónicos de la
   suite (Fase 02): --panel, --accent-dim, --ink, --muted, --line, --radius*. */
#asrLog {
  /* Anula el layout monospace/pre-wrap de .transcript-log: ahora es un
     contenedor flex de burbujas, no un log de texto plano. */
  font-family: inherit;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
}
#asrLog .chat-bubble {
  max-width: 80%;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  word-break: break-word;
  animation: chat-bubble-in 120ms ease-out;
}
@keyframes chat-bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#asrLog .chat-bubble-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
#asrLog .chat-bubble-avatar {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
}
#asrLog .chat-bubble-name {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
#asrLog .chat-bubble-time {
  font-size: 0.6rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}
#asrLog .chat-bubble-text {
  white-space: pre-wrap;
  margin-left: calc(18px + 0.35rem); /* alinea con el texto, no con el avatar */
}
/* Operador (agente): alineado a la izquierda, fondo panel (neutro). */
#asrLog .chat-bubble--operador {
  align-self: flex-start;
  background: var(--panel);
  border-color: var(--line);
  border-bottom-left-radius: var(--radius-sm);
}
#asrLog .chat-bubble--operador .chat-bubble-avatar {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
/* Interlocutor (cliente): alineado a la derecha, fondo accent-dim. */
#asrLog .chat-bubble--interlocutor {
  align-self: flex-end;
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  border-bottom-right-radius: var(--radius-sm);
}
#asrLog .chat-bubble--interlocutor .chat-bubble-avatar {
  background: color-mix(in srgb, var(--accent) 30%, var(--panel));
  color: var(--accent-ink);
  border-color: transparent;
}
/* Parcial en curso: opacidad reducida + borde punteado hasta que llegue
   el FINAL del mismo hablante y lo reemplace (ver agregarMensaje en
   asr-controller.js). */
#asrLog .chat-bubble.is-parcial {
  opacity: 0.6;
  border-style: dashed;
}
/* Mensajes de sistema (ASR iniciado/detenido/errores): burbuja neutra
   centrada para no competir con el flujo de la conversación. */
#asrLog .chat-bubble--status {
  align-self: center;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.7rem;
  font-style: italic;
  max-width: 90%;
}
#operatorView .card-asistente .assistant-actions {
  margin-top: 0.5rem;
}
#operatorView .card-asistente .assistant-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

/* Log del asistente: resalta mensajes y estados recientes */
#operatorView #txtAssistant {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.74rem;
}
#operatorView #txtAssistant .assistant-row {
  padding: 0.3rem 0.45rem;
  border-radius: 0.4rem;
  border-left: 3px solid transparent;
  background-color: rgba(0, 0, 0, 0.03);
  line-height: 1.25;
  white-space: pre-wrap;
}
#operatorView #txtAssistant .assistant-info {
  border-left-color: #0d6efd;
}
#operatorView #txtAssistant .assistant-success {
  border-left-color: #198754;
  background-color: rgba(25, 135, 84, 0.1);
}
#operatorView #txtAssistant .assistant-error {
  border-left-color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
}
#operatorView #txtAssistant .assistant-tool {
  border-left-color: #6f42c1;
  background-color: rgba(111, 66, 193, 0.1);
  font-family: var(--font-mono, Consolas, "Courier New", monospace);
}