/* ═══════════════════════════════════════════════════════════════════════
   CIRCULAR HUD — Jarvis-Bro
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --circle-size: 450px;
  --circle-color: #00e5ff;
  --modal-width: 460px;
}

/* La ventana PyWebView es exactamente (circle + modal) × circle.
   Solo las zonas con fondo real son opacas; el resto pasa clicks. */
html, body {
  background: transparent !important;
  margin: 0; padding: 0;
  overflow: hidden;
  font-family: "Courier New", "Consolas", monospace;
}

/* ── Widget circular — LEFT del window, bottom-left ─────────────────── */
#jarvis-circle {
  position: fixed;
  left: 0; bottom: 0;
  width: var(--circle-size); height: var(--circle-size);
  box-sizing: border-box;       /* border incluido en size → sin desbordamiento */
  border-radius: 50%;
  background: radial-gradient(circle at center, #0a1818 52%, #050c0c 100%);
  border: 2px solid rgba(0,229,255,0.38);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.3s ease;
  transform: scale(1);
  transform-origin: bottom left;
  /* WHY 9060 (antes 9000): por encima de #modal-overlay (9050) y por debajo de
     .modal-panel (9100). Con un modal abierto, el overlay cubría el círculo y sus
     tabs (que están en 9000-9010), así que al pulsar otra pestaña el clic caía en
     el overlay → closeAllModals() → cierre+reapertura (animación completa) en vez
     del swap en caliente. Con el círculo por encima del overlay, los tabs son
     clicables y openModal hace el swap; el overlay sigue cerrando al clicar fuera. */
  z-index: 9060;
  overflow: visible;
}

#jarvis-circle.inactive {
  filter: brightness(0.25);
  pointer-events: none;
}

#jarvis-circle.shrunken {
  transform: scale(0.4);
}

#jarvis-circle.active { opacity: 1; pointer-events: all; }

/* ── Badge de notificación ──────────────────────────────────────────────── */
#notification-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,8,8,0.93);
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
#notification-badge.notif-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  animation: notif-glow 1.8s ease-in-out infinite alternate;
}
#notif-symbol {
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--circle-color);
  transition: opacity 0.18s ease;
}
#notif-symbol svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 0 8px var(--circle-color));
}
@keyframes notif-glow {
  from { box-shadow: 0 0 10px rgba(0,229,255,0.3) inset; border: 1px solid rgba(0,229,255,0.3); }
  to   { box-shadow: 0 0 28px rgba(0,229,255,0.65) inset; border: 1px solid rgba(0,229,255,0.9); }
}

/* ── SVG segmentos ───────────────────────────────────────────────────── */
#circle-segments {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.circle-seg {
  fill: rgba(0,45,45,0.3);
  stroke: rgba(0,229,255,0.52);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill 0.2s ease, stroke 0.2s ease;
  pointer-events: all;
}
.circle-seg:hover { fill: rgba(0,255,255,0.2); stroke: rgba(0,229,255,0.95); }

/* ── Labels de segmentos — icono grande + texto ──────────────────────── */
.seg-label {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--circle-color);
  cursor: pointer; text-shadow: 0 0 10px var(--circle-color);
  user-select: none; pointer-events: all;
  z-index: 9010;
}
.seg-icon {
  font-size: 1.3rem;
  line-height: 1; display: block;
}
.seg-text {
  font-size: 0.67rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap; display: block;
}
.seg-label:hover .seg-icon,
.seg-label:hover .seg-text { text-shadow: 0 0 16px var(--circle-color), 0 0 4px #fff; }

/* ── Centro: rejilla + retícula + onda ──────────────────────────────── */
#circle-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46%; height: 46%;
  border-radius: 50%;
  border: 1.5px solid rgba(0,229,255,0.5);
  box-shadow: 0 0 20px rgba(0,229,255,0.18), inset 0 0 40px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: radial-gradient(circle, #001a1a, #000a0a);
  transition: border-color 0.2s, box-shadow 0.2s;
  z-index: 9005;
  overflow: hidden;
}
#circle-center::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px) center/20px 20px,
    linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px) center/20px 20px;
  border-radius: 50%;
  pointer-events: none;
}
#circle-center:hover {
  border-color: var(--circle-color);
  box-shadow: 0 0 28px rgba(0,229,255,0.3), inset 0 0 40px rgba(0,0,0,0.9);
}
#waveform-canvas { width: 90%; height: 90%; display: block; position: relative; z-index: 1; }

/* Avatar vivo de Jarvis: cara 3D sobre el waveform; sigue el puntero, parpadea
   y sincroniza la boca con la voz. pointer-events:none -> el clic sigue abriendo
   el chat; el PNG transparente deja ver el waveform como aura detrás. */
#avatar-canvas {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none; display: block;
  filter: drop-shadow(0 0 6px rgba(0,229,255,0.35));
}

/* Retícula (crosshair) dentro del círculo central */
.crosshair-h, .crosshair-v {
  position: absolute; pointer-events: none; z-index: 0;
  background: rgba(0,229,255,0.18);
}
.crosshair-h { top: 50%; left: 5%; right: 5%; height: 1px; transform: translateY(-50%); }
.crosshair-v { left: 50%; top: 5%; bottom: 5%; width: 1px; transform: translateX(-50%); }

/* ── Overlay ─────────────────────────────────────────────────────────── */
#modal-overlay { position: fixed; inset: 0; display: none; z-index: 9050; }
#modal-overlay.visible { display: block; }

/* ── Modales — conectadas al CÍRCULO, sin gap, altura = diámetro ─────── */
.modal-panel {
  position: fixed; bottom: 0;
  left: var(--circle-size);           /* pegada directamente al borde del círculo */
  width: var(--modal-width);
  height: var(--circle-size);         /* altura fija = diámetro del círculo */
  max-height: unset;
  background: #070d0d;
  border: 1px solid rgba(0,229,255,0.42);
  border-left: none;                  /* el borde del círculo actúa de separador */
  border-radius: 0 8px 8px 0;        /* esquinas izquierdas rectas */
  overflow-y: auto;
  overflow-x: hidden;
  resize: horizontal;                 /* redimensionable en ancho */
  min-width: 340px;
  max-width: 720px;
  opacity: 0; pointer-events: none;
  transform: translateX(18px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  /* Promover a capa compositada: el slide va por GPU (transform/opacity) y no
     repinta en cada frame → animación fluida, sin tirones. */
  will-change: transform, opacity;
  z-index: 9100; color: #c8d6e8;
  text-shadow: none;
  box-sizing: border-box;
}
.modal-panel.open { opacity: 1; pointer-events: all; transform: translateX(0); }
.modal-panel.detached {
  /* El tamaño real lo fija Python (detach_modal: 80% del monitor, mín. 800×600);
     el CSS solo llena el viewport. vw/vh son unidades vivas que se ajustan
     cuando Win32 redimensiona la ventana. */
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: unset !important;
  max-width: none !important;
  min-height: unset !important;
  max-height: none !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,229,255,0.42) !important;
  resize: none !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  /* Permitir arrastrar la ventana desde zonas no interactivas */
  -webkit-app-region: drag;
}
.modal-panel.detached.open {
  transform: none !important;
  opacity: 1 !important;
}
body.detached-mode,
body.detached-mode html {
  background: #070d0d !important;
  overflow: hidden !important;
}
body.detached-mode #jarvis-circle {
  display: none !important;
}
/* Restaurar eventos de ratón en todos los elementos interactivos del panel detached */
.modal-panel.detached button,
.modal-panel.detached input,
.modal-panel.detached select,
.modal-panel.detached textarea,
.modal-panel.detached a,
.modal-panel.detached [onclick],
.modal-panel.detached .cfg-tab,
.modal-panel.detached .preset-btn,
.modal-panel.detached .bubble,
.modal-panel.detached #chat-history,
.modal-panel.detached #logs-stream,
.modal-panel.detached #chat-input-area,
.modal-panel.detached #cfg-status-bar,
.modal-panel.detached .cfg-section {
  -webkit-app-region: no-drag;
}
.modal-panel.no-anim,
.modal-panel.no-anim.open { transition: none !important; animation: none !important; }

/* Corchetes angulares HUD en las esquinas izquierdas (decoración sci-fi) */
.modal-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 28px;
  border-top: 2px solid rgba(0,229,255,0.72);
  border-left: 2px solid rgba(0,229,255,0.72);
  pointer-events: none;
  z-index: 2;
}
.modal-panel::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 14px; height: 28px;
  border-bottom: 2px solid rgba(0,229,255,0.72);
  border-left: 2px solid rgba(0,229,255,0.72);
  pointer-events: none;
  z-index: 2;
}

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 12px; border-bottom: 1px solid rgba(0,229,255,0.18);
  color: var(--circle-color); font-size: 0.72rem; letter-spacing: 0.1em;
  font-family: "Courier New", monospace;
  position: sticky; top: 0; background: #070d0d; z-index: 1;
}
.modal-close {
  background: transparent; border: none; color: var(--circle-color);
  cursor: pointer; font-size: 0.8rem; padding: 2px 6px; opacity: 0.7;
}
.modal-close:hover { opacity: 1; }

/* ── Bridge: relleno oscuro detrás del círculo que conecta con la modal ─ */
#modal-bg-bridge {
  position: fixed;
  top: 0;
  left: calc(var(--circle-size) / 2);   /* cubre las esquinas transparentes del círculo */
  height: var(--circle-size);
  right: 0;
  background: #070d0d;
  border-top: 1px solid rgba(0,229,255,0.42);
  border-bottom: 1px solid rgba(0,229,255,0.42);
  z-index: 8999;
  display: none;
  pointer-events: none;
}
#modal-bg-bridge.visible { display: block; }

/* ── Modal chat — layout flex para que historia y input tengan espacio ── */
#modal-chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modal-chat .modal-header  { flex-shrink: 0; }
#modal-chat #chat-panel {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  height: auto !important;               /* anula el 320px del legado */
  overflow: hidden;
}
#modal-chat #chat-title    { display: none; }  /* modal header already labels this */
#modal-chat #chat-history  { flex: 1; min-height: 0; overflow-y: auto; }
#modal-chat #chat-input-area {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 6px 4px;
  border-top: 1px solid rgba(0,229,255,0.12);
}
#modal-chat #chat-input {
  flex-shrink: 0;
  width: 100%;
  min-height: 32px;
  max-height: 120px;
  resize: none;
  box-sizing: border-box;
}
/* Detached (pantalla completa): box de chat GRANDE; en acoplado se queda compacto. */
#modal-chat.detached #chat-input {
  min-height: 56px;
  max-height: 180px;
  resize: vertical;
}
/* ── Cockpit chat-detach: 3 regiones (chat dcha, avatar arriba-izq, config abajo-izq) ── */
#detach-avatar-pane { display: none; }
body.cockpit-chat {
  --cockpit-left-w: clamp(280px, 30vw, 420px);
  --cockpit-avatar-h: clamp(240px, 42vh, 460px);
}
/* Chat a la derecha: overrides con !important porque .modal-panel.detached lo usa */
body.cockpit-chat #modal-chat.detached {
  left: var(--cockpit-left-w) !important;
  width: calc(100vw - var(--cockpit-left-w)) !important;
  border-radius: 0 8px 8px 0 !important;
}
/* Avatar arriba-izquierda */
body.cockpit-chat #detach-avatar-pane {
  display: flex; align-items: center; justify-content: center;
  position: fixed; left: 0; top: 0;
  width: var(--cockpit-left-w); height: var(--cockpit-avatar-h);
  background: rgba(7,16,15,0.96);
  border: 1px solid rgba(0,229,255,0.42); border-left: none; border-top: none;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.7), 0 0 20px rgba(0,229,255,0.12);
  z-index: 9100;
  -webkit-app-region: drag;
}
body.cockpit-chat #detach-avatar-canvas {
  width: min(88%, calc(var(--cockpit-avatar-h) * 0.88));
  aspect-ratio: 1; height: auto;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.35));
}
/* Config abajo-izquierda: visible SIN .open, solo por esta regla */
body.cockpit-chat #modal-config {
  opacity: 1; pointer-events: all; transform: none; transition: none;
  left: 0; top: var(--cockpit-avatar-h); bottom: auto;
  width: var(--cockpit-left-w);
  height: calc(100vh - var(--cockpit-avatar-h));
  min-width: 0; max-width: none; resize: none;
  border-radius: 0; border-left: none;
  display: flex; flex-direction: column;
  overflow: hidden;              /* el scroll vive en #cfg-scroll */
}
body.cockpit-chat #modal-config .modal-header { display: none; } /* anula su ✕ y su detach propio */
body.cockpit-chat #modal-config #preset-bar { flex-shrink: 0; }
body.cockpit-chat #modal-config #config-panel { flex: 1; min-height: 0; }
/* El overlay no debe quedar clicable en huecos → closeAllModals accidental */
body.cockpit-chat #modal-overlay { display: none; }
/* Fila de botones: una sola línea, nunca se parte */
#modal-chat #chat-btn-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
#modal-chat #chat-send { flex: 1; min-width: 40px; padding: 3px 6px !important; }
#modal-chat .chat-mode-btn { font-size: 0.62rem; padding: 3px 4px; }
.modal-panel .ss-mon-btn,
.modal-panel #chat-teach-toggle,
.modal-panel #chat-image-attach,
.modal-panel #chat-interrupt,
.modal-panel #chat-standby {
  font-size: 0.65rem !important;
  padding: 3px 5px !important;
  min-width: 0;
  white-space: nowrap;
}
#modal-chat #tasks-panel {
  position: relative !important;
  bottom: auto !important; left: auto !important; transform: none !important;
  flex-shrink: 0; max-height: 200px; overflow-y: auto;
  border-radius: 0; border-left: none; border-right: none; width: 100%; box-sizing: border-box;
}

/* ── Ajustes de paneles dentro de modales ────────────────────────────── */
.modal-panel #chat-panel, .modal-panel #tasks-panel,
.modal-panel #logs-panel, .modal-panel #config-panel {
  border: none; border-radius: 0; height: auto; max-height: none;
}
.modal-panel #preset-bar { position: relative; flex-wrap: wrap; }
/* Tasks panel en modal: fila compacta única (título · estado · tiempo) */
#modal-chat #tasks-title { display: inline; padding: 0 4px 0 8px; font-size: 0.67rem; border: none; }
#modal-chat #tasks-body {
  display: flex; flex-direction: row; align-items: center;
  gap: 6px; padding: 3px 8px; flex-wrap: wrap;
}
#modal-chat #tasks-stage-row,
#modal-chat #tasks-timer-row { display: flex; align-items: center; gap: 4px; }
#modal-chat #tasks-skill-row { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   OVERRIDE LEGADO MATRIX-VERDE → HUD CIAN (todo dentro de .modal-panel)
   ═══════════════════════════════════════════════════════════════════════ */

/* Fondos */
.modal-panel #chat-panel,
.modal-panel #tasks-panel { background: #07100f; }
.modal-panel #logs-panel  { background: #060d0d; }
.modal-panel #config-panel { background: #07100f; }

/* Títulos y colores base */
.modal-panel #chat-title { color: var(--circle-color); border-bottom-color: rgba(0,229,255,0.18); }
.modal-panel #logs-title { color: var(--circle-color); border-bottom-color: rgba(0,229,255,0.18); }
.modal-panel #chat-history { color: #c2d8d8; }
.modal-panel #logs-stream  { color: #9acaca; }

/* Burbujas chat */
.modal-panel .bubble-user   { background: rgba(0,229,255,0.1); color: #c2d8d8; }
.modal-panel .bubble-jarvis { background: rgba(0,229,255,0.05); color: #c2d8d8; }
.modal-panel .bubble-jarvis code { background: rgba(0,229,255,0.08); color: var(--circle-color); }
.modal-panel .bubble-jarvis pre  { background: rgba(0,0,0,0.4); }
.modal-panel .bubble-jarvis a    { color: var(--circle-color); }
.modal-panel .bubble-log { background: rgba(0,229,255,0.04); color: #9acaca; border-left-color: rgba(0,229,255,0.4); }
.modal-panel .bubble-typing { background: rgba(0,229,255,0.05); color: #9acaca; }
.modal-panel .typing-dots span { background: var(--circle-color); }
.modal-panel .bubble-meta  { color: rgba(0,229,255,0.5); }
.modal-panel .bubble-model { color: rgba(0,229,255,0.6); }

/* Input chat */
.modal-panel #chat-input-area { border-top-color: rgba(0,229,255,0.18); }
.modal-panel #chat-input {
  background: rgba(0,229,255,0.04); color: #c2d8d8;
  border-color: rgba(0,229,255,0.22);
}
.modal-panel #chat-input:focus { border-color: var(--circle-color); outline: none; }
.modal-panel #chat-send {
  background: rgba(0,229,255,0.1); color: var(--circle-color);
  border: 1px solid rgba(0,229,255,0.3);
}
.modal-panel #chat-send:hover:not(:disabled) { background: rgba(0,229,255,0.2); }
.modal-panel #chat-interrupt { background: rgba(120,0,0,0.3); color: #ff7777; border: 1px solid rgba(180,0,0,0.4); }
.modal-panel #chat-interrupt.active { background: rgba(180,0,0,0.4); }

/* Logs */
.modal-panel #logs-clear { background: rgba(0,229,255,0.08); color: var(--circle-color); border: 1px solid rgba(0,229,255,0.25); }
.modal-panel #logs-clear:hover { background: rgba(0,229,255,0.18); }
.modal-panel #logs-paused { color: rgba(0,229,255,0.6); }

/* Config sections */
.modal-panel .cfg-section     { background: #060d0d; border-color: rgba(0,229,255,0.14); }
.modal-panel .cfg-section h4  { color: var(--circle-color); border-bottom-color: rgba(0,229,255,0.14); }
.modal-panel .cfg-field label,
.modal-panel .cfg-field-check span { color: #8ab8b8; }
.modal-panel .cfg-field input[type="number"],
.modal-panel .cfg-field input[type="text"],
.modal-panel .cfg-field select,
.modal-panel .cfg-field textarea {
  background: rgba(0,229,255,0.05); color: #c2d8d8;
  border-color: rgba(0,229,255,0.22);
}
.modal-panel .cfg-field input:focus,
.modal-panel .cfg-field select:focus { border-color: var(--circle-color); outline: none; }

.modal-panel .cfg-btn {
  background: rgba(0,229,255,0.08); color: var(--circle-color);
  border: 1px solid rgba(0,229,255,0.28);
}
.modal-panel .cfg-btn:hover { background: rgba(0,229,255,0.18); }
.modal-panel .cfg-btn-ghost { background: transparent; border-color: rgba(0,229,255,0.22); }
.modal-panel .cfg-btn-ghost:hover { background: rgba(0,229,255,0.08); }
.modal-panel .cfg-msg { color: var(--circle-color); }
.modal-panel .cfg-cheatsheet > summary::before { content: "> "; }
.modal-panel .cfg-cheatsheet[open] > summary::before { content: "v "; }

/* Preset bar */
.modal-panel #preset-bar {
  background: rgba(0,18,18,0.9); border-bottom-color: rgba(0,229,255,0.22);
}
.modal-panel .preset-label { color: rgba(0,229,255,0.6); }
.modal-panel .preset-btn {
  color: var(--circle-color); border-color: rgba(0,229,255,0.3);
  background: transparent; text-shadow: none; box-shadow: none;
}
.modal-panel .preset-btn:hover { background: rgba(0,229,255,0.1); box-shadow: 0 0 6px rgba(0,229,255,0.2); }
.modal-panel .preset-btn.active {
  background: rgba(0,229,255,0.18); color: var(--circle-color);
  font-weight: bold; box-shadow: 0 0 10px rgba(0,229,255,0.25); text-shadow: none;
}

/* Status bar cfg */
.modal-panel #cfg-status-bar { background: #060d0d; border-bottom-color: rgba(0,229,255,0.14); }
.modal-panel #cfg-status { color: var(--circle-color); }

/* Banners */
.modal-panel #restart-banner     { background: #071310; border-color: rgba(0,229,255,0.3); color: var(--circle-color); }
.modal-panel #cfg-error-banner   { background: #130707; border-color: rgba(200,50,50,0.4); color: #ff9090; }
.modal-panel #cfg-loading-banner { background: #071310; border-color: rgba(0,229,255,0.3); color: var(--circle-color); }
.modal-panel #cfg-confirm-banner,
.modal-panel #cfg-proposals-banner { background: #0f0f06; border-color: rgba(200,180,0,0.4); color: #ffe080; }
.modal-panel #interactive-mode-banner { background: #071310; border-color: rgba(0,229,255,0.3); color: var(--circle-color); }
.modal-panel #ollama-status-banner    { background: #130707; border-color: rgba(180,0,0,0.4); color: #ff8a8a; }
.modal-panel #conn-status             { color: rgba(0,229,255,0.7) !important; }
.modal-panel #restart-banner button,
.modal-panel #cfg-error-banner button,
.modal-panel #cfg-proposals-banner button,
.modal-panel #cfg-confirm-banner button { border-color: rgba(0,229,255,0.3); color: inherit; background: transparent; }
.modal-panel #cfg-confirm-banner button:hover,
.modal-panel #cfg-proposals-banner button:hover,
.modal-panel #restart-banner button:hover { background: rgba(0,229,255,0.1); }

/* Toggles */
.modal-panel .toggle-track { background: rgba(0,229,255,0.18); }
.modal-panel .toggle-input:checked + .toggle-track { background: var(--circle-color); }
.modal-panel .toggle-thumb { background: #020d0d; }
.modal-panel .cfg-field-check input[type="checkbox"] { accent-color: var(--circle-color); }

/* Tasks stage badge */
.modal-panel .tasks-stage-badge { background: rgba(0,229,255,0.12); color: var(--circle-color); border-color: rgba(0,229,255,0.3); }

/* Drag over */
.modal-panel #chat-history.drag-over {
  outline-color: var(--circle-color);
  background: rgba(0,229,255,0.04);
}

/* ── Badge WhatsApp ──────────────────────────────────────────────────── */
.header-badge {
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(0,229,255,0.3);
}
.header-badge:hover { border-color: var(--circle-color); }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.badge-dot.on  { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
.badge-dot.off { background: #444; }

/* ═══════════════════════════════════════════════════════════════════════
   FIN CIRCULAR HUD — estilos originales del dashboard a continuación
   ═══════════════════════════════════════════════════════════════════════ */

  /* ── Matrix background ───────────────────────────────────────────── */
  #matrix-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    object-fit: cover;
    z-index: -1;
    opacity: 0.15;
    pointer-events: none;
  }

  body {
    margin: 0;
    font-family: "Courier New", "Consolas", monospace;
    background: transparent !important;
    color: #00ff41;
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
  }
  h1 {
    text-align: center;
    padding: 12px;
    margin: 0;
    font-size: 1.2rem;
    flex-shrink: 0;
    color: #00ff41;
    text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41;
    letter-spacing: 0.15em;
  }
  /* ── Preset bar ──────────────────────────────────────────────────── */
  #preset-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(0, 20, 0, 0.7);
    border-bottom: 1px solid #00ff41;
    flex-shrink: 0;
  }
  #preset-bar .preset-label {
    font-size: 0.75rem;
    color: #00aa33;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .preset-btn {
    background: transparent;
    color: #00ff41;
    border: 1px solid #00ff41;
    border-radius: 4px;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
    box-shadow: 0 0 4px rgba(0, 255, 65, 0.1);
  }
  .preset-btn:hover {
    background: rgba(0, 255, 65, 0.1);
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
  }
  .preset-btn.active {
    background: #00ff41;
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 12px #00ff41;
    text-shadow: none;
  }
  .preset-btn .preset-short {
    display: inline-block;
    margin-right: 4px;
    font-weight: bold;
  }
  .preset-btn .preset-desc {
    font-size: 0.65rem;
    opacity: 0.7;
  }
  #preset-status {
    font-size: 0.7rem;
    color: #00aa33;
    margin-left: 8px;
    min-width: 80px;
    text-align: center;
  }
  /* ── Override existing styles for Matrix look ────────────────────── */
  #graph { background: #0a0a0a; border: 1px solid #00ff41; }
  #info { color: #00ff41; }
  .label { color: #008a20; }
  #config-panel { background: #0a0a0a; }
  .cfg-section { background: #0d0d0d; border: 1px solid #003300; }
  .cfg-section h4 { color: #00aa33; border-bottom-color: #003300; }
  .cfg-field label { color: #008a20; }
  .cfg-field input[type="number"],
  .cfg-field select { background: #000; color: #00ff41; border: 1px solid #003300; }
  .cfg-field input[type="number"]:focus,
  .cfg-field select:focus { border-color: #00ff41; }
  .cfg-field-check span { color: #00cc44; }
  .cfg-btn { background: #003300; color: #00ff41; }
  .cfg-btn:hover { background: #005500; }
  .cfg-btn.cfg-btn-ghost { background: transparent; border: 1px solid #003300; color: #00ff41; }
  .cfg-btn.cfg-btn-ghost:hover { background: #001a00; }
  .cfg-msg { color: #00ff41; }
  .resize-divider { background: #003300; }
  .resize-divider:hover { background: #00ff41; }
  #cfg-status-bar { background: #0a0a0a; border-bottom-color: #003300; }
  #cfg-status { color: #00ff41; }
  #chat-panel { background: #0a0a0a; }
  #chat-title { border-bottom-color: #003300; color: #00ff41; }
  #logs-panel { background: #050505; }
  #logs-title { border-bottom-color: #003300; color: #00ff41; }
  #logs-stream { color: #00ff41; }
  #logs-clear { background: #003300; color: #00ff41; }
  #logs-clear:hover { background: #005500; }
  #chat-history { color: #00ff41; }
  .bubble-user { background: #003300; color: #00ff41; }
  .bubble-jarvis { background: #001a00; color: #00ff41; }
  .bubble-jarvis code { background: rgba(0, 255, 65, 0.08); }
  .bubble-jarvis pre { background: rgba(0, 0, 0, 0.4); }
  .bubble-jarvis a { color: #66ff66; }
  .bubble-log { background: #000; color: #00ff41; border-left-color: #00ff41; }
  .bubble-log.log-warning { color: #ffd700; border-left-color: #ffd700; }
  .bubble-log.log-error   { color: #ff4444; border-left-color: #ff4444; }
  #chat-input-area { border-top-color: #003300; }
  #chat-input { background: #000; color: #00ff41; border-color: #003300; }
  #chat-send { background: #003300; color: #00ff41; }
  #chat-send:hover:not(:disabled) { background: #005500; }
  #chat-interrupt { background: #330000; color: #ff4444; }
  #chat-interrupt.active { background: #660000; color: #ff6666; }
  .toggle-track { background: #003300; }
  .toggle-input:checked + .toggle-track { background: #00ff41; }
  .toggle-thumb { background: #000; }
  #config-panel a { color: #00ff41; }
  #restart-banner { background: #002200; border-color: #00aa33; color: #00ff41; }
  #cfg-error-banner { background: #220000; border-color: #aa3300; color: #ff8844; }
  #cfg-loading-banner { background: #002200; border-color: #00aa33; color: #00ff41; }
  #cfg-confirm-banner,
  #cfg-proposals-banner { background: #222200; border-color: #888800; color: #ffff44; }
  #interactive-mode-banner { background: #002200; border-color: #00aa33; color: #00ff41; }
  #ollama-status-banner { background: #220000; border: 1px solid #aa0000; color: #ff4444; }
  #conn-status { color: #00ff41 !important; }
  .cfg-cheatsheet > summary { color: #00ff41; }
  .cfg-cheatsheet-group { background: #000; border-color: #003300; }
  .cfg-cheatsheet-title { color: #008a20; }
  .cfg-cheatsheet-group li { color: #00cc44; }
  .cfg-cheatsheet-group code { background: #0d0d0d; border-color: #003300; color: #00ff41; }
  .cfg-cheatsheet-arrow { color: #008a20; }
  .cfg-cheatsheet-group kbd { background: #000; color: #00ff41; border-color: #003300; }
  .cfg-cheatsheet-note { color: #008a20; }
  .cfg-cheatsheet-note code { background: #0d0d0d; border-color: #003300; color: #00cc44; }
  .bubble-typing { background: #001a00; color: #00ff41; }
  .typing-dots span { background: #00ff41; }
  .bubble.bubble-pending { opacity: 0.6; }
  .bubble.bubble-queued .bubble-meta::after { color: #00aa33; }
  .bubble.bubble-stt-ghost { opacity: 0.7; }
  #logs-paused { color: #00aa33; }
  .cfg-field-check--disabled { opacity: 0.45; }
  .cfg-field-check--disabled span { cursor: help; }
  .cfg-field-check small { color: #005500; }
  .cfg-cheatsheet-badge { background: #002200; color: #00aa33; border-color: #005500; }
  .cfg-btn.cfg-btn-ghost { border-color: #003300; }
  .cfg-btn.cfg-btn-ghost:hover { background: #001a00; }
  .cfg-field-check input[type="checkbox"] { accent-color: #00ff41; }
  .bubble-meta { color: #008a20; }
  .bubble-model { color: #00aa33; }
  #chat-interrupt.active:hover { background: #880000; }
  #cfg-confirm-banner button,
  #cfg-proposals-banner button { border-color: #888800; color: #ffff44; }
  #cfg-confirm-banner button:hover,
  #cfg-proposals-banner button:hover { background: #333300; color: #fff; }
  #restart-banner button { color: #00ff41; }
  #restart-banner button:hover { color: #fff; }
  #cfg-error-banner button { color: #ff8844; }
  #cfg-error-banner button:hover { color: #fff; }
  #cfg-confirm-banner .cfg-confirm-text,
  #cfg-proposals-banner .cfg-confirm-text { color: #ffff44; }
  #interactive-mode-banner .interactive-mode-text { color: #00ff41; }
  #ollama-banner-text { color: #ff4444; }
  #ollama-banner-refresh { background: #330000; color: #ff4444; border: 1px solid #aa0000; }
  #ollama-banner-refresh:hover { background: #550000; }
  #memory-import-name { color: #008a20; }
  #memory-import-result { color: #00ff41; }
  .cfg-field-check span small { color: #005500; }
  .cfg-field-check--disabled span small { color: #333; }
  .cfg-field-check--disabled span { color: #555; }
  .cfg-field-check--disabled input[type="checkbox"] { accent-color: #333; }
  .cfg-field-check--disabled .toggle-track { background: #222; }
  .cfg-field-check--disabled .toggle-input:checked + .toggle-track { background: #222; }
  .cfg-field-check--disabled .toggle-thumb { background: #444; }
  .cfg-field-check--disabled .toggle-input:checked + .toggle-track .toggle-thumb { left: 2px; }
  .cfg-field-check--disabled span { cursor: help; }
  .cfg-field-check--disabled input[type="checkbox"] { cursor: not-allowed; }
  .cfg-field-check--disabled .toggle-label { cursor: not-allowed; }
  .cfg-field-check--disabled .toggle-track { cursor: not-allowed; }
  .cfg-field-check--disabled .toggle-thumb { cursor: not-allowed; }
  #main-layout { display: flex; flex: 1; overflow: hidden; }
  #left-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 200px; }
  #graph { width: 100%; height: 45vh; background: #0a0a0a; border: 1px solid #00ff41; flex-shrink: 0; position: relative; min-height: 200px; }
  #info { padding: 10px 20px; font-size: 0.85rem; flex-shrink: 0; overflow-y: auto; min-height: 60px; position: relative; }
  .row { margin: 4px 0; }
  .label { color: #888; }
  #config-panel { flex: 1; min-width: 240px; background: #0a0a0a; display: flex; flex-direction: column; overflow: hidden; }
  #cfg-scroll { padding: 10px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

  /* card base — todas las secciones del panel usan esto */
  .cfg-section { background: #0d0d0d; border: 1px solid #003300; border-radius: 8px; padding: 10px 12px; flex-shrink: 0; }
  .cfg-section h4 { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #00aa33; margin: 0 0 8px 0; padding-bottom: 5px; border-bottom: 1px solid #003300; }

  /* grid responsivo — usa todo el ancho disponible */
  .cfg-grid { display: flex; flex-wrap: wrap; gap: 8px 10px; }
  .cfg-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 120px; min-width: 100px; }
  .cfg-field label { font-size: 0.7rem; color: #008a20; white-space: nowrap; }
  .cfg-field input[type="number"],
  .cfg-field select { background: #000; color: #00ff41; border: 1px solid #003300; border-radius: 4px; padding: 4px 7px; font-size: 0.82rem; width: 100%; box-sizing: border-box; }
  .cfg-field input[type="number"]:focus,
  .cfg-field select:focus { outline: none; border-color: #00ff41; }
  /* select de voz ocupa más espacio */
  .cfg-field.cfg-field-wide { flex: 2 1 200px; }
  /* grid de providers de routing: 2 columnas fijas, cada campo respira */
  .cfg-grid--routing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
  .cfg-grid--routing .cfg-field-full { grid-column: 1 / -1; }

  /* fila de checkboxes */
  .cfg-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
  .cfg-grid + .cfg-checks { margin-top: 10px; }
  .cfg-field-check { display: flex; align-items: center; gap: 6px; }
  .cfg-field-check input[type="checkbox"] { accent-color: #00ff41; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; margin: 0; }
  .cfg-field-check span { font-size: 0.8rem; color: #00cc44; cursor: pointer; white-space: nowrap; }
  .cfg-field-check small { font-size: 0.66rem; color: #005500; margin-left: 3px; }
  .cfg-field-check--disabled { opacity: 0.45; }
  .cfg-field-check--disabled input[type="checkbox"] { cursor: not-allowed; }
  .cfg-field-check--disabled span { cursor: help; }

  /* cheatsheet plegable dentro de una sección */
  .cfg-cheatsheet { margin-top: 8px; border-top: 1px solid #003300; padding-top: 8px; }
  .cfg-cheatsheet > summary { font-size: 0.72rem; color: #00ff41; cursor: pointer; user-select: none; list-style: none; padding: 2px 0; }
  .cfg-cheatsheet > summary::-webkit-details-marker { display: none; }
  .cfg-cheatsheet > summary::before { content: "â–¸ "; color: #00ff41; font-size: 0.7rem; }
  .cfg-cheatsheet[open] > summary::before { content: "â–¾ "; }
  .cfg-cheatsheet-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .cfg-cheatsheet-group { background: #000; border: 1px solid #003300; border-radius: 5px; padding: 6px 8px; }
  .cfg-cheatsheet-title { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #008a20; margin-bottom: 4px; }
  .cfg-cheatsheet-badge { font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; background: #002200; color: #00aa33; border: 1px solid #005500; border-radius: 3px; padding: 1px 5px; margin-left: 6px; cursor: help; vertical-align: middle; }
  .cfg-cheatsheet-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
  .cfg-cheatsheet-group li { font-size: 0.74rem; color: #00cc44; line-height: 1.35; }
  .cfg-cheatsheet-group code { background: #0d0d0d; color: #00ff41; border: 1px solid #003300; border-radius: 3px; padding: 1px 5px; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 0.72rem; }
  .cfg-cheatsheet-arrow { color: #008a20; margin: 0 2px; }
  .cfg-cheatsheet-group kbd { background: #000; color: #00ff41; border: 1px solid #003300; border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 0.69rem; white-space: nowrap; }
  .cfg-cheatsheet-note { font-size: 0.7rem; color: #008a20; line-height: 1.4; padding: 0 2px; }
  .cfg-cheatsheet-note code { background: #0d0d0d; border: 1px solid #003300; border-radius: 3px; padding: 0 4px; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 0.68rem; color: #00cc44; }

  /* pie de sección: botón guardar + mensaje */
  .cfg-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #003300; }
  .cfg-btn { background: #003300; color: #00ff41; border: none; border-radius: 5px; padding: 4px 14px; font-size: 0.78rem; cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
  .cfg-btn:hover { background: #005500; }
  .cfg-btn.cfg-btn-ghost { background: transparent; border: 1px solid #003300; color: #00ff41; }
  .cfg-btn.cfg-btn-ghost:hover { background: #001a00; }
  .cfg-btn.cfg-btn-primary { background: #005500; border: 1px solid #00bb44; color: #00ff88; font-weight: 600; min-width: 120px; }
  .cfg-btn.cfg-btn-primary:hover { background: #007700; border-color: #00ff41; }
  .cfg-msg { font-size: 0.73rem; color: #00ff41; }

  /* Resize dividers (siblings between flex items) */
  .resize-divider { background: #003300; flex-shrink: 0; transition: background 0.15s; }
  .resize-divider:hover { background: #00ff41; }
  .resize-divider.horizontal { height: 6px; width: 100%; cursor: ns-resize; }
  .resize-divider.vertical { width: 6px; cursor: ew-resize; align-self: stretch; }
  #cfg-status-bar {
    flex-shrink: 0;
    background: #0a0a0a;
    border-bottom: 1px solid #003300;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #cfg-status {
    font-size: 0.73rem;
    color: #00ff41;
    transition: opacity 0.3s;
  }

  /* Chat panel */
  #chat-panel { flex-shrink: 0; height: 320px; min-height: 120px; display: flex; flex-direction: column; background: #0a0a0a; position: relative; overflow: hidden; }
#chat-title { padding: 10px 14px; font-size: 1rem; font-weight: bold; border-bottom: 1px solid #003300; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
#chat-clear { background: #003300; color: #00ff41; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.75rem; }
#chat-clear:hover { background: #005500; }

  /* Bottom row inside left-panel: logs (left) + memory (right) */
  #bottom-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }

  /* Logs panel */
  #logs-panel { width: 360px; min-width: 200px; display: flex; flex-direction: column; background: #050505; flex-shrink: 0; position: relative; height: 100%; overflow: hidden; }
  #logs-title { padding: 10px 14px; font-size: 1rem; font-weight: bold; border-bottom: 1px solid #003300; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #logs-stream { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; font-family: monospace; font-size: 0.8rem; }
  #logs-clear { background: #003300; color: #00ff41; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.75rem; }
  #logs-clear:hover { background: #005500; }
  #logs-paused { color: #ffaa00; font-size: 0.7rem; margin-left: 6px; display: none; }
  #logs-paused.visible { display: inline; }
  #chat-history { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
  #chat-history > *:first-child { margin-top: auto; }
  .bubble { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 0.85rem; word-break: break-word; }
  .bubble-user { align-self: flex-end; background: #003300; color: #00ff41; border-bottom-right-radius: 2px; }
  .bubble-jarvis { align-self: flex-start; background: #001a00; color: #00ff41; border-bottom-left-radius: 2px; }
  .bubble-jarvis strong { font-weight: 700; }
  .bubble-jarvis em { font-style: italic; opacity: 0.92; }
  .bubble-jarvis code { font-family: monospace; background: rgba(255,255,255,0.08); padding: 1px 4px; border-radius: 3px; font-size: 0.88em; }
  .bubble-jarvis pre { background: rgba(0,0,0,0.25); border-radius: 6px; padding: 8px 12px; overflow-x: auto; margin: 4px 0; }
  .bubble-jarvis pre code { background: none; padding: 0; }
  .bubble-jarvis h3, .bubble-jarvis h4, .bubble-jarvis h5 { margin: 4px 0 2px; font-weight: 600; }
  .bubble-jarvis h3 { font-size: 1.1em; }
  .bubble-jarvis h4 { font-size: 1.0em; }
  .bubble-jarvis h5 { font-size: 0.95em; }
  .bubble-jarvis a { color: #66ff66; text-decoration: underline; }
  .bubble-meta { font-size: 0.7rem; opacity: 0.7; margin-top: 4px; }
  .bubble-model { font-style: italic; opacity: 0.85; margin-left: 4px; }
  #chat-input-area { border-top: 1px solid #003300; padding: 8px; display: flex; gap: 6px; flex-shrink: 0; }
  #chat-input { flex: 1; background: #000; color: #00ff41; border: 1px solid #003300; padding: 6px 10px; border-radius: 6px; font-size: 0.9rem; font-family: inherit; resize: vertical; min-height: 36px; max-height: 160px; line-height: 1.4; }
  #chat-input:disabled { cursor: not-allowed; opacity: 0.6; }
  #chat-send { background: #003300; color: #00ff41; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; }
  #chat-send:hover:not(:disabled) { background: #005500; }
  #chat-send:disabled { cursor: not-allowed; opacity: 0.6; }
  /* Toggle de modo del mensaje: normal | plan | feature (pegajoso, localStorage) */
  .chat-mode-toggle { display: inline-flex; align-self: center; border: 1px solid #003300; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
  .chat-mode-btn { background: transparent; color: #00aa33; border: none; padding: 5px 8px; font-size: 0.72rem; cursor: pointer; font-family: inherit; line-height: 1.3; white-space: nowrap; transition: background 0.12s, color 0.12s; }
  .chat-mode-btn + .chat-mode-btn { border-left: 1px solid #003300; }
  .chat-mode-btn:hover:not(.active) { background: #002200; color: #00ff41; }
  .chat-mode-btn.active { background: #00ff41; color: #000; font-weight: bold; }
  .chat-mode-btn.active[data-mode="plan"] { background: #3b82f6; color: #fff; }
  .chat-mode-btn.active[data-mode="feature"] { background: #f59e0b; color: #000; }
  #chat-interrupt { background: #555; color: #ccc; border: none; padding: 6px 12px; border-radius: 6px; cursor: not-allowed; font-size: 0.9rem; opacity: 0.6; transition: background 0.15s, color 0.15s, opacity 0.15s; }
  #chat-interrupt.active { background: #e94560; color: #fff; cursor: pointer; opacity: 1; }
  #chat-interrupt.active:hover { background: #c73652; }
  .header-badge { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; border: 1px solid #003300; background: #001a00; transition: background 0.15s; }
  .header-badge:hover { background: #003300; }
  .badge-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background 0.2s; }
  .badge-dot.on  { background: #25d366; }
  .badge-dot.off { background: #555; }
  .ss-mon-btn { background: #001a00; color: #00cc33; border: 1px solid #003300; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-family: inherit; line-height: 1.3; white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
  .ss-mon-btn:hover:not(:disabled) { background: #003300; border-color: #005500; color: #00ff41; }
  .ss-mon-btn:disabled { cursor: not-allowed; opacity: 0.45; }
  #chat-teach-toggle { background: #001a00; color: #00cc33; border: 1px solid #003300; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-family: inherit; line-height: 1.3; white-space: nowrap; transition: background 0.12s, border-color 0.12s, color 0.12s; }
  #chat-teach-toggle:hover:not(:disabled) { background: #003300; border-color: #005500; color: #00ff41; }
  #chat-teach-toggle.recording { background: #1a0000; color: #ff4444; border-color: #660000; }
  #chat-teach-toggle.recording:hover { background: #2a0000; border-color: #880000; }

  /* Typing indicator */
  .bubble-typing { align-self: flex-start; background: #001a00; color: #00ff41; border-bottom-left-radius: 2px; padding: 10px 16px; }
  .typing-dots { display: inline-flex; gap: 4px; align-items: center; }
  .typing-dots span {
    width: 7px; height: 7px; border-radius: 50%; background: #aaa;
    animation: typing-bounce 1.2s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
  }
  /* Fast blink when LLM takes >3s */
  .typing-fast .typing-dots span {
    animation-duration: 0.5s;
  }

  /* Optimistic pending bubble */
  .bubble.bubble-pending { opacity: 0.6; animation: pending-pulse 1.2s infinite ease-in-out; }
  @keyframes pending-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }
  /* Queued bubble — mensaje en cola FIFO esperando que Jarvis vuelva a idle */
  .bubble.bubble-queued .bubble-meta::after {
    content: " · en cola";
    color: #ffaa00;
    font-size: 0.85em;
  }
  /* STT ghost bubble (recording / transcribing) */
  .bubble.bubble-stt-ghost { opacity: 0.7; font-style: italic; }
  .bubble.bubble-stt-ghost .stt-mic { display: inline-block; animation: stt-mic-pulse 1s infinite ease-in-out; }
  @keyframes stt-mic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

  /* Log bubbles */
  .bubble-log {
    align-self: flex-start;
    background: #000;
    color: #00ff41;
    font-family: monospace;
    font-size: 0.8rem;
    border-left: 3px solid #00ff41;
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 95%;
    word-break: break-all;
    min-height: 20px;
  }
  .bubble-log.log-warning { color: #ffd700; border-left-color: #ffd700; }
  .bubble-log.log-error   { color: #ff4444; border-left-color: #ff4444; }
  .bubble-log-icon { margin-right: 4px; }
  #chat-history.logs-hidden .bubble-log { display: none; }
  /* Truncamiento solo en dashboard: el stdout muestra logs completos. */
  .bubble-log.log-truncated {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
    min-height: 20px;
  }
  .bubble-log.log-expanded {
    white-space: pre-wrap;
    overflow: auto;
    word-break: break-all;
    cursor: pointer;
  }

  /* Linea viva transitoria "trabajando..." del hilo enfocado mientras corre un
     job agent_action (thread_live_status). No es un ThreadTurn: se pinta al final
     del chat y desaparece cuando el job termina, cediendo sitio al resultado. */
  .bubble-working {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,229,255,0.06);
    border: 1px dashed rgba(0,229,255,0.4);
    color: #9fd8e0;
    font-size: 0.8rem;
    font-style: italic;
    border-radius: 8px;
    padding: 5px 10px;
    margin: 4px 0;
    max-width: 85%;
    opacity: 0.92;
  }
  .bubble-working .bubble-working-spinner {
    display: inline-block;
    animation: bubble-working-spin 1.6s linear infinite;
  }
  @keyframes bubble-working-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ── Feature #145: burbuja thinking colapsable ──────────────────────── */
  .bubble-thinking {
    align-self: flex-start;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    margin: 4px 0;
    max-width: 85%;
    font-size: 0.8rem;
  }
  .thinking-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: #888;
  }
  .thinking-icon { font-size: 1rem; }
  .thinking-label { flex: 1; font-style: italic; }
  .thinking-toggle {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
  }
  .thinking-toggle:hover { border-color: #00ff41; color: #00ff41; }
  .thinking-body {
    display: none;
    padding: 6px 10px;
    color: #666;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid #222;
  }
  .bubble-thinking.expanded .thinking-body { display: block; }
  .bubble-thinking.expanded .thinking-toggle { color: #00ff41; border-color: #00ff41; }

  /* ── Feature #145: panel de pausa en tasks ──────────────────────────── */
  #tasks-pause-btn {
    background: #221100;
    color: #ffaa00;
    border: 1px solid #ffaa00;
    border-radius: 4px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 4px;
  }
  #tasks-pause-btn:hover { background: #332200; }
  #tasks-pause-panel {
    margin-top: 8px;
    padding: 8px;
    background: #111;
    border: 1px solid #ffaa00;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tasks-pause-label { font-size: 0.75rem; color: #ffaa00; }
  .tasks-pause-input {
    background: #000;
    color: #00ff41;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px 6px;
    font-family: inherit;
    font-size: 0.8rem;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
  }
  .tasks-pause-actions { display: flex; gap: 6px; }
  .tasks-pause-actions button {
    flex: 1;
    background: transparent;
    color: #00ff41;
    border: 1px solid #00ff41;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
  }
  .tasks-pause-actions button:hover { background: #003300; }

  /* ── Teach Fase 2b: feedback en vivo + pantalla de revisión ───────────── */
  #teach-steps {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #003300;
    border-radius: 4px;
    padding: 4px 6px;
    background: #000a00;
  }
  .teach-step-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #00cc33;
    padding: 1px 0;
  }
  .teach-step-text { word-break: break-word; }
  .teach-step-thumb {
    width: 60px;
    height: 38px;
    object-fit: cover;
    border: 1px solid #333;
    border-radius: 3px;
    flex-shrink: 0;
  }
  #teach-review {
    border: 1px solid #005500;
    border-radius: 6px;
    padding: 8px 10px;
    background: #001200;
  }
  .teach-review-title { font-size: 0.8rem; font-weight: bold; color: #00ff41; margin-bottom: 2px; }
  .teach-review-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
  }
  .teach-review-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.72rem;
    color: #cccccc;
    cursor: pointer;
  }
  .teach-review-keep { margin-top: 2px; flex-shrink: 0; accent-color: #00ff41; }
  .teach-review-desc { word-break: break-word; }
  .teach-review-empty { font-size: 0.72rem; color: #888; font-style: italic; }
  .teach-review-trig-label { font-size: 0.7rem; color: #888; }
  .teach-review-triggers {
    background: #000a00;
    color: #00ff41;
    border: 1px solid #003300;
    border-radius: 4px;
    padding: 5px 8px;
    font-family: inherit;
    font-size: 0.75rem;
    width: 100%;
    box-sizing: border-box;
  }
  .teach-review-triggers:focus { outline: none; border-color: #00ff41; }
  .teach-review-actions { display: flex; gap: 8px; }
  .teach-review-actions button {
    background: #001a00;
    color: #00cc33;
    border: 1px solid #003300;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
  }
  .teach-review-actions button:hover:not(:disabled) { background: #003300; border-color: #005500; color: #00ff41; }
  .teach-review-actions button:disabled { opacity: 0.5; cursor: default; }
  #teach-review-cancel { color: #cc6666; border-color: #330000; }
  #teach-review-cancel:hover:not(:disabled) { background: #2a0000; border-color: #660000; color: #ff8888; }
  .teach-review-result { font-size: 0.72rem; padding: 4px 0; }
  .teach-review-ok { color: #00ff41; }
  .teach-review-err { color: #ff6666; }

  /* Toggle pill (compartido entre Logs / Watch) */
  .toggle-label { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: normal; color: #888; cursor: pointer; user-select: none; }
  .toggle-input { display: none; }
  .toggle-track { width: 28px; height: 15px; background: #333; border-radius: 8px; position: relative; transition: background 0.2s; flex-shrink: 0; }
  .toggle-input:checked + .toggle-track { background: #00ff41; }
  .toggle-thumb { width: 11px; height: 11px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left 0.2s; }
  .toggle-input:checked + .toggle-track .toggle-thumb { left: 15px; }

  #config-panel a { color: #00ff41; text-decoration: none; }
  #config-panel a:hover { text-decoration: underline; }

  /* ── Tab navigation ────────────────────────────────────────────────── */
  #cfg-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 0 4px 0;
    border-bottom: 1px solid #003300;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #0a0a0a;
    z-index: 2;
  }
  .cfg-tab {
    background: transparent;
    color: #00aa33;
    border: 1px solid #003300;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.2);
    box-shadow: 0 0 4px rgba(0, 255, 65, 0.05);
  }
  .cfg-tab:hover {
    color: #00ff41;
    background: rgba(0, 255, 65, 0.1);
    border-color: #00ff41;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.2);
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.4);
  }
  .cfg-tab.active {
    color: #000;
    background: #00ff41;
    border-color: #00ff41;
    border-bottom-color: #00ff41;
    text-shadow: none;
    font-weight: bold;
    box-shadow: 0 0 12px #00ff41;
  }
  .cfg-tab-content {
    display: none;
  }
  .cfg-tab-content.active {
    display: block;
  }

  /* Banner de reinicio (campos no-hot) */
  #restart-banner {
    background: #002200;
    border: 1px solid #00aa33;
    color: #00ff41;
    padding: 8px 12px;
    font-size: 0.82rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
  }
  #restart-banner button {
    background: transparent;
    border: none;
    color: #00ff41;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
  }
  #restart-banner button:hover { color: #fff; }

  /* Banner de error persistente (warmup fallido, revert, etc.) */
  #cfg-error-banner {
    background: #3a1a1a;
    border: 1px solid #964a2a;
    color: #f8b88e;
    padding: 8px 12px;
    font-size: 0.82rem;
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    line-height: 1.35;
  }
  #cfg-error-banner .cfg-error-text { flex: 1; word-break: break-word; }
  #cfg-error-banner button {
    background: transparent;
    border: none;
    color: #f8b88e;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
  }
  #cfg-error-banner button:hover { color: #fff; }

  /* Banner de loading durante POST /api/config (cold-load Ollama 60s). */
  #cfg-loading-banner {
    background: #002200;
    border: 1px solid #00aa33;
    color: #00ff41;
    padding: 8px 12px;
    font-size: 0.82rem;
    display: none;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    line-height: 1.35;
  }
  #cfg-loading-banner .cfg-loading-dots::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: cfgLoadingDots 1.2s steps(4, end) infinite;
  }
  @keyframes cfgLoadingDots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
  }

  /* Banner de confirmación interactiva (operator solicita aprobación destructiva). */
  #cfg-confirm-banner,
  #cfg-proposals-banner {
    background: #3a2e10;
    border: 1px solid #b48a2a;
    color: #ffd58a;
    padding: 8px 12px;
    font-size: 0.82rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    line-height: 1.35;
  }
  #cfg-proposals-banner { flex-direction: column; align-items: stretch; }
  #cfg-confirm-banner .cfg-confirm-text,
  #cfg-proposals-banner .cfg-confirm-text { flex: 1; word-break: break-word; }
  #cfg-confirm-banner .cfg-confirm-actions,
  #cfg-proposals-banner .cfg-confirm-actions { display: flex; gap: 6px; flex-shrink: 0; }
  #cfg-proposals-banner .cfg-confirm-text { margin-bottom: 6px; }
  #cfg-confirm-banner button,
  #cfg-proposals-banner button {
    background: transparent;
    border: 1px solid #b48a2a;
    color: #ffd58a;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 3px 12px;
    border-radius: 4px;
    line-height: 1;
  }
  #cfg-confirm-banner button:hover,
  #cfg-proposals-banner button:hover { background: #4a3a1a; color: #fff; }

  /* Feature 93: banner del modo interactivo (verde para distinguir del confirm). */
  #interactive-mode-banner {
    background: #102a18;
    border: 1px solid #2ea060;
    color: #b6f0c8;
    padding: 6px 12px;
    font-size: 0.82rem;
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    line-height: 1.35;
  }
  #interactive-mode-banner.active { display: flex; }
  #interactive-mode-banner .interactive-mode-text { flex: 1; word-break: break-word; }

  /* ── Chat action buttons (+, 👍, 👎, ⬛) ────────────────────────────── */
  .bubble-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .bubble:hover .bubble-actions {
    opacity: 1;
  }
  .bubble-action-btn {
    background: transparent;
    border: 1px solid #003300;
    color: #00ff41;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.65rem;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s;
  }
  .bubble-action-btn:hover {
    background: #003300;
    border-color: #00ff41;
  }
  .bubble-action-like:hover {
    background: #003300;
    color: #66ff66;
  }
  .bubble-action-dislike:hover {
    background: #330000;
    color: #ff6666;
    border-color: #660000;
  }
  .bubble-action-voted-positive {
    background: #004400 !important;
    color: #00ff88 !important;
    border-color: #00cc44 !important;
    opacity: 1 !important;
  }
  .bubble-action-voted-negative {
    background: #440000 !important;
    color: #ff4444 !important;
    border-color: #cc2222 !important;
    opacity: 1 !important;
  }
  .bubble-action-btn:disabled {
    cursor: default;
    opacity: 0.35;
  }
  .bubble-action-voted-positive:disabled,
  .bubble-action-voted-negative:disabled {
    opacity: 1 !important;
  }

  /* ── Reply banner (feature 142) ─────────────────────────────────────── */
  #reply-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #1a1a1a;
    border-left: 3px solid #00ff41;
    font-size: 0.78rem;
    color: #00cc33;
    flex-shrink: 0;
    overflow: hidden;
  }
  .reply-banner-label {
    flex-shrink: 0;
    opacity: 0.75;
  }
  .reply-banner-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80ch;
    opacity: 0.9;
  }
  .reply-banner-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #00ff41;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 4px;
    opacity: 0.7;
  }
  .reply-banner-close:hover {
    opacity: 1;
  }
  .bubble-reply-btn {
    font-size: 0.85rem;
  }

  /* ── Tasks panel — versión discreta (barra inferior fija, pequeña) ── */
  #tasks-panel {
    position: fixed;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(5, 5, 5, 0.92);
    border: 1px solid #003300;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    font-size: 0.7rem;
    opacity: 0.7;
    transition: opacity 0.2s;
    max-width: 90vw;
    overflow: hidden;
    width: auto;
    min-width: 0;
  }
  #tasks-panel:hover { opacity: 1; }
  #tasks-title {
    color: #008a20;
    font-size: 0.68rem;
    font-weight: normal;
    border: none;
    padding: 0;
    flex-shrink: 0;
  }
  #tasks-title::after { content: " ·"; color: #003300; }
  #tasks-body {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .tasks-label {
    font-size: 0.65rem;
    color: #006a18;
    margin-right: 2px;
  }
  #tasks-stage-row { display: flex; align-items: center; }
  #tasks-skill-row, #tasks-timer-row { display: flex; align-items: center; font-size: 0.7rem; }
  #tasks-stop-row { display: flex; }

  .tasks-stage-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: normal;
    letter-spacing: 0.03em;
    background: #222;
    color: #888;
    border: 1px solid #444;
  }
  .tasks-stage-idle      { background: #1a1a1a; color: #888;    border-color: #444; }
  .tasks-stage-listening { background: #001a33; color: #55aaff; border-color: #0055aa; }
  .tasks-stage-stt_recording  { background: #001a33; color: #55aaff; border-color: #0055aa; }
  .tasks-stage-stt_transcribing { background: #001a33; color: #55aaff; border-color: #0055aa; }
  .tasks-stage-processing,
  .tasks-stage-routing,
  .tasks-stage-llm_thinking,
  .tasks-stage-command    { background: #1a1200; color: #ffcc44; border-color: #886600; }
  .tasks-stage-speaking   { background: #001a00; color: #44ff88; border-color: #007733; }

  .tasks-timer {
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    color: #00aa2a;
    letter-spacing: 0.03em;
  }

  #tasks-stop-btn {
    background: #330000;
    color: #ff4444;
    border: 1px solid #aa2222;
    border-radius: 4px;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s, border-color 0.15s;
  }
  #tasks-stop-btn:hover {
    background: #550000;
    border-color: #ff4444;
    color: #fff;
  }

  /* ── Chat image thumbnail preview (feature #141) ────────────────────── */
  .chat-image-preview-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
  }

  .chat-image-thumb {
    max-width: 80px;
    max-height: 80px;
    border-radius: 4px;
    border: 1px solid #00ff41;
    display: block;
    cursor: default;
  }

  .chat-image-thumb-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    line-height: 14px;
    font-size: 0.75rem;
    text-align: center;
    background: #cc0000;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
  }

  .chat-image-thumb-remove:hover {
    background: #ff2222;
  }

  /* Badge "N fotogramas" sobre el thumbnail del video adjunto. */
  .chat-frames-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 0.6rem;
    line-height: 1;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #00ff41;
    border: 1px solid #00ff41;
    border-radius: 3px;
    font-family: inherit;
    pointer-events: none;
  }

  /* Estado transitorio mientras el backend extrae fotogramas. */
  .chat-frames-extracting {
    font-size: 0.7rem;
    color: #888;
    font-style: italic;
    padding: 0 6px;
  }

  #chat-history.drag-over {
    outline: 2px dashed #00ff41;
    outline-offset: -2px;
    background: rgba(0, 255, 65, 0.04);
  }

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH — fuentes futuristas, iconos SVG HUD, glassmorphism,
   glow refinado y microanimaciones. Capa final: máxima prioridad de cascada.
   Mantiene composición, layout, módulos y posiciones intactos.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes locales (offline) ─────────────────────────────────────────── */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;            /* archivo variable: cubre 400–900 */
  font-display: swap;
  src: url("/assets/fonts/Orbitron.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Rajdhani-400.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/Rajdhani-500.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/Rajdhani-600.woff2") format("woff2");
}

:root {
  --font-display: "Orbitron", "Courier New", monospace;
  --font-ui: "Rajdhani", "Consolas", "Segoe UI", sans-serif;
  --hud-glow: rgba(0, 229, 255, 0.55);
}

/* Texto de panel: Rajdhani (condensada → ligero +size para legibilidad) */
html, body { font-family: var(--font-ui); }
.modal-panel,
.modal-panel #chat-history,
.modal-panel #logs-stream,
.modal-panel .bubble,
.modal-panel .cfg-field label,
.modal-panel .cfg-field-check span,
.modal-panel #chat-input,
.modal-panel .cfg-field input,
.modal-panel .cfg-field select,
.modal-panel .cfg-field textarea,
.modal-panel .cfg-btn,
.modal-panel #chat-send,
.modal-panel .ss-mon-btn,
.modal-panel .preset-desc,
.modal-panel .cfg-cheatsheet-group li,
.modal-panel .cfg-cheatsheet-note {
  font-family: var(--font-ui);
  letter-spacing: 0.01em;
}
.modal-panel #chat-history,
.modal-panel .bubble { font-size: 0.9rem; }

/* Títulos / chrome HUD: Orbitron */
.seg-text,
.modal-header,
.modal-panel .cfg-section h4,
.modal-panel .cfg-tab,
.modal-panel #cfg-status-bar,
.modal-panel .tasks-stage-badge,
.modal-panel .preset-short,
.modal-panel #tasks-title,
.modal-panel #logs-title,
.modal-panel #chat-title {
  font-family: var(--font-display);
  font-weight: 500;
}
.modal-header { font-weight: 700; letter-spacing: 0.16em; }
.seg-text { font-weight: 500; letter-spacing: 0.16em; }

/* ── Iconos SVG HUD ────────────────────────────────────────────────────── */
.hud-icon {
  width: 30px; height: 30px;
  color: var(--circle-color);
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 0 4px var(--hud-glow));
  transition: filter 0.22s ease, transform 0.22s ease;
  vertical-align: middle;
  flex-shrink: 0;
}
.hud-icon--filled { fill: currentColor; stroke: none; }   /* logo WhatsApp */
.hud-icon--sm { width: 16px; height: 16px; filter: drop-shadow(0 0 3px rgba(0,229,255,0.45)); }

/* El icono del segmento ahora es un SVG, no glifo de fuente */
.seg-icon { font-size: 0; line-height: 0; }
.seg-icon .hud-icon { width: 28px; height: 28px; }
.seg-label:hover .hud-icon {
  filter: drop-shadow(0 0 9px var(--circle-color)) drop-shadow(0 0 2px #ffffff);
  transform: translateY(-1px) scale(1.06);
}
/* Glow del icono dentro de botones al hover */
.modal-panel button:hover .hud-icon,
.header-badge:hover .hud-icon {
  filter: drop-shadow(0 0 7px var(--circle-color));
}

/* Flechas/crosshair decorativos exteriores (referencia HUD) */
.hud-crosshair {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  color: rgba(0, 229, 255, 0.45);
  font-family: var(--font-display);
  font-size: 1.1rem;
  pointer-events: none;
  text-shadow: 0 0 6px var(--hud-glow);
  z-index: 9001;
  user-select: none;
}
.hud-crosshair.left  { left: -22px; }
.hud-crosshair.right { right: -22px; }

/* ── Glassmorphism + glow del panel lateral ────────────────────────────── */
.modal-panel {
  background: linear-gradient(135deg, rgba(8,16,16,0.93), rgba(5,11,11,0.90));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border-color: rgba(0, 229, 255, 0.50);
  box-shadow:
    0 0 26px rgba(0, 229, 255, 0.13),
    inset 0 0 0 1px rgba(0, 229, 255, 0.05);
}
/* WHY: SIN animation aquí. El deslizamiento open/close lo hace la `transition`
   base de .modal-panel (opacity + translateX). Tener además `animation:
   hud-fade-in` rompía el hot-swap entre tabs: al quitar la clase .no-anim del
   swap, el navegador re-aplicaba el keyframe y reproducía la animación de nuevo
   (cierre+apertura). Con solo transition, el swap con .no-anim es instantáneo. */
.modal-header {
  background: linear-gradient(180deg, rgba(0,229,255,0.06), transparent);
  border-bottom-color: rgba(0, 229, 255, 0.28);
}
#modal-bg-bridge {
  background: linear-gradient(135deg, rgba(8,16,16,0.93), rgba(5,11,11,0.90));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

/* Inputs / textbox: borde fino + glow limpio al focus */
.modal-panel #chat-input,
.modal-panel .cfg-field input[type="number"],
.modal-panel .cfg-field input[type="text"],
.modal-panel .cfg-field select,
.modal-panel .cfg-field textarea {
  background: rgba(0, 229, 255, 0.045);
  border: 1px solid rgba(0, 229, 255, 0.24);
  border-radius: 6px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.modal-panel #chat-input:focus,
.modal-panel .cfg-field input:focus,
.modal-panel .cfg-field select:focus,
.modal-panel .cfg-field textarea:focus {
  border-color: var(--circle-color);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.25), 0 0 12px rgba(0,229,255,0.18);
  background: rgba(0, 229, 255, 0.07);
}

/* Botones: glass + hover glow */
.modal-panel .cfg-btn,
.modal-panel #chat-send,
.modal-panel .ss-mon-btn,
.modal-panel #chat-teach-toggle,
.modal-panel #chat-standby,
.modal-panel .preset-btn {
  border-radius: 6px;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
.modal-panel .cfg-btn:hover,
.modal-panel #chat-send:hover:not(:disabled),
.modal-panel .ss-mon-btn:hover:not(:disabled),
.modal-panel #chat-teach-toggle:hover:not(:disabled),
.modal-panel #chat-standby:hover {
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.28);
  border-color: var(--circle-color);
}
.modal-panel .cfg-tab { transition: all 0.18s ease; }
.modal-panel .cfg-tab:hover { box-shadow: 0 0 8px rgba(0,229,255,0.2); }
.modal-panel .cfg-tab.active {
  background: rgba(0, 229, 255, 0.18); color: var(--circle-color);
  border-color: var(--circle-color); text-shadow: none;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

/* Contraste de labels un punto más claro */
.modal-panel .cfg-field label,
.modal-panel .cfg-field-check span { color: #9fc6cc; }

/* ── Rueda: detalles holográficos generados en circular_ui.js ──────────── */
.seg-bracket { stroke: rgba(0, 229, 255, 0.92); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.ring-tick   { stroke: rgba(0, 229, 255, 0.30); stroke-width: 1; }
.hud-rotate {
  transform-box: fill-box;
  transform-origin: center;
  animation: hud-rotate 48s linear infinite;
}

/* Breathing del círculo activo (muy sutil) */
#jarvis-circle.active { animation: hud-breathe 4.5s ease-in-out infinite; }

/* Scanner sweep tenue sobre el centro */
#circle-center::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.10) 50%, transparent 100%);
  background-size: 220% 100%;
  pointer-events: none;
  animation: hud-scan 6s ease-in-out infinite;
  z-index: 2;
  mix-blend-mode: screen;
}

/* ── Keyframes (todos sutiles) ─────────────────────────────────────────── */
@keyframes hud-breathe {
  0%, 100% { box-shadow: 0 0 18px rgba(0,229,255,0.14), inset 0 0 30px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 30px rgba(0,229,255,0.26), inset 0 0 30px rgba(0,0,0,0.6); }
}
@keyframes hud-scan {
  0%, 100% { background-position: 160% 0; opacity: 0.0; }
  50%      { background-position: -60% 0; opacity: 0.9; }
}
@keyframes hud-rotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #jarvis-circle.active,
  #circle-center::after,
  .hud-rotate { animation: none; }
}

/* ── 2ª pasada: micro-glifos JS → CSS styled spans ────────────────────── */
.hud-status       { font-family: var(--font-display); font-size: 0.82rem; line-height: 1; }
.hud-status--done { color: var(--circle-color); text-shadow: 0 0 6px rgba(0,229,255,0.6); }
.hud-status--todo { color: rgba(255,255,255,0.22); }
.hud-tip-badge    { color: #ffd700; font-size: 0.65rem; vertical-align: middle; }
.hud-kind         { font-family: var(--font-display); font-size: 0.88rem; line-height: 1; }
.hud-kind--rec    { color: var(--circle-color); text-shadow: 0 0 5px rgba(0,229,255,0.5); }
.hud-kind--one    { color: #7fdbff; }

/* ── Vista mes: toggle Lista/Mes + grid mensual ───────────────────────── */
.cal-toggle { display: inline-flex; border: 1px solid rgba(0,229,255,0.28); border-radius: 4px; overflow: hidden; }
.cal-toggle-btn {
  background: transparent; color: #7a8fa8; border: none; cursor: pointer;
  padding: 2px 9px; font-size: 0.7rem; font-family: inherit; line-height: 1.4;
}
.cal-toggle-btn:hover { background: rgba(0,229,255,0.10); }
.cal-toggle-btn--active { background: rgba(0,229,255,0.20); color: var(--circle-color); }

.cal-grid-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-grid-label { font-size: 0.78rem; color: var(--circle-color); letter-spacing: 0.04em; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell {
  position: relative; min-height: 32px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  font-size: 0.72rem; border-radius: 4px; padding: 2px 0 0;
}
.cal-cell--head { min-height: 0; color: #556; font-size: 0.62rem; font-weight: bold; padding: 0 0 2px; }
.cal-cell--empty { background: transparent; }
.cal-cell--day { background: rgba(255,255,255,0.03); color: #cfe; cursor: pointer; }
.cal-cell--day:hover { background: rgba(0,229,255,0.14); }
.cal-cell--has { background: rgba(255,255,255,0.06); }
.cal-cell--today { outline: 1px solid var(--circle-color); color: var(--circle-color); }
.cal-daynum { line-height: 1.2; }
.cal-dots { display: flex; gap: 2px; height: 6px; margin-top: 1px; }

.cal-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.cal-dot--rem { background: #ff9f43; }            /* recordatorios: naranja */
.cal-dot--event { background: #2e9fff; }          /* eventos calendar: azul */

.cal-day-row { display: flex; align-items: center; gap: 5px; padding: 2px 0; color: #cfe; }
.cal-dot--routine { background: #b07cff; }        /* rutinas: violeta */

.cal-legend {
  display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 0.62rem; color: #7a8fa8;
}
.cal-legend .cal-dot { margin-left: 6px; }
.cal-legend .cal-dot:first-child { margin-left: 0; }

/* ── Overlay del calendario (modal de día / edición / evento Google) ──
   A nivel de body, por encima de .modal-panel (9100); cubre también la
   ventana nativa en modo detached. */
.cal-overlay {
  position: fixed; inset: 0; z-index: 9300;
  background: rgba(2,8,12,0.66); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  -webkit-app-region: no-drag;
}
.cal-overlay-box {
  width: min(440px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 28px));
  display: flex; flex-direction: column;
  background: #070d0d; border: 1px solid rgba(0,229,255,0.42);
  border-radius: 8px; box-shadow: 0 0 24px rgba(0,229,255,0.18);
}
.cal-overlay-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid rgba(0,229,255,0.18);
  color: var(--circle-color); font-size: 0.8rem; letter-spacing: 0.04em;
}
.cal-overlay-header span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-overlay-body { padding: 10px; overflow-y: auto; font-size: 0.75rem; color: #cfe; }

.cal-ovl-section { color: #7a8fa8; font-size: 0.66rem; margin: 8px 0 3px; letter-spacing: 0.06em; }
.cal-ovl-section:first-child { margin-top: 0; }
.cal-day-row--click { cursor: pointer; border-radius: 4px; padding: 3px 4px; }
.cal-day-row--click:hover { background: rgba(0,229,255,0.10); }
.cal-day-row--paused { opacity: 0.45; }
.cal-ro-badge {
  font-size: 0.62rem; color: #7a8fa8; border: 1px solid #2a3a4a;
  border-radius: 3px; padding: 0 4px; margin-left: 6px; white-space: nowrap;
}
.cal-edit-label { display: block; font-size: 0.68rem; color: #7a8fa8; margin-bottom: 3px; }

/* ── Chips de hora de aviso (eventos agrupados por event_key) ──
   Un evento del cuadrante crea 2 avisos; cada chip es un aviso y
   abre su modal de edición al hacer click. */
.cal-rem-chips { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; vertical-align: middle; }
.cal-rem-chip {
  display: inline-block; cursor: pointer;
  font-size: 0.68rem; line-height: 1.5; color: #7fdbff;
  background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.28);
  border-radius: 3px; padding: 0 5px; white-space: nowrap;
}
.cal-rem-chip:hover { background: rgba(0,229,255,0.20); color: var(--circle-color); }
.cal-rem-chip--paused { opacity: 0.45; }
.cal-rem-chip-sep { color: #555e72; font-size: 0.68rem; }

/* ──────── Entrenamiento de wake word ──────── */
#wake-train-panel {
  padding: 12px 14px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,229,255,0.14); border-radius: 6px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.wake-train-hint { font-size: 0.72rem; color: #7a8fa8; margin: 0; }
.wake-train-step-label { font-size: 0.74rem; color: var(--circle-color); margin-bottom: 8px; font-weight: 600; }
.wake-train-progress-track { background: rgba(255,255,255,0.06); border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 10px; }
.wake-train-progress-fill { height: 100%; background: #2ecc71; width: 0%; transition: width 0.3s; }
.wake-train-counters { font-size: 0.72rem; color: var(--circle-color); margin-bottom: 6px; }
.wake-train-msg { font-size: 0.7rem; color: #7a8fa8; min-height: 16px; margin-bottom: 10px; }
.wake-train-error { font-size: 0.74rem; color: #ff8888; margin: 0 0 12px; }
.wake-train-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin-bottom: 12px; }
.wake-train-table tr { border-bottom: 1px solid rgba(0,229,255,0.14); }
.wake-train-table td { padding: 5px 4px; color: #cfe; }
.wake-train-sum-label { color: #7a8fa8; padding-right: 12px; }
.wake-train-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wake-train-btn { padding: 5px 16px; font-size: 0.74rem; }

/* ============================================================
   F1 chat_tabs_scaffold — 3 tabs + lista/chat de hilos
   Reutiliza --circle-color y la paleta rgba(0,229,255,*)
   ============================================================ */

/* Barra de tabs por IntentType */

#thread-tabs {
  flex-shrink: 0;
  display: flex; gap: 4px;
  padding: 4px 8px 6px;
  border-bottom: 1px solid rgba(0,229,255,0.18);
}

/* Boton de tab; .active resalta el tab elegido */
.thread-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 3px 10px; font-size: 0.72rem; cursor: pointer;
  background: rgba(0,229,255,0.04); color: #8ab8b8;
  border: 1px solid rgba(0,229,255,0.18); border-radius: 4px;
}
/* Los 3 tabs de scope se reparten equidistantes a lo ancho */
.thread-tab[data-type] { flex: 1 1 0; min-width: 0; }
.thread-tab .thread-tab-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-tab:hover { border-color: var(--circle-color); }
.thread-tab.active {
  background: rgba(0,229,255,0.14); color: var(--circle-color);
  border-color: rgba(0,229,255,0.4);
}
/* "+ nuevo hilo" fuera del reparto; separado con un gap claro a la derecha */
.thread-tab-new {
  flex: 0 0 auto; margin-left: 10px; white-space: nowrap;
  color: var(--circle-color);
}
.thread-tab-new:hover { background: rgba(0,229,255,0.12); }

/* Contador de hilos del tab */
.thread-tab-count {
  min-width: 16px; padding: 0 5px; font-size: 0.66rem;
  text-align: center; border-radius: 8px;
  background: rgba(0,229,255,0.12); color: var(--circle-color);
  transition: background 0.14s ease;
}

/* F5: tab con algun hilo running. Un punto cyan que late, antepuesto al texto,
   avisa de actividad en ESE tab aunque no sea el activo (paralelismo visible).
   El contador se realza para reforzar la senal. */
.thread-tab-running { color: #cfeef2; }
.thread-tab-running::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 2px; border-radius: 50%;
  background: var(--circle-color); box-shadow: 0 0 6px var(--circle-color);
  animation: thread-pulse 1.2s ease-in-out infinite;
}
.thread-tab-running .thread-tab-count {
  background: rgba(0,229,255,0.24); color: #eafcff;
}

/* Vistas mutuamente excluyentes dentro del chat-panel */
#thread-list-view {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
#thread-chat-view {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.thread-list-empty {
  color: #5a7a7a; font-size: 0.74rem; text-align: center;
  padding: 16px 8px;
}

/* Shell del cajon de archivados: contenedores son shells de layout
   transparentes; NO re-tematizan .thread-card (hereda base cyan/matrix tal
   cual). El gap:6px de #thread-list-view separa los 3 bloques; cada lista da
   su propio gap. */
#thread-active-list { display: flex; flex-direction: column; gap: 6px; }
#thread-archive-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

/* Hint tenue de 0 activos (solo si hay archivados). */
.thread-list-active-empty {
  color: #5a7a7a; font-size: 0.72rem; text-align: center;
  padding: 10px 8px; opacity: 0.75;
}
.thread-list-active-empty[hidden] { display: none; }

/* Cajon: oculto si N=0. */
#thread-archive[hidden] { display: none; }
#thread-archive { display: flex; flex-direction: column; }

/* ===== Sub-tab Modo Trader ===== */
.thread-tab-trader { flex: 0 0 auto; color: var(--circle-color); }

/* Mensajes de tick del trader (model_name=trader, texto empieza por "Tick:"):
   se ocultan del hilo — solo generan ruido, el estado real está en el panel. */
.bubble-trader-tick { display: none !important; }

#trader-panel-view {
  flex: 1; min-height: 0; overflow-y: auto; position: relative;
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
}

.trader-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid rgba(0,229,255,0.18);
  border-radius: 6px; background: rgba(0,229,255,0.04);
}
.trader-engine { display: flex; align-items: center; gap: 8px; }
.trader-engine-label {
  font-size: 0.72rem; color: #8ab8b8;
  text-transform: uppercase; letter-spacing: .04em;
}
.trader-global-stats { display: flex; gap: 14px; margin-left: auto; align-items: center; }
.trader-stat { font-size: 0.74rem; color: #cfeef2; }
.trader-killswitch {
  font-size: 0.7rem; font-weight: 700; color: #ff8a8a;
  border: 1px solid #8a1a1a; background: #3a0f0f;
  padding: 2px 8px; border-radius: 4px;
}
.trader-new-btn {
  font-size: 0.72rem; padding: 4px 12px; cursor: pointer;
  color: var(--circle-color); background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.3); border-radius: 4px;
}
.trader-new-btn:hover { background: rgba(0,229,255,0.14); }

/* Switch ON/OFF (motor + activa por estrategia) */
.trader-switch {
  padding: 3px 12px; font-size: 0.7rem; cursor: pointer; border-radius: 12px;
  background: rgba(0,229,255,0.04); color: #8ab8b8;
  border: 1px solid rgba(0,229,255,0.2);
}
.trader-switch[aria-pressed="true"] {
  background: rgba(0,229,255,0.16); color: var(--circle-color);
  border-color: rgba(0,229,255,0.5); box-shadow: 0 0 6px rgba(0,229,255,0.4);
}
.trader-gear-btn {
  padding: 4px 6px; cursor: pointer; border-radius: 6px;
  background: rgba(0,229,255,0.04); color: #8ab8b8;
  border: 1px solid rgba(0,229,255,0.2); display: flex; align-items: center; justify-content: center;
}
.trader-gear-btn:hover {
  background: rgba(0,229,255,0.12); color: var(--circle-color);
  border-color: rgba(0,229,255,0.4);
}

#trader-strategy-list { display: flex; flex-direction: column; gap: 8px; }
.trader-card {
  border: 1px solid rgba(0,229,255,0.2); border-radius: 6px;
  padding: 10px 12px; background: rgba(0,229,255,0.03);
}
.trader-card-inactive { opacity: 0.55; }
.trader-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trader-card-name { color: var(--circle-color); font-weight: 600; font-size: 0.84rem; }
.trader-card-meta { font-size: 0.72rem; color: #8ab8b8; margin: 4px 0; }
.trader-card-desc { font-size: 0.74rem; color: #cfeef2; margin: 4px 0; }
.trader-experts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.trader-expert-chip {
  font-size: 0.66rem; padding: 1px 7px; border-radius: 8px;
  background: rgba(0,229,255,0.1); color: var(--circle-color);
  border: 1px solid rgba(0,229,255,0.22);
}
.trader-position { font-size: 0.72rem; color: #cfeef2; margin: 4px 0; }
.trader-position-long { color: #6ee7a8; }
.trader-position-short { color: #ff8a8a; }
.trader-decisions { font-size: 0.68rem; color: #7fa8a8; }
.trader-decisions div { padding: 1px 0; }
.trader-card-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.trader-card-actions button {
  font-size: 0.68rem; padding: 3px 9px; cursor: pointer; border-radius: 4px;
  background: rgba(0,229,255,0.05); color: #8ab8b8; border: 1px solid rgba(0,229,255,0.2);
}
.trader-card-actions button:hover { border-color: var(--circle-color); color: var(--circle-color); }
.trader-card-actions .te-danger:hover { color: #ff8a8a; border-color: #8a1a1a; }
.trader-card-actions button[disabled] { opacity: 0.4; cursor: not-allowed; }

.trader-empty { color: #5a7a7a; font-size: 0.74rem; text-align: center; padding: 16px 8px; }

/* Modal generar/editar (anclado a #trader-panel-view, que es position:relative) */
.trader-editor-backdrop {
  position: absolute; inset: 0; z-index: 30; background: rgba(0,8,12,0.7);
  display: flex; align-items: center; justify-content: center;
}
.trader-editor {
  width: min(420px, 92%); max-height: 88%; overflow-y: auto;
  background: #061015; border: 1px solid rgba(0,229,255,0.35);
  border-radius: 8px; box-shadow: 0 0 20px rgba(0,229,255,0.25); padding: 14px 16px;
}
.trader-editor-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; color: var(--circle-color);
}
.trader-editor-close { background: none; border: none; color: #8ab8b8; cursor: pointer; font-size: 1rem; }
.trader-editor form label { display: block; font-size: 0.72rem; color: #8ab8b8; margin: 6px 0; }
.trader-editor form input,
.trader-editor form select,
.trader-editor form textarea {
  width: 100%; margin-top: 2px; background: #0a1620; color: #eafcff;
  border: 1px solid rgba(0,229,255,0.2); border-radius: 4px; padding: 4px 6px; font-size: 0.76rem;
}
/* El popup nativo del <select> hereda mal el color: forzamos fondo oscuro y
   texto claro en cada <option> o se ven casi transparentes (texto claro sobre
   fondo claro del SO). */
.trader-editor form select option {
  background: #0a1620; color: #eafcff;
}
.trader-editor form .te-check { display: flex; align-items: center; gap: 6px; }
.trader-editor form .te-check input { width: auto; margin-top: 0; }
.te-experts legend { font-size: 0.72rem; color: #8ab8b8; }
#te-experts-list { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; }
#te-experts-list label { display: flex; gap: 6px; align-items: flex-start; font-size: 0.7rem; }
#te-experts-list label input { width: auto; margin-top: 2px; }
.trader-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.trader-editor-actions .te-save {
  color: var(--circle-color); border-color: rgba(0,229,255,0.5); background: rgba(0,229,255,0.1);
}

/* Header plegable del cajon: discreto, mismo lenguaje HUD cyan. */
.thread-archive-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 2px; padding: 7px 10px; cursor: pointer;
  background: rgba(0,229,255,0.05); color: #7fa8a8;
  border: 1px solid rgba(0,229,255,0.12); border-radius: 6px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; text-align: left;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.thread-archive-header:hover {
  background: rgba(0,229,255,0.1); border-color: var(--circle-color);
  color: var(--circle-color);
}

/* Caret: mismo glifo > que el chevron de tarjeta; rota 90 al abrir. */
.thread-archive-caret {
  display: inline-flex; font-size: 1rem; line-height: 1;
  color: rgba(0,229,255,0.5); transition: transform 0.16s ease;
}
#thread-archive.open .thread-archive-caret { transform: rotate(90deg); }
.thread-archive-label { flex: 1; }

/* Contador del cajon: pill independiente del .thread-tab-count. */
.thread-archive-count {
  flex-shrink: 0; min-width: 18px; text-align: center;
  padding: 1px 7px; border-radius: 9px;
  background: rgba(0,229,255,0.14); color: #cdeef2; font-weight: 700;
}

/* Plegado por defecto: lista oculta salvo .open. El estado lo lleva la clase
   .open (no style inline), asi toggleArchive es instantaneo y el render por
   tick no toca el display. */
#thread-archive:not(.open) #thread-archive-list { display: none; }
#thread-archive.open #thread-archive-list { display: flex; }

/* Tarjetas dentro del cajon: leve atenuacion (ya son terminales) sin romper
   el :has() de acento de borde (done verde / failed rojo / cancelled sepia
   siguen visibles, codifican el resultado). */
#thread-archive-list .thread-card { opacity: 0.86; }
#thread-archive-list .thread-card:hover { opacity: 1; }

/* Tarjeta de hilo: badge · cuerpo (titulo+meta) · chevron.
   F5: borde izquierdo de acento (3px) que codifica el estado del hilo de un
   vistazo; el cuerpo guarda jerarquia (titulo fuerte, meta tenue). */
.thread-card {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px 9px 12px; cursor: pointer;
  background: rgba(0,229,255,0.04); color: #c2d8d8;
  border: 1px solid rgba(0,229,255,0.14); border-radius: 6px;
  border-left: 3px solid rgba(0,229,255,0.22);
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.thread-card:hover {
  background: rgba(0,229,255,0.1);
  border-color: var(--circle-color);
  border-left-color: var(--circle-color);
  transform: translateX(1px);
}
.thread-card .thread-card-body { flex: 1; min-width: 0; }
.thread-card-title {
  font-size: 0.79rem; color: #d6ebeb; line-height: 1.3; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thread-card-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 0.64rem; color: #5f8585; letter-spacing: 0.02em;
}
.thread-card-time { color: #4f7070; }
/* F210: boton papelera de la tarjeta. Tenue por defecto, se realza al pasar
   por la tarjeta o el propio boton. No descuadra: flex-shrink y sin fondo. */
.thread-card-delete {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; cursor: pointer; background: transparent; border: none;
  color: #5f8585; opacity: 0.45; line-height: 1;
  transition: opacity 0.14s ease, color 0.14s ease;
}
.thread-card:hover .thread-card-delete { opacity: 0.85; }
.thread-card-delete:hover { opacity: 1; color: #ff7777; }
.thread-card-delete .hud-icon { width: 15px; height: 15px; }
.thread-card-delete:hover .hud-icon {
  filter: drop-shadow(0 0 6px rgba(255,119,119,0.6));
}
.thread-card-chevron {
  flex-shrink: 0; color: rgba(0,229,255,0.4); font-size: 1.05rem; line-height: 1;
  transition: transform 0.14s ease, color 0.14s ease;
}
.thread-card:hover .thread-card-chevron {
  color: var(--circle-color); transform: translateX(2px);
}

/* Fase 1: color stripe por intent_type (borde izquierdo). Solo visible cuando
   el estado no tiene color propio (idle). Las reglas :has() de estado, que van
   despues, tienen mayor especificidad y sobreescriben en running/done/failed. */
.thread-card-intent--agent_action   { border-left-color: rgba(156,39,176,0.75); }
.thread-card-intent--command        { border-left-color: rgba(255,140,0,0.75);  }
.thread-card-intent--conversational { border-left-color: rgba(84,110,122,0.75); }
.thread-card-intent--whatsapp       { border-left-color: rgba(0,188,212,0.75);  }
.thread-card-intent--trader         { border-left-color: rgba(0,200,83,0.75);   }

/* F5: acento de estado por borde izquierdo. Running = cyan vivo (con la
   tarjeta resaltada para que el paralelismo salte a la vista); done = verde
   tenue; failed = rojo tenue. Coherente con los colores de los badges. */
.thread-card:has(.thread-badge-running) {
  border-left-color: var(--circle-color);
  background: rgba(0,229,255,0.07);
}
.thread-card:has(.thread-badge-queued) {
  border-left-color: #ffc24d;
  background: rgba(255,194,77,0.06);
}
.thread-card:has(.thread-badge-done)   { border-left-color: rgba(0,255,136,0.55); }
.thread-card:has(.thread-badge-failed) { border-left-color: rgba(255,119,119,0.6); }
.thread-card:has(.thread-badge-cancelled) { border-left-color: rgba(185,160,126,0.55); }

/* Barra de la vista de chat de un hilo: boton volver a la lista */
#thread-chat-bar {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 4px 8px 6px;
}
#thread-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 0.7rem; cursor: pointer;
  background: rgba(0,229,255,0.06); color: #8ab8b8;
  border: 1px solid rgba(0,229,255,0.18); border-radius: 4px;
}
#thread-back-btn:hover {
  color: var(--circle-color); border-color: var(--circle-color);
}

/* F214: indicador de estado del hilo CON TEXTO. Antes era un punto vacio de
   8px (no se veia si los hilos corrian en paralelo). Ahora es un pill con
   etiqueta legible ('en curso'/'en cola'/'hecho'/'fallo'); idle queda discreto
   (un punto). position:relative aloja efectos ::after del estado running. */
.thread-badge {
  position: relative;
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 2px 8px; border-radius: 9px;
  font-size: 0.62rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap;
}
/* running = pill cyan que late: inconfundible que el hilo trabaja AHORA, y
   varios 'en curso' a la vez saltan a la vista. */
.thread-badge-running {
  color: #04181a;
  background: var(--circle-color);
  box-shadow: 0 0 8px var(--circle-color);
  animation: thread-pulse 1.2s ease-in-out infinite;
}
/* queued = pill ambar que late suave: el turno espera su carril. */
.thread-badge-queued {
  color: #2a1d00;
  background: #ffc24d;
  box-shadow: 0 0 7px rgba(255,194,77,0.7);
  animation: thread-pulse 1.8s ease-in-out infinite;
}
.thread-badge-done   { color: #04130c; background: #00ff88; box-shadow: 0 0 5px #00ff88; }
.thread-badge-failed { color: #1a0606; background: #ff7777; box-shadow: 0 0 5px #ff7777; }
/* cancelled = 'detenido': gris-ambar apagado, sin latido (accion parada por el usuario). */
.thread-badge-cancelled { color: #15110b; background: #b9a07e; box-shadow: 0 0 4px rgba(185,160,126,0.5); }
/* idle = discreto: punto pequeno sin etiqueta gritona. */
.thread-badge-idle {
  padding: 0; width: 8px; height: 8px; border-radius: 50%;
  font-size: 0; color: transparent;
  background: #44666a; box-shadow: none; text-transform: none;
}

/* Hilo con mensajes sin leer */
.thread-unread {
  font-weight: 600; color: var(--circle-color);
}

/* Pulso del nucleo del badge running */
@keyframes thread-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.72); }
}

/* E4: token counter — texto gris pequeno junto al conteo de mensajes */
.thread-card-tokens {
  color: #3e6464; font-size: 0.60rem; letter-spacing: 0.02em;
}
.thread-card-tokens:empty { display: none; }

/* F3: boton stop (✕) por hilo. Rojo suave, alineado inline con el body.
   Aparece solo cuando el hilo esta running (el JS lo inyecta condicionalmente).
   stopPropagation via delegacion en el listener del documento (main.js). */
.thread-stop-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 80, 80, 0.5);
  border-radius: 4px; color: #ff5050; font-size: 0.70rem; line-height: 1;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.thread-stop-btn:hover {
  background: rgba(255, 80, 80, 0.15); color: #ff7777;
  border-color: rgba(255, 80, 80, 0.85);
}

/* A-parte-A: badge de tipo por hilo (agent_action / command / conversational).
   Se pinta inline junto al titulo del thread-card en la vista unificada "Hilos". */
.thread-type-badge {
  display: inline-block; font-size: 0.60rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 1px 5px; border-radius: 3px; margin-left: 5px; vertical-align: middle;
  opacity: 0.85; line-height: 1.5;
}
.thread-type-badge--agent { background: rgba(0,180,255,0.18); color: #5adcff; border: 1px solid rgba(0,180,255,0.35); }
.thread-type-badge--cmd   { background: rgba(255,200,50,0.14); color: #ffd060; border: 1px solid rgba(255,200,50,0.35); }
.thread-type-badge--chat  { background: rgba(100,220,120,0.14); color: #6edc88; border: 1px solid rgba(100,220,120,0.35); }

/* A-parte-A: barra de ordenacion encima de la lista de hilos */
#thread-sort-bar { border-bottom: 1px solid rgba(0,229,255,0.1); margin-bottom: 2px; }
.sort-btn {
  padding: 2px 8px; font-size: 0.70rem; cursor: pointer;
  background: transparent; border: 1px solid rgba(0,229,255,0.25); border-radius: 4px;
  color: #6a9aaa; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sort-btn:hover { background: rgba(0,229,255,0.08); color: #aaeeff; border-color: rgba(0,229,255,0.55); }
.sort-btn.active { background: rgba(0,229,255,0.14); color: var(--circle-color); border-color: rgba(0,229,255,0.65); }

/* ── F2-B: barra de filtro rápido de hilos ──────────────────────────────── */
#thread-filter-bar {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 5px 10px 4px;
  border-bottom: 1px solid rgba(0,229,255,0.12);
  flex-shrink: 0;
}
.thread-filter-chip {
  padding: 2px 9px; font-size: 0.70rem; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid rgba(0,229,255,0.25); border-radius: 10px;
  color: #6a9aaa; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.thread-filter-chip:hover  { background: rgba(0,229,255,0.08); color: #aaeeff; border-color: rgba(0,229,255,0.55); }
.thread-filter-chip.active { background: rgba(0,229,255,0.16); color: var(--circle-color); border-color: rgba(0,229,255,0.70); font-weight: 700; }
#thread-filter-input {
  flex: 1; min-width: 0;
  background: rgba(0,229,255,0.05); border: 1px solid rgba(0,229,255,0.3); border-radius: 4px;
  color: #c8d6e8; font-size: 0.70rem; padding: 2px 7px;
  display: none;
}
#thread-filter-input:focus { outline: none; border-color: var(--circle-color); }

/* ── Grupos temporales de hilos (EN CURSO / ÚLTIMA HORA / HOY) ──────────── */
.thread-group[hidden] { display: none; }
.thread-group { display: flex; flex-direction: column; }
.thread-group-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 2px; padding: 5px 10px; cursor: pointer;
  background: rgba(0,229,255,0.04); color: #6a9aaa;
  border: none; border-bottom: 1px solid rgba(0,229,255,0.08);
  font-size: 0.67rem; letter-spacing: 0.05em; font-weight: 600;
  text-transform: uppercase; text-align: left;
  transition: background 0.14s ease, color 0.14s ease;
}
.thread-group-header:hover { background: rgba(0,229,255,0.09); color: #aaeeff; }
.thread-group-caret {
  display: inline-flex; font-size: 0.9rem; line-height: 1;
  color: rgba(0,229,255,0.45); transition: transform 0.16s ease;
}
.thread-group.open .thread-group-caret { transform: rotate(90deg); }
.thread-group-label { flex: 1; }
.thread-group-count {
  flex-shrink: 0; min-width: 16px; text-align: center;
  padding: 0 6px; border-radius: 8px;
  background: rgba(0,229,255,0.12); color: #cdeef2;
  font-weight: 700; font-size: 0.65rem;
}
.thread-group-list { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px; }
.thread-group:not(.open) .thread-group-list { display: none; }
.thread-group.open      .thread-group-list { display: flex; }

/* ── F4: banners reply / confirm dentro del hilo enfocado ────────────────────
   Viven entre la barra del hilo y #chat-history. Se re-tematizan a la paleta
   cyan del HUD de hilos (coherencia con tarjetas y tabs) y se ajustan margenes
   para que no queden pegados al borde ni se aplasten contra el chat. */
#thread-chat-view #reply-banner {
  margin: 0 8px 6px;
  padding: 5px 10px;
  border-radius: 5px;
  background: rgba(0,229,255,0.06);
  border: none;
  border-left: 3px solid var(--circle-color);
  color: var(--circle-color);
}
#thread-chat-view #reply-banner .reply-banner-label { color: #7fb8c0; }
#thread-chat-view #reply-banner .reply-banner-text  { color: #cfeef2; }
#thread-chat-view #reply-banner .reply-banner-close { color: var(--circle-color); }

#thread-chat-view #cfg-confirm-banner,
#chat-panel #cfg-proposals-banner {
  margin: 0 8px 6px;
  padding: 7px 11px;
  border-radius: 5px;
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.3);
  color: #d6ebeb;
}
#thread-chat-view #cfg-confirm-banner button,
#chat-panel #cfg-proposals-banner button {
  border: 1px solid rgba(0,229,255,0.4);
  color: var(--circle-color);
  background: transparent;
}
#thread-chat-view #cfg-confirm-banner button:hover,
#chat-panel #cfg-proposals-banner button:hover {
  background: rgba(0,229,255,0.12);
  color: #fff;
}

/* ── Plan Mode panel ─────────────────────────────────────────────────────── */
.plan-panel {
  background: #1e2a38;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
  max-height: 70vh;
  overflow-y: auto;
}
.plan-panel.hidden { display: none; }
.plan-header {
  display: flex; align-items: center; gap: 8px; font-weight: bold; color: #93c5fd;
  /* sticky dentro del panel scrolleable: el boton detach siempre accesible */
  position: sticky; top: -16px;
  background: #1e2a38; z-index: 2;
  padding: 16px 0 8px; margin: -16px 0 12px;
}
.plan-phase { background: #263344; border-radius: 6px; padding: 10px 12px; margin: 6px 0; }
.plan-phase-header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.plan-phase-num { font-size: 0.75rem; color: #64748b; font-weight: 600; }
.plan-phase-name { font-weight: 600; color: #e2e8f0; user-select: text; cursor: text; }
.plan-phase-desc { font-size: 0.85rem; color: #94a3b8; margin-bottom: 6px; white-space: pre-wrap; user-select: text; cursor: text; }
/* Plantilla de plan: contexto + explicacion natural + tabla de metricas */
.plan-context { font-size: 0.85rem; color: #cbd5e1; background: #263344; border-left: 3px solid #3b82f6; border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; white-space: pre-wrap; user-select: text; cursor: text; }
.plan-phase-explain { font-size: 0.85rem; color: #a7f3d0; font-style: italic; margin: 2px 0 6px; white-space: pre-wrap; user-select: text; cursor: text; }
.plan-metrics-wrap { user-select: text; }
.plan-metrics-title { font-size: 0.78rem; font-weight: 600; color: #93c5fd; margin: 10px 0 4px; }
.plan-metrics { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-bottom: 8px; table-layout: auto; }
.plan-metrics th, .plan-metrics td { border: 1px solid #334155; padding: 3px 6px; color: #94a3b8; text-align: left; vertical-align: top; }
.plan-metrics th { color: #64748b; background: #263344; font-weight: 600; white-space: nowrap; }
.plan-metrics .plan-metrics-phase { color: #e2e8f0; font-weight: 600; }
.plan-metrics .metric-baja { color: #4ade80; }
.plan-metrics .metric-media { color: #facc15; }
.plan-metrics .metric-alta { color: #ef4444; }
.plan-phase-comment { width: 100%; background: #1e2a38; border: 1px solid #334155; border-radius: 4px; color: #e2e8f0; padding: 6px 8px; font-size: 0.85rem; box-sizing: border-box; }
.plan-phase-comment::placeholder { color: #475569; }
.plan-feedback-row { margin-top: 10px; }
.plan-feedback-textarea { width: 100%; background: #1e2a38; border: 1px solid #334155; border-radius: 4px; color: #e2e8f0; padding: 6px 8px; font-size: 0.85rem; box-sizing: border-box; resize: vertical; }
.plan-feedback-textarea::placeholder { color: #475569; }
.plan-actions {
  display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
  /* sticky dentro del panel scrolleable: aprobar/rechazar/feedback siempre accesibles */
  position: sticky; bottom: -16px;
  background: #1e2a38; z-index: 2;
  padding: 8px 0 16px; margin: 8px 0 -16px;
}
.plan-actions button { padding: 7px 13px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.85rem; }
#plan-reject-btn { background: #374151; color: #9ca3af; }
#plan-keep-btn { background: #1e3a2e; color: #4ade80; }
#plan-keep-btn:hover { background: #14532d; }
#plan-feedback-btn { background: #2d2a1e; color: #facc15; }
#plan-feedback-btn:hover { background: #422d06; }
#plan-approve-btn { background: #3b82f6; color: white; font-weight: 600; }
#plan-approve-btn:hover { background: #2563eb; }
.plan-detach-btn, .plan-reattach-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.plan-detach-btn:hover { color: #93c5fd; }
.plan-reattach-btn { margin-left: 0; }
.plan-reattach-btn:hover { color: #ef4444; }
/* user-select explícito para permitir selección en el plan panel */
.plan-panel, #plan-phases, .plan-phase { user-select: text; }
/* Detach wrapper — body-level, sin ancestro con transform */
#plan-detach-wrapper {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9997;
  overflow-y: auto;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 5vw;
  box-sizing: border-box;
}
#plan-detach-wrapper.active { display: flex; }
#plan-detach-wrapper .plan-panel {
  width: 100%;
  max-width: 1000px;
  min-height: 65vh;
  max-height: 90vh;
  overflow-y: auto;
  resize: both;
  margin: 0 auto;
}
/* Inline comment popup — body-level, sin ancestro con transform */
#plan-inline-comment {
  position: fixed;
  z-index: 10000;
  display: none;
  background: #1e2a38;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  padding: 10px 12px;
  width: 300px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.pic-quote {
  font-size: 0.78rem; color: #64748b; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 7px;
}
#pic-textarea {
  width: 100%; background: #263344; border: 1px solid #334155;
  border-radius: 4px; color: #e2e8f0; padding: 5px 7px;
  font-size: 0.85rem; resize: vertical; box-sizing: border-box;
}
#pic-textarea:focus { outline: none; border-color: #3b82f6; }
.pic-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.pic-actions button { padding: 4px 12px; border-radius: 4px; border: none; cursor: pointer; font-size: 0.82rem; }
.pic-actions button:first-child { background: #3b82f6; color: white; font-weight: 600; }
.pic-actions button:last-child  { background: #374151; color: #9ca3af; }

/* ─── Whisper MVP: CTA "Susurrar" a un job vivo whisper-capable ─────────────── */
#whisper-zone {
  margin: 4px 8px 0;
  padding: 4px 8px;   /* susurro compacto */
  border: 1px solid rgba(0,229,255,0.32);
  border-radius: 6px;
  background: rgba(0,229,255,0.05);
}
#whisper-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  cursor: pointer;          /* la cabecera pliega/despliega el susurro */
  user-select: none;
}
#whisper-collapse-caret {
  color: var(--circle-color);
  font-size: 0.6rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
/* Desplegado: el caret apunta hacia abajo. */
#whisper-zone:not(.whisper-collapsed) #whisper-collapse-caret { transform: rotate(90deg); }
/* Plegado: solo la cabecera; el input/lista/error se ocultan → no ocupa espacio. */
#whisper-zone.whisper-collapsed #whisper-zone-head { margin-bottom: 0; }
#whisper-zone.whisper-collapsed #whisper-input-row,
#whisper-zone.whisper-collapsed #whisper-error,
#whisper-zone.whisper-collapsed #whisper-activity,
#whisper-zone.whisper-collapsed #whisper-list { display: none !important; }
#whisper-zone-title {
  font-size: 0.78rem;
  color: var(--circle-color);
  font-weight: 600;
}
#whisper-job-select {
  background: rgba(0,229,255,0.06);
  color: #c2d8d8;
  border: 1px solid rgba(0,229,255,0.28);
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 2px 6px;
  max-width: 240px;
}
#whisper-job-label {
  font-size: 0.72rem;
  color: rgba(0,229,255,0.7);
  font-family: monospace;
}
#whisper-input-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
#whisper-input {
  flex: 1;
  min-height: 24px;   /* susurro MÁS PEQUEÑO (era 30/90) */
  max-height: 48px;
  resize: vertical;
  box-sizing: border-box;
  background: rgba(0,229,255,0.04);
  color: #c2d8d8;
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 0.74rem;
}
#whisper-input:focus { border-color: var(--circle-color); outline: none; }
#whisper-send {
  background: rgba(0,229,255,0.1);
  color: var(--circle-color);
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
#whisper-send:hover:not(:disabled) { background: rgba(0,229,255,0.2); }
#whisper-send:disabled, #whisper-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.whisper-error {
  margin-top: 5px;
  color: #ff8888;
  font-size: 0.72rem;
}
#whisper-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.whisper-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
}
.whisper-item-text {
  color: #c2d8d8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whisper-badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.whisper-badge-pending {
  color: #ffc94d;
  background: rgba(255,201,77,0.12);
  border-color: rgba(255,201,77,0.4);
}
.whisper-badge-delivered {
  color: #5fe08a;
  background: rgba(95,224,138,0.12);
  border-color: rgba(95,224,138,0.4);
}
.whisper-badge-stale {
  color: #9aa6a6;
  background: rgba(154,166,166,0.12);
  border-color: rgba(154,166,166,0.35);
}

/* Feed vivo de la narracion paso-a-paso del job mostrado (evento SSE job_activity). */
#whisper-activity {
  margin-top: 6px;
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: monospace;
  font-size: 0.72rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,229,255,0.14);
  border-radius: 4px;
  padding: 4px 6px;
}
#whisper-activity:empty { display: none; }
.whisper-activity-line {
  color: #9fd8c8;
  word-break: break-word;
  line-height: 1.35;
}
.whisper-activity-line a { color: #00e5ff; }
.whisper-activity-ts { color: #5a7070; margin-right: 6px; }

/* Trader collapsibles */
.strategy-chevron { display:inline-block; transition:transform 0.2s; margin-left:auto; color:#666; font-size:1.2em; }
.strategy-body { padding:8px 12px; border-top:1px solid #1a2a2a; background:#060d0d; font-size:0.82em; }
.strategy-body strong { display:block; color:#00e5ff; margin:6px 0 3px; }
.strategy-scheduler, .strategy-consensus, .strategy-thread-log { margin-bottom:8px; }
.strategy-thread-entry { padding:2px 0; color:#aaa; }
.strategy-thread-entry.role-assistant { color:#00e5ff; }
.strategy-thread-entry.role-user { color:#eee; }
.strategy-status-badge { font-size:0.66rem; padding:1px 7px; border-radius:8px; margin-left:6px; }
.status-activa { background:rgba(0,229,255,0.12); color:#00e5ff; border:1px solid rgba(0,229,255,0.3); }
.status-inactiva { background:rgba(154,166,166,0.1); color:#8ab8b8; border:1px solid rgba(154,166,166,0.25); }
.strategy-pnl { font-size:0.72rem; color:#cfeef2; margin-left:8px; }
.strategy-pnl-badge { font-size:0.70rem; color:#ffd700; font-weight:bold; margin-left:8px; }



/* ── Backtester (modal propio, cuña 330 del HUD — antes CODER) ────── */
#backtester-panel-view {
  flex: 1; min-height: 0; overflow-y: auto; position: relative;
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
}

/* ── Routing config grid ─────────────────────────────────────────── */
.cfg-grid--routing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.cfg-grid--routing .cfg-field-full { grid-column: 1 / -1; }

/* Toggle de rotación: resaltado cuando está ON */
.cfg-rotate-toggle input[type="checkbox"]:checked + span {
  color: #5dade2;
  font-weight: 600;
}
.cfg-rotate-toggle input[type="checkbox"]:checked {
  accent-color: #5dade2;
}