/* liveagent.css — Dispatcher Live Agent panel (pestaña "AI Copilot").
   Namespaced con .la-* y variables scopeadas en .la-root para no colisionar
   con el resto del TMS. Portado desde la propuesta aprobada
   (scratchpad/dispatcher-live-agent.html): orbe Canvas + burbujas + pasos + ticks. */

.la-root {
  --la-void: #0A0D15; --la-asphalt: #10141F; --la-asphalt-2: #171C2B; --la-raised: #1D2436;
  --la-stroke: #262F44; --la-stroke-2: #313C56;
  --la-sodium: #FF9D42; --la-sodium-2: #FFC078; --la-sodium-glow: rgba(255,157,66,.16);
  --la-live: #34D3A6; --la-live-glow: rgba(52,211,166,.18);
  --la-danger: #F0674E;
  --la-paint: #EBF1F9; --la-dim: #8B98B0; --la-faint: #5A667F;
  /* superficies antes hardcodeadas → tokenizadas para flip claro/oscuro */
  --la-agent-bg: #0c1019; --la-stage-bg-2: #0d111b;
  --la-fill: rgba(255,255,255,.02); --la-stage-shadow: rgba(0,0,0,.9);
  --la-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
  --la-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: clamp(16px, 3vw, 32px);
  background:
    radial-gradient(70% 55% at 82% 4%, var(--la-sodium-glow), transparent 60%),
    radial-gradient(60% 45% at 6% 96%, var(--la-live-glow), transparent 60%),
    var(--la-void);
  color: var(--la-paint);
  font-family: var(--la-sans);
  line-height: 1.55;
}
.la-root * { box-sizing: border-box; }

/* ── Tema claro "Day Dispatch": redefine la paleta scopeada --la-* ──
   Todo el panel referencia estas variables, así que sólo hay que voltear
   este bloque. El orbe (Canvas) adapta su punto central vía useTheme. La
   columna del agente queda muy clara para que el orbe-blob resalte. */
:root[data-theme="light"] .la-root {
  --la-void: #EDF0F6; --la-asphalt: #FFFFFF; --la-asphalt-2: #F1F4F9; --la-raised: #E9EDF4;
  --la-stroke: #E4E8EF; --la-stroke-2: #D6DCE6;
  --la-sodium: #D97316; --la-sodium-2: #B45309; --la-sodium-glow: rgba(217,115,22,.16);
  --la-live: #0E9A66; --la-live-glow: rgba(14,154,102,.16);
  --la-danger: #DC2626;
  --la-paint: #18212F; --la-dim: #55617A; --la-faint: #8792A7;
  --la-agent-bg: #F5F8FC; --la-stage-bg-2: #F6F8FC;
  --la-fill: rgba(15,23,42,.03); --la-stage-shadow: rgba(15,23,42,.16);
}

/* ── Cabecera compacta del panel ── */
.la-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.la-brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.01em; }
.la-brand .la-dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--la-live);
  box-shadow: 0 0 0 0 var(--la-live); animation: la-ping 2.4s ease-out infinite;
}
.la-brand small { color: var(--la-dim); font-weight: 500; font-size: .82rem; }
.la-tag {
  font-family: var(--la-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--la-sodium); border: 1px solid var(--la-stroke-2); border-radius: 999px; padding: 6px 13px;
}
@keyframes la-ping { 0% { box-shadow: 0 0 0 0 var(--la-live-glow); } 70%,100% { box-shadow: 0 0 0 9px transparent; } }

/* ── El escenario: panel del agente + flujo ── */
.la-stage {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 320px 1fr; gap: 0;
  background: linear-gradient(180deg, var(--la-asphalt), var(--la-stage-bg-2));
  border: 1px solid var(--la-stroke); border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 90px -40px var(--la-stage-shadow);
}

.la-agent {
  position: relative; padding: 28px 24px; border-right: 1px solid var(--la-stroke);
  display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--la-agent-bg);
}
.la-orb-wrap { position: relative; width: 200px; height: 200px; margin-top: 8px; }
.la-orb { width: 200px; height: 200px; display: block; }
.la-state-label {
  font-family: var(--la-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--la-sodium); display: flex; align-items: center; gap: 8px; min-height: 1em;
}
.la-state-label .la-sq { width: 7px; height: 7px; border-radius: 2px; background: var(--la-sodium); }
.la-agent-name { text-align: center; }
.la-agent-name b { font-size: 1.05rem; letter-spacing: -.01em; }
.la-agent-name span { display: block; color: var(--la-faint); font-size: .78rem; font-family: var(--la-mono); margin-top: 3px; }

/* mini-selector "para: [conductor]" */
.la-for {
  width: 100%; display: flex; flex-direction: column; gap: 6px;
}
.la-for label {
  font-family: var(--la-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--la-faint);
}
.la-for select {
  width: 100%; background: var(--la-fill); color: var(--la-paint);
  border: 1px solid var(--la-stroke-2); border-radius: 9px; padding: 8px 10px;
  font-family: var(--la-sans); font-size: .86rem;
}
.la-for select:focus-visible { outline: 2px solid var(--la-live); outline-offset: 2px; }

/* toggles inferiores (mic / tts) */
.la-agent-controls { margin-top: auto; display: flex; flex-direction: column; gap: 9px; width: 100%; }
.la-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  font-family: var(--la-mono); font-size: .76rem; color: var(--la-dim);
  border: 1px solid var(--la-stroke-2); border-radius: 999px; padding: 9px 14px;
  background: var(--la-fill); cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.la-toggle:hover { border-color: var(--la-stroke-2); color: var(--la-paint); }
.la-toggle i { width: 8px; height: 8px; border-radius: 50%; background: var(--la-faint); }
.la-toggle.la-on { color: var(--la-live); border-color: rgba(52,211,166,.35); background: rgba(52,211,166,.06); }
.la-toggle.la-on i { background: var(--la-live); box-shadow: 0 0 8px var(--la-live); }
.la-toggle.la-mic.la-listening { color: var(--la-live); border-color: var(--la-live); }
.la-toggle.la-mic.la-listening i { background: var(--la-live); box-shadow: 0 0 10px var(--la-live); animation: la-blink 1s infinite; }
.la-toggle:disabled { opacity: .45; cursor: not-allowed; }
.la-mic-note { font-family: var(--la-mono); font-size: .66rem; color: var(--la-faint); text-align: center; }

/* ── Panel derecho: flujo + input ── */
.la-panel { display: flex; flex-direction: column; min-height: 0; }
.la-flow-head {
  display: flex; align-items: center; justify-content: space-between; font-family: var(--la-mono);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--la-faint);
  padding: 18px 24px 12px; border-bottom: 1px solid var(--la-stroke);
}
.la-flow {
  flex: 1; min-height: 0; padding: 18px 24px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 12px; scroll-behavior: smooth;
}
.la-flow::-webkit-scrollbar { width: 7px; }
.la-flow::-webkit-scrollbar-thumb { background: var(--la-stroke-2); border-radius: 4px; }

.la-empty {
  margin: auto; text-align: center; color: var(--la-faint); font-size: .9rem; max-width: 34ch;
}
.la-empty b { color: var(--la-dim); display: block; margin-bottom: 6px; font-weight: 600; }

/* burbujas */
.la-bubble {
  max-width: 88%; padding: 12px 15px; border-radius: 13px; font-size: .93rem; line-height: 1.5;
  animation: la-rise .4s ease both; white-space: pre-wrap; word-break: break-word;
}
.la-bubble.la-user {
  align-self: flex-end; background: var(--la-sodium); color: #1a1206; font-weight: 500;
  border-bottom-right-radius: 4px;
}
.la-bubble.la-agent {
  align-self: flex-start; background: var(--la-asphalt-2); border: 1px solid var(--la-stroke-2);
  border-bottom-left-radius: 4px;
}
.la-bubble .la-who {
  font-family: var(--la-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .7; margin-bottom: 5px;
}

/* pasos de acción */
.la-step {
  display: flex; align-items: flex-start; gap: 11px; font-family: var(--la-mono); font-size: .82rem;
  color: var(--la-dim); padding: 3px 2px; animation: la-rise .35s ease both;
}
.la-step .la-ic {
  width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: .7rem; margin-top: 1px;
}
.la-step.la-run .la-ic { background: var(--la-sodium-glow); color: var(--la-sodium); }
.la-step.la-run .la-ic::after { content: "•"; animation: la-blink 1s steps(1) infinite; }
.la-step.la-done .la-ic { background: rgba(52,211,166,.14); color: var(--la-live); }
.la-step.la-done .la-ic::after { content: "✓"; }
.la-step.la-hold .la-ic { background: rgba(240,103,78,.14); color: var(--la-danger); }
.la-step.la-hold .la-ic::after { content: "!"; }
.la-step b { color: var(--la-paint); font-weight: 600; }
.la-step .la-sub { color: var(--la-faint); }

.la-subticks { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 2px 29px; }
.la-tick {
  font-family: var(--la-mono); font-size: .68rem; color: var(--la-faint); border: 1px solid var(--la-stroke);
  border-radius: 5px; padding: 2px 7px; animation: la-rise .3s ease both;
}
.la-tick.la-ok { color: var(--la-live); border-color: rgba(52,211,166,.3); }

/* mini-cards de resultado embebidas */
.la-card {
  align-self: stretch; background: var(--la-asphalt); border: 1px solid var(--la-stroke);
  border-radius: 12px; padding: 14px 16px; animation: la-rise .4s ease both;
}
.la-card-head {
  font-family: var(--la-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--la-sodium); margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
}
.la-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--la-stroke); font-size: .86rem;
}
.la-card-row:first-of-type { border-top: none; }
.la-card-lane { color: var(--la-paint); font-weight: 600; }
.la-card-lane .la-arrow { color: var(--la-faint); margin: 0 6px; }
.la-card-meta { font-family: var(--la-mono); font-size: .74rem; color: var(--la-dim); text-align: right; white-space: nowrap; }
.la-card-net { color: var(--la-live); font-weight: 700; }
.la-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.la-kpi { background: var(--la-asphalt-2); border: 1px solid var(--la-stroke); border-radius: 9px; padding: 10px 12px; }
.la-kpi .la-kpi-v { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.la-kpi .la-kpi-k { font-family: var(--la-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--la-faint); margin-top: 2px; }
.la-readiness { display: flex; align-items: center; gap: 9px; font-size: .9rem; }
.la-readiness.la-ready { color: var(--la-live); }
.la-readiness.la-blocked { color: var(--la-danger); }

/* banner de confirmación (await) */
.la-await {
  align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--la-mono); font-size: .8rem; color: var(--la-danger);
  background: rgba(240,103,78,.09); border: 1px solid rgba(240,103,78,.3); border-radius: 12px;
  padding: 12px 15px; animation: la-rise .4s ease both;
}
.la-await-txt { display: flex; align-items: center; gap: 9px; }
.la-await .la-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--la-danger); animation: la-blink 1.1s infinite; flex: 0 0 auto; }
.la-await b { color: var(--la-paint); font-weight: 600; }
.la-confirm-btn {
  flex: 0 0 auto; font-family: var(--la-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: #1a0703; background: var(--la-danger); border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer;
  font-weight: 700;
}
.la-confirm-btn:hover { filter: brightness(1.08); }

/* ── Input bar ── */
.la-inputbar {
  display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px;
  border-top: 1px solid var(--la-stroke); background: var(--la-agent-bg);
}
.la-input {
  flex: 1; resize: none; min-height: 44px; max-height: 120px;
  background: var(--la-asphalt-2); color: var(--la-paint);
  border: 1px solid var(--la-stroke-2); border-radius: 12px; padding: 12px 14px;
  font-family: var(--la-sans); font-size: .93rem; line-height: 1.4;
}
.la-input::placeholder { color: var(--la-faint); }
.la-input:focus-visible { outline: 2px solid var(--la-live); outline-offset: 1px; }
.la-icon-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--la-stroke-2); background: var(--la-fill); color: var(--la-dim);
  cursor: pointer; font-size: 1rem; transition: border-color .15s, color .15s, background .15s;
}
.la-icon-btn:hover { color: var(--la-paint); border-color: var(--la-stroke-2); }
.la-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.la-send { background: var(--la-sodium); color: #1a1206; border-color: transparent; }
.la-send:hover { filter: brightness(1.05); color: #1a1206; }
.la-icon-btn.la-mic-inline.la-listening { color: var(--la-live); border-color: var(--la-live); }

@keyframes la-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes la-blink { 50% { opacity: .25; } }

.la-root a:focus-visible, .la-root button:focus-visible { outline: 2px solid var(--la-live); outline-offset: 3px; }

@media (max-width: 860px) {
  .la-stage { grid-template-columns: 1fr; }
  .la-agent { border-right: none; border-bottom: 1px solid var(--la-stroke); }
  .la-orb-wrap, .la-orb { width: 150px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .la-brand .la-dot, .la-step.la-run .la-ic::after, .la-await .la-pulse,
  .la-toggle.la-mic.la-listening i, .la-icon-btn.la-mic-inline.la-listening { animation: none !important; }
  .la-bubble, .la-step, .la-tick, .la-await, .la-card { animation: none !important; }
}