:root {
  --bg: #02050c;
  --panel: rgba(6, 16, 32, 0.62);
  --line: rgba(80, 180, 255, 0.28);
  --line-strong: rgba(90, 200, 255, 0.6);
  --text: #d4ecff;
  --muted: #6f8fb0;
  --accent: #5cd3ff;
  --accent-2: #b98cff;
  --ok: #4ff0b8;
  --warn: #ffbe5c;
  --err: #ff6b81;
  --mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --top: 56px;
  --orb-h: 58vh;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 35%, #06182e 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }
.mono, code, pre { font-family: var(--mono); }
[hidden] { display: none !important; }

/* ── orbe / agujero negro ── */
#orb { position: fixed; top: var(--top); left: 0; width: 100%; height: var(--orb-h); display: block; }

/* Tema "agujero negro": el lienzo ocupa toda la pantalla y la paleta pasa a tonos cálidos. */
body.bh {
  --bg: #030204;
  --panel: rgba(14, 8, 8, 0.5);
  --line: rgba(255, 196, 150, 0.22);
  --line-strong: rgba(255, 205, 160, 0.55);
  --text: #f6ece4;
  --muted: #b09c90;
  --accent: #ffb877;
  --accent-2: #ff8a6a;
  background: var(--bg);
}
body.bh #orb { top: 0; height: 100%; cursor: grab; }
body.bh #orb:active { cursor: grabbing; }
body.bh .topbar { background: linear-gradient(180deg, rgba(6, 3, 4, 0.8), rgba(6, 3, 4, 0.2)); }
body.bh .icon, body.bh .composer button, body.bh .row button { background: rgba(40, 20, 14, 0.5); }
body.bh .icon:hover, body.bh .icon[aria-pressed="true"] { box-shadow: 0 0 12px rgba(255, 184, 119, 0.35); }
body.bh .bar div { background: rgba(255, 190, 140, 0.12); }
body.bh .msg.user { background: rgba(120, 60, 30, 0.35); }
body.bh .msg.assistant { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
body.bh .messages { background: linear-gradient(180deg, transparent, rgba(3, 2, 4, 0.55) 18%); border-radius: 12px; }
body.bh .composer { background: rgba(12, 6, 6, 0.82); box-shadow: 0 0 24px rgba(255, 150, 80, 0.14); }
body.bh .card { background: #120a09; box-shadow: 0 0 40px rgba(255, 150, 80, 0.2); }
body.bh .toast { background: rgba(30, 14, 10, 0.92); }
body.bh .mic svg { fill: var(--accent); }
body.bh .chip { background: rgba(0, 0, 0, 0.35); }

/* Capa del cosmos (planetas, órbitas, conexiones) sobre el agujero negro; no captura el ratón. */
#cosmos { display: none; }
body.bh #cosmos { display: block; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.tip {
  position: fixed; left: 0; top: 0; z-index: 6; max-width: 270px; pointer-events: none;
  background: rgba(12, 6, 6, 0.9); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.45; box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
.tip b { display: block; font: 600 11px/1.6 var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.tip span { color: var(--text); }
.legend dt { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.sw.planet { background: conic-gradient(#ff7a7a, #ffd36b, #7affc1, #7ab8ff, #d17aff, #ff7a7a); }
.sw.user { background: #6fe3ff; box-shadow: 0 0 6px #6fe3ff; }
.sw.mem { background: #ffc46b; box-shadow: 0 0 6px #ffc46b; }
.sw.belt { background: #c79a78; }
.sw.cloud { background: #c9a8ff; box-shadow: 0 0 6px #c9a8ff; }

/* Controles de la simulación */
.slider { display: block; font: 11px/1.8 var(--mono); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.slider output { float: right; color: var(--text); text-transform: none; }
.slider input { width: 100%; accent-color: var(--accent); margin: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 8px 0 4px; }
.check input { accent-color: var(--accent); }
.hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.slider select { display: block; width: 100%; margin-top: 2px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); color: var(--text); font: 12px/1.3 system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.mini.wide { width: 100%; height: 30px; margin-top: 6px; font-size: 12px; color: var(--text); }
.mini { border: 1px solid var(--line); background: transparent; border-radius: 6px; width: 24px; height: 22px; line-height: 1; color: var(--muted); }

.state-label {
  position: fixed; top: calc(var(--top) + var(--orb-h) - 34px); left: 50%; transform: translateX(-50%);
  font: 600 12px/1 var(--mono); letter-spacing: 0.35em; color: var(--accent); text-shadow: 0 0 12px currentColor;
  pointer-events: none; white-space: nowrap;
}
body[data-state="thinking"] .state-label { color: var(--accent-2); }
body[data-state="tool"] .state-label { color: var(--warn); }
body[data-state="listening"] .state-label { color: var(--ok); }
body[data-state="error"] .state-label { color: var(--err); }

/* ── barra superior ── */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 5;
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(3, 10, 22, 0.9), rgba(3, 10, 22, 0.4));
  backdrop-filter: blur(6px);
}
.brand { font: 700 15px/1 var(--mono); letter-spacing: 0.3em; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand small { font-weight: 400; letter-spacing: 0.05em; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 10px currentColor; }
.dot.on { background: var(--ok); color: var(--ok); }
.dot.off { background: var(--err); color: var(--err); }
.status { flex: 1; font: 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; align-items: center; gap: 6px; }
.clock { font: 13px/1 var(--mono); color: var(--accent); margin-right: 8px; }
.icon {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: rgba(10, 30, 60, 0.4);
  display: grid; place-items: center; font-size: 16px;
}
.icon:hover, .icon[aria-pressed="true"] { border-color: var(--line-strong); box-shadow: 0 0 12px rgba(92, 211, 255, 0.35); }
#btnPanels { display: none; }

/* ── paneles ── */
.panel {
  position: fixed; top: calc(var(--top) + 14px); bottom: 16px; width: 280px; z-index: 3;
  overflow-y: auto; overflow-x: hidden; padding: 4px 14px 14px; scrollbar-width: thin;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(4px);
}
.panel.left { left: 16px; }
.panel.right { right: 16px; }
.panel::before, .panel::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); opacity: 0.7;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel h2 {
  font: 600 11px/1 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
  margin: 16px 0 10px; display: flex; justify-content: space-between; align-items: center;
}
.count { color: var(--muted); letter-spacing: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.bar { margin-bottom: 10px; }
.bar label { display: flex; justify-content: space-between; font: 11px/1.6 var(--mono); color: var(--muted); }
.bar div { height: 5px; background: rgba(90, 160, 255, 0.12); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.6s; }
.list, .log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.list li { padding: 6px 0; border-bottom: 1px dashed rgba(90, 160, 255, 0.15); }
.list li b { font-family: var(--mono); font-weight: 500; color: var(--text); display: block; font-size: 12px; }
.list li span { color: var(--muted); font-size: 12px; }
.sessions li { cursor: pointer; }
.sessions li:hover b { color: var(--accent); }
.sessions li.current b { color: var(--ok); }
.log li { padding: 5px 0; font-family: var(--mono); font-size: 11.5px; border-bottom: 1px dashed rgba(90, 160, 255, 0.12); word-break: break-word; }
.log li .t { color: var(--muted); margin-right: 6px; }
.log li.ok::before { content: "✓ "; color: var(--ok); }
.log li.fail::before { content: "✗ "; color: var(--err); }
.log li.run::before { content: "◌ "; color: var(--warn); }
.log li.learn::before { content: "◆ "; color: var(--accent-2); }

/* ── chat ── */
.chat {
  position: fixed; left: 312px; right: 312px; bottom: 16px; top: calc(var(--top) + var(--orb-h) - 8px); z-index: 4;
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.messages { flex: 1; overflow-y: auto; padding: 4px 4px 8px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; mask-image: linear-gradient(transparent 0, #000 28px); }
.msg { max-width: 92%; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: rgba(40, 110, 200, 0.22); border: 1px solid var(--line); padding: 8px 12px; border-radius: 12px 12px 2px 12px; }
.msg.assistant { align-self: flex-start; border-left: 2px solid var(--accent); padding: 2px 0 2px 12px; }
.msg.assistant.streaming::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; }
.msg.error { border-left-color: var(--err); color: var(--err); }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin-bottom: 0; }
.msg pre { background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 12.5px; }
.msg code { background: rgba(90, 160, 255, 0.12); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.msg pre code { background: none; padding: 0; }
.msg a { color: var(--accent); }
.msg ul { margin: 4px 0 8px; padding-left: 20px; }
.chip { display: inline-block; font: 11.5px/1.4 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; margin: 2px 4px 4px 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.fail { border-color: var(--err); color: var(--err); }
@keyframes blink { 50% { opacity: 0; } }

.composer {
  display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid var(--line-strong);
  border-radius: 14px; background: rgba(4, 14, 30, 0.85); box-shadow: 0 0 24px rgba(40, 150, 255, 0.12);
  margin-bottom: env(safe-area-inset-bottom);
}
.composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; max-height: 30vh; padding: 8px 4px; line-height: 1.4; }
.composer button { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: rgba(20, 60, 110, 0.5); display: grid; place-items: center; }
.composer .send { color: var(--accent); }
.composer .stop { color: var(--err); border-color: var(--err); }
.mic svg { width: 20px; height: 20px; fill: var(--accent); }
.mic.on { background: rgba(79, 240, 184, 0.2); border-color: var(--ok); box-shadow: 0 0 18px rgba(79, 240, 184, 0.5); }
.mic.on svg { fill: var(--ok); }
.mic:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── modales y avisos ── */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0, 4, 10, 0.72); backdrop-filter: blur(3px); padding: 16px; }
.card { width: min(520px, 100%); background: #061426; border: 1px solid var(--line-strong); border-radius: 10px; padding: 20px; box-shadow: 0 0 40px rgba(60, 160, 255, 0.2); }
.card h3 { margin: 0 0 6px; font: 600 14px/1.3 var(--mono); letter-spacing: 0.15em; color: var(--warn); }
#login .card h3 { color: var(--accent); }
.card pre { white-space: pre-wrap; word-break: break-word; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); border-radius: 6px; padding: 10px; max-height: 40vh; overflow: auto; font-size: 13px; }
.card input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.35); outline: 0; }
.row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.row button { padding: 10px 20px; border-radius: 8px; border: 1px solid var(--line); background: rgba(20, 60, 110, 0.5); font-weight: 600; min-width: 110px; }
.row .allow { border-color: var(--ok); color: var(--ok); }
.row .deny { border-color: var(--err); color: var(--err); }
.error { color: var(--err); min-height: 1.2em; margin: 8px 0 0; font-size: 13px; }
.toast {
  position: fixed; top: calc(var(--top) + 14px); left: 50%; transform: translateX(-50%); z-index: 15;
  background: rgba(20, 10, 40, 0.92); border: 1px solid var(--accent-2); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: 13px;
  max-width: calc(100% - 32px);
}

/* ── tablet / móvil ── */
@media (max-width: 1100px) {
  .panel { width: 240px; }
  .chat { left: 272px; right: 272px; }
}
@media (max-width: 900px) {
  :root { --orb-h: 34vh; --top: 52px; }
  .brand small, .clock, .status { display: none; }
  .topbar { justify-content: space-between; }
  #btnPanels { display: grid; }
  .panel { display: none; }
  body.panels-open .panel { display: block; left: 12px; right: 12px; width: auto; z-index: 12; }
  body.panels-open .panel.left { top: calc(var(--top) + 10px); bottom: 52%; }
  body.panels-open .panel.right { top: 50%; bottom: 12px; }
  .chat { left: 12px; right: 12px; bottom: 10px; }
  .state-label { font-size: 11px; }
}
@media (min-width: 901px) and (max-height: 640px) {
  :root { --orb-h: 46vh; }
}
@media (prefers-reduced-motion: reduce) { .msg.assistant.streaming::after { animation: none; } }