css/elffuss.css

/* Elffuss — tema "aurora local": charcoal, brass y un secundario índigo */
:root {
  --bg: #090a11;
  --bg2: #101317;
  --bg3: #161a24;
  --line: #20252c;
  --fg: #eae8f2;
  --muted: #8b929c;
  --accent: #c8a06a;
  --accent2: #8272ff;
  --ok: #7faa7f;
  --warn: #c9a15a;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-family: var(--serif); letter-spacing: .2px; }
.logo { width: 30px; height: 30px; }
.beta { color: var(--accent2); font-size: .75rem; }
.claim { color: var(--muted); font-size: .8rem; font-style: italic; }
.controls { display: flex; align-items: center; gap: 10px; }
.model-pick { font-size: .9rem; color: var(--muted); }

/* Cabecera en UNA línea. Se partía en dos y tres (2026-09-13) por tres cosas a
   la vez: el <select> de modelo toma el ancho de su opción más larga —la del 27B
   pasa de 120 caracteres— y sin tope aplastaba al resto; la etiqueta que lo
   envuelve es en línea, así que el icono se iba a una fila y el selector a otra;
   y ni la marca, ni el lema, ni el chip de disco tenían nowrap, de modo que en vez
   de encoger se partían. Regla: NADA en la cabecera parte línea; lo que sobra se
   recorta. Va antes del bloque responsive para que en móvil siga mandando ese. */
.brand { min-width: 0; }
.brand b, .beta { white-space: nowrap; flex: none; }
.claim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#build { flex: none; }
.controls { flex: none; }
.model-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.model-pick select { max-width: min(30vw, 380px); text-overflow: ellipsis; }
#disk-chip { white-space: nowrap; flex: none; padding: 4px 10px; font-size: .78rem; border-radius: 999px; }
select {
  background: var(--bg3);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: .85rem;
}
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.off { background: #4a5062; }
.dot.loading { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.dot.on { background: var(--ok); }
.dot.gpu { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- layout ---------- */
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(360px, 42%) 1fr;
  min-height: 0;
}

/* botón flotante chat↔vista: solo existe en móvil */
#btn-flip {
  display: none;
  position: fixed; bottom: 86px; right: 14px; z-index: 60;
  padding: 10px 16px; font-size: .9rem; color: #fff; border: none;
  border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); cursor: pointer;
}


/* ---------- chat ---------- */
#chat {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  min-height: 0;
  min-width: 0; /* los chips en nowrap no deben ensanchar la columna */
}
#log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px 14px; border-radius: 14px; max-width: 92%; white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: .93rem; }
.msg.sys { background: linear-gradient(135deg, #1c1430, #14202e); border: 1px solid var(--line); white-space: normal; }
.msg.user { background: var(--accent2); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.assistant { background: var(--bg3); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.err { border-color: #a03050; }
.msg.thinking {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg3); border: 1px dashed var(--line);
  align-self: flex-start; color: var(--muted); font-size: .85rem;
}
.msg.thinking .mini { width: 22px; height: 22px; }
.msg.thinking .dots i {
  display: inline-block; width: 6px; height: 6px; margin-left: 4px;
  border-radius: 50%; background: var(--accent);
  animation: bounce 1.2s ease-in-out infinite;
}
.msg.thinking .dots i:nth-child(2) { animation-delay: .2s; }
.msg.thinking .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
.msg.thinking .gen {
  width: 100%; font-family: ui-monospace, monospace; font-size: .72rem;
  white-space: pre-wrap; word-break: break-word;
  max-height: 168px; overflow-y: auto; color: #5f6880;
  background: rgba(0,0,0,.16); border-radius: 8px; padding: 6px 8px; margin-top: 4px;
}
.msg.thinking .gen:empty { display: none; }
.msg.thinking .gen.tool-preview {
  font-family: inherit; font-size: .8rem; color: #a9b2c8;
  background: none; max-height: none; overflow: visible; padding: 2px 0;
}
.msg.tool { color: var(--accent); font-size: .8rem; background: none; padding: 0 14px; }
.msg.tool-result { font-size: .8rem; color: var(--muted); background: var(--bg2); border: 1px dashed var(--line); border-radius: 10px; padding: 6px 10px; }
.msg.tool-result.err summary { color: var(--warn); }
.msg.tool-result pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; }
.msg.tool-result summary { cursor: pointer; }

#chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; }
.chip {
  font-size: .78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { color: var(--fg); border-color: var(--accent); }

#composer { display: flex; gap: 8px; padding: 12px 14px 16px; }
#prompt {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg);
  padding: 12px 14px;
  font-size: .95rem;
  outline: none;
}
#prompt:focus { border-color: var(--accent2); }
#send {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 1rem;
  cursor: pointer;
}
.cbtn.hardwork {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--fg-dim, #9aa0ab);
  border-radius: 12px; padding: 0 12px; font-size: .78rem; cursor: pointer; white-space: nowrap;
}
.cbtn.hardwork:hover { border-color: var(--accent2); color: var(--fg); }
.cbtn.hardwork.on { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #3a2a18, #2a1f40); box-shadow: 0 0 0 1px var(--accent) inset; }
@media (max-width: 560px) { .cbtn.hardwork .hw-txt { display: none; } }

/* ---------- visualizador ---------- */
#viz { display: flex; flex-direction: column; min-height: 0; background: var(--bg2); }
#tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); }
#tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  font-size: .88rem;
  cursor: pointer;
}
#tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }
.panel { display: none; flex: 1; overflow-y: auto; padding: 16px; min-height: 0; }
.panel.active { display: block; }
#panel-vista { padding: 0; position: relative; }
#panel-vista.active { display: flex; }
#appframe { flex: 1; width: 100%; height: 100%; border: none; background: #0d1117; }
#vista-empty[hidden] { display: none; }
#vista-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); text-align: center; gap: 8px;
}
#vista-empty .big { width: 120px; opacity: .5; }

/* ---------- escaparate de descarga (mini-UIs mientras baja el modelo) ---------- */
#loading-stage {
  position: absolute; inset: 0; z-index: 4; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1100px 700px at 50% 32%, #1a1236, #0b0d12 72%);
}
#loading-stage .ls-galaxy { position: absolute; inset: 0; }
#loading-stage .ls-galaxy canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; }
#loading-stage .ls-content {
  position: relative; z-index: 1; width: 100%; max-width: 520px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
#loading-stage .ls-window {
  width: min(440px, 82vw); aspect-ratio: 4 / 3; display: flex; flex-direction: column;
  background: #0b0d12; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(124, 92, 255, .12),
              0 0 60px rgba(124, 92, 255, .18);
}
#loading-stage .ls-bar-top {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line);
}
#loading-stage .ls-bar-top .d { width: 9px; height: 9px; border-radius: 50%; opacity: .8; }
#loading-stage .ls-bar-top .d.r { background: #ff6b6b; }
#loading-stage .ls-bar-top .d.y { background: #ffc94a; }
#loading-stage .ls-bar-top .d.g { background: #5fbf6e; }
#loading-stage .ls-badge {
  margin-left: 8px; font-size: .72rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#loading-stage .ls-frames { position: relative; flex: 1; }
#loading-stage .ls-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #090a11;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
#loading-stage .ls-frame.on { opacity: 1; }
#loading-stage .ls-head {
  margin-top: 4px; font-size: 1.18rem; font-weight: 600;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#loading-stage .ls-sub { margin: -4px 0 2px; color: var(--muted); font-size: .86rem; line-height: 1.5; max-width: 420px; }
#loading-stage .ls-sub b { color: var(--fg); }
#loading-stage .ls-prog { width: min(320px, 76vw); height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; }
#loading-stage .ls-bar {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s ease;
}
#loading-stage .ls-bar.indet { width: 38%; animation: indet 1.1s ease-in-out infinite; }
#loading-stage .ls-progtext { font-size: .74rem; color: var(--muted); font-family: ui-monospace, monospace; min-height: 1.1em; }
@media (prefers-reduced-motion: reduce) {
  #loading-stage .ls-frame { transition: none; }
  #loading-stage .ls-bar.indet { animation: none; }
}
@media (max-width: 820px) {
  #loading-stage .ls-window { width: min(360px, 86vw); }
  #loading-stage .ls-head { font-size: 1.05rem; }
}
.msg.sys .avatar { width: 44px; height: 44px; float: left; margin: 2px 10px 4px 0; }

/* ---------- tarjetas y controles de paneles ---------- */
.card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: .9rem;
}
.card b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card code { background: var(--bg); padding: 2px 8px; border-radius: 6px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.card.col { flex-direction: column; align-items: stretch; gap: 8px; }
.card.col b { flex: none; }
.row.between { justify-content: space-between; align-items: center; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field .muted { font-size: .74rem; }
.msg.user.queued { opacity: .55; }
.msg.user.queued::after { content: ' ⏳'; }
.muted { color: var(--muted); font-size: .82rem; }
.row { display: flex; gap: 8px; margin: 10px 0; }
.row.right { justify-content: flex-end; }
.panel input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  padding: 9px 12px;
  flex: 1;
}
button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-size: .88rem;
}
button.ghost {
  background: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: .85rem;
}
button.ghost:hover { color: var(--fg); border-color: var(--accent); }
h3 { margin: 6px 0 12px; font-size: .95rem; }

/* ---------- modal de permisos ---------- */
dialog {
  background: var(--bg2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
dialog::backdrop { background: rgba(5, 6, 10, .7); backdrop-filter: blur(3px); }
dialog h3 { margin: 0 0 8px; }
dialog p { margin: 6px 0; font-size: .9rem; }

/* ---------- toasts y progreso ---------- */
#toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .85rem;
  max-width: 340px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  animation: slidein .2s ease-out;
}
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }
#model-progress {
  position: fixed; bottom: 18px; left: 18px; z-index: 50;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: .8rem; color: var(--muted); width: 300px;
}
#model-progress .track { height: 4px; background: var(--bg); border-radius: 2px; margin-bottom: 6px; overflow: hidden; }
#model-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
#model-bar.indet { width: 35%; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ---------- splash de primera visita ---------- */
#splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1100px 700px at 50% 28%, #16182a, #090a11 72%);
  text-align: center; transition: opacity .6s ease;
}
#splash[hidden] { display: none; }
#splash canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; }
#splash .s-inner { position: relative; z-index: 1; max-width: 540px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#splash svg { width: 190px; height: 190px; animation: sfloat 5s ease-in-out infinite; filter: drop-shadow(0 12px 40px rgba(124, 92, 255, .35)); }
@keyframes sfloat { 50% { transform: translateY(-9px); } }
#splash .spark { animation: spark 2.4s ease-in-out infinite; transform-origin: center; }
#splash .spark.s2 { animation-delay: 1.2s; }
@keyframes spark { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
#splash h1 { margin: 10px 0 2px; font-size: 1.7rem; }
#splash h1 b { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#splash .l { margin: 0; color: var(--muted); font-size: 1.02rem; opacity: 0; animation: srise .7s ease-out forwards; }
#splash .l b { color: var(--accent); }
#splash .l1 { animation-delay: .6s; }
#splash .l2 { animation-delay: 1.7s; }
#splash .l3 { animation-delay: 2.8s; }
#splash .l4 { animation-delay: 3.9s; font-size: 1.12rem; color: var(--fg); }
@keyframes srise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* el guiño: el ojo derecho se cierra un instante, sincronizado con «entre tú y yo» */
#splash .eye-r { transform-origin: 76px 73px; animation: wink 5s ease-in-out 4.1s infinite; }
@keyframes wink { 0%, 7%, 100% { transform: scaleY(1); } 3.5% { transform: scaleY(.06); } }
#splash button {
  margin-top: 16px; padding: 13px 38px; font-size: 1.05rem; cursor: pointer;
  color: #fff; border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 30px rgba(255, 77, 141, .35);
  opacity: 0; animation: srise .7s ease-out 4.9s forwards;
}
#splash button:hover { filter: brightness(1.1); }

/* ---------- móvil: una columna, chat ↔ visualizador conmutables ---------- */
@media (max-width: 700px) {
  main { grid-template-columns: 1fr; }
  #btn-flip { display: block; }
  #viz { display: none; }
  body.show-viz #viz { display: flex; }
  body.show-viz #chat { display: none; }
  #chat { border-right: none; }

  header { padding: 8px 10px; gap: 6px; }
  .claim { display: none; }
  .beta { display: none; }
  .brand { font-size: .95rem; gap: 6px; }
  .logo { width: 26px; height: 26px; }
  .controls { gap: 6px; }
  /* En móvil la cabecera no cabe entera, así que aquí SÍ se encoge — pero lo
     que encoge es el selector (se queda con el hueco que sobre), no los botones.
     Sin esto, el nowrap de la regla general cambiaba «se parte en líneas» por
     «Permisos se sale de la pantalla», que es peor: medido a 390 px. */
  .controls { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .model-pick { flex: 1 1 auto; min-width: 0; }
  .model-pick select { max-width: none; width: 100%; min-width: 0; font-size: .78rem; }
  #disk-chip { padding: 4px 7px; font-size: .72rem; }
  /* Solo el logo como marca. El nombre y el icono del selector no caben en un
     teléfono, y con el nombre dentro el selector se le montaba ENCIMA: medido a
     390 px, «Elffu» asomaba por detrás de la caja del selector. Al tocarlo se
     abre el selector nativo del sistema, que sí enseña los nombres enteros. */
  .brand { flex: none; }
  .brand b, #model-ico { display: none; }
  #btn-clear, #btn-perms { padding: 7px 9px; font-size: .78rem; }

  #log { padding: 10px; }
  .msg { max-width: 100%; font-size: .9rem; }
  .msg.sys .avatar { width: 36px; height: 36px; }

  #chips { flex-wrap: nowrap; overflow-x: auto; padding: 6px 10px; scrollbar-width: none; }
  #chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  #composer { padding: 8px 10px 12px; }
  #prompt { font-size: 16px; } /* evita el zoom automático de iOS */
  #send { padding: 0 16px; min-width: 48px; }

  #tabs { overflow-x: auto; scrollbar-width: none; }
  #tabs button { padding: 8px 10px; font-size: .82rem; white-space: nowrap; }
  .panel { padding: 12px; }
  .card { flex-wrap: wrap; }

  dialog { max-width: 92vw; margin: auto; }
  #toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  #model-progress { left: 12px; right: 12px; width: auto; bottom: 60px; }

  #splash svg { width: 140px; height: 140px; }
  #splash h1 { font-size: 1.35rem; }
  #splash .l { font-size: .92rem; }
  #splash .s-inner { padding: 18px; }
}


/* ---------- markdown en el chat (estilo plugin de Claude Code) ---------- */
.msg.md { white-space: normal; }
.msg.md code {
  background: #0d1117; border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-family: ui-monospace, monospace; font-size: .8em; color: #ffb3c9;
}
.msg.md pre.codeblock {
  position: relative; background: #0d1117; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0; overflow-x: auto;
}
.msg.md pre.codeblock code {
  background: none; border: none; padding: 0; color: #c9d1d9;
  font-size: .78rem; line-height: 1.5; white-space: pre;
}
.msg.md pre.codeblock .lang {
  position: absolute; top: 4px; right: 8px; font-size: .64rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.msg.md h4 { margin: 10px 0 4px; font-size: .95rem; }
.msg.md ul { margin: 4px 0; padding-left: 18px; }
.msg.md li { margin: 2px 0; }
.msg.md b { color: #fff; }

/* ---------- iconos vectoriales + menú de comandos (/) ---------- */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; }
.icon-btn svg, .icon-inline svg { width: 16px; height: 16px; }
.icon-inline { display: inline-flex; vertical-align: middle; color: var(--muted); }
#send { display: inline-flex; align-items: center; justify-content: center; }
#send svg { width: 18px; height: 18px; }
#btn-slash { background: var(--bg3); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
#btn-slash:hover { color: var(--fg); border-color: var(--accent2); }
#cmd-menu {
  position: absolute; left: 14px; right: 14px; bottom: 72px; z-index: 40;
  background: var(--bg3); border: 1px solid var(--accent2); border-radius: 12px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5); max-height: 320px; overflow-y: auto; padding: 4px;
}
#cmd-menu[hidden] { display: none; }
.cmd-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: .86rem; }
.cmd-item:hover { background: #ffffff10; }
.cmd-item b { font-family: ui-monospace, monospace; font-weight: 600; }
.cmd-item span { color: var(--muted); font-size: .76rem; }
#chat { position: relative; }

/* ── Mente de Elffuss (cerebro CEO · mundo trance) ─────────────────────── */
#mind-overlay { position: fixed; inset: 0; z-index: 300; background: radial-gradient(1200px 800px at 50% 45%, #1a0a2e, #05030c 78%); overflow: hidden; }
#mind-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#mind-title { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 1.1rem; font-weight: 800; letter-spacing: .18em; color: #fff; text-shadow: 0 0 22px #ff4d8d; pointer-events: none; }
#mind-title span { display: block; font-size: .66rem; font-weight: 500; letter-spacing: .06em; color: #b9a7ff; margin-top: 4px; text-shadow: none; }
#mind-close { position: absolute; top: 14px; right: 16px; z-index: 6; background: rgba(255,77,141,.14); border: 1px solid #ff4d8d; color: #ffd7e6; border-radius: 999px; padding: 7px 14px; font-size: .8rem; cursor: pointer; backdrop-filter: blur(6px); }
#mind-close:hover { background: rgba(255,77,141,.28); }
#mind-history { position: absolute; top: 14px; right: 182px; z-index: 6; background: rgba(73,232,221,.14); border: 1px solid #49e8ff; color: #bfeef6; border-radius: 999px; padding: 7px 12px; font-size: .78rem; cursor: pointer; backdrop-filter: blur(6px); }
#mind-history:hover { background: rgba(73,232,221,.28); }
#mind-playstop { position: absolute; top: 14px; right: 278px; z-index: 6; background: rgba(63,185,112,.16); border: 1px solid #3fb970; color: #b7f2cf; border-radius: 999px; padding: 7px 12px; font-size: .78rem; cursor: pointer; backdrop-filter: blur(6px); }
#mind-playstop:hover { background: rgba(63,185,112,.3); }
#mind-playstop.paused { background: rgba(255,180,70,.16); border-color: #ffb446; color: #ffe0b0; }
#mind-playstop.paused:hover { background: rgba(255,180,70,.3); }
#mind-config { position: absolute; top: 14px; right: 96px; z-index: 6; background: rgba(124,92,255,.16); border: 1px solid #7c5cff; color: #d8ccff; border-radius: 999px; padding: 7px 12px; font-size: .78rem; cursor: pointer; backdrop-filter: blur(6px); }
#mind-config:hover { background: rgba(124,92,255,.3); }
/* leyenda de perfiles: fija, no flota (siempre legible) */
#mind-legend { position: absolute; top: 60px; left: 14px; z-index: 5; display: flex; flex-direction: column; gap: 5px; background: rgba(8,5,18,.5); border: 1px solid rgba(124,92,255,.3); border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(6px); pointer-events: auto; }
.ml-item { font-size: .68rem; color: #cfe8f0; display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.ml-item:hover { background: rgba(255,255,255,.08); }
.ml-sw { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; flex: none; }
/* solo etiquetas de propuestas forjadas flotan ancladas al mundo */
#mind-anchors { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mind-node-label { position: absolute; font-size: .6rem; color: #ffd7e6; background: rgba(255,77,141,.18); border: 1px solid rgba(255,77,141,.5); border-radius: 6px; padding: 1px 6px; pointer-events: none; white-space: nowrap; text-shadow: 0 0 8px #ff4d8d; }
/* historial completo: TODO lo que ha llegado, sin recortar */
#mind-log { position: absolute; top: 0; right: -380px; width: 360px; height: 100%; z-index: 8; display: flex; flex-direction: column; background: rgba(6,4,14,.92); border-left: 1px solid rgba(73,232,221,.35); backdrop-filter: blur(10px); transition: right .25s ease; }
#mind-log.show { right: 0; }
.ml-head { display: flex; align-items: center; padding: 12px 14px; font-size: .82rem; font-weight: 700; color: #bfeef6; border-bottom: 1px solid rgba(73,232,221,.25); }
.ml-head button { margin-left: auto; background: none; border: none; color: #7fd9d0; cursor: pointer; font-size: .9rem; }
#mind-log-body { flex: 1; overflow-y: auto; padding: 8px 10px; }
.ml-row { font-size: .68rem; line-height: 1.6; padding: 3px 4px; border-radius: 5px; display: flex; gap: 6px; align-items: baseline; }
.ml-row:hover { background: rgba(255,255,255,.04); }
.ml-row .ml-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ml-row .ml-t { color: #dfeef2; word-break: break-word; }
/* panel flotante con el .md del pensamiento (clic en un nodo) */
#mind-panel { position: absolute; top: 70px; right: 16px; width: min(420px, 40vw); max-height: 70vh; z-index: 6; display: none; flex-direction: column; background: rgba(8,5,18,.9); border: 1px solid #7c5cff; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 50px rgba(0,0,0,.6); }
#mind-panel.show { display: flex; }
#mind-panel .mp-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .74rem; color: #d8ccff; background: rgba(124,92,255,.14); border-bottom: 1px solid rgba(124,92,255,.3); }
#mind-panel .mp-head button { margin-left: auto; background: none; border: none; color: #b9a7ff; cursor: pointer; font-size: .9rem; }
#mind-panel .mp-body { flex: 1; overflow: auto; margin: 0; padding: 12px; font-size: .78rem; line-height: 1.55; color: #cfe8f0; }
#mind-panel .mp-body h1, #mind-panel .mp-body h2, #mind-panel .mp-body h3 { color: #fff; margin: 12px 0 6px; }
#mind-panel .mp-body code { background: rgba(124,92,255,.18); padding: 1px 5px; border-radius: 4px; font-size: .82em; }
#mind-panel .mp-body pre { background: #0b0716; border: 1px solid rgba(124,92,255,.3); border-radius: 8px; padding: 8px; overflow-x: auto; }
#mind-panel .mp-body ul, #mind-panel .mp-body ol { padding-left: 1.2em; }
.mp-actions { display: flex; gap: 8px; padding: 0 12px 12px; }
.mp-exec { flex: 1; background: linear-gradient(135deg, #ff4d8d, #7c5cff); border: none; color: #fff; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .78rem; font-weight: 600; }
.mp-open { flex: 1; background: rgba(124,92,255,.15); border: 1px solid #7c5cff; color: #d8ccff; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .78rem; }
/* panel de configuración del cerebro */
#mind-cfg { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: min(520px, 92vw); z-index: 7; display: none; flex-direction: column; gap: 6px; background: rgba(8,5,18,.94); border: 1px solid #7c5cff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 60px rgba(0,0,0,.6); }
#mind-cfg.show { display: flex; }
.cfg-head { display: flex; align-items: center; font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.cfg-head button { margin-left: auto; background: none; border: none; color: #b9a7ff; cursor: pointer; }
.cfg-notif { font-size: .68rem; color: #9fb; background: rgba(63,185,112,.1); border: 1px solid rgba(63,185,112,.3); border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-notif-btn { background: #3fb970; border: none; color: #06180d; border-radius: 6px; padding: 3px 10px; font-size: .68rem; font-weight: 700; cursor: pointer; }
#mind-cfg label { font-size: .68rem; color: #b9a7ff; margin-top: 4px; }
#mind-cfg textarea, #mind-cfg input:not([type=color]) { background: #0b0716; border: 1px solid rgba(124,92,255,.4); color: #e8ebf4; border-radius: 8px; padding: 8px 10px; font-size: .78rem; font-family: inherit; resize: vertical; }
#cfg-profiles { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.cfg-prof { display: grid; grid-template-columns: 30px 1fr 1.4fr 26px; gap: 6px; align-items: center; }
.cfg-prof input[type=color] { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(124,92,255,.4); border-radius: 6px; background: none; cursor: pointer; }
.cfg-prof input[type=text] { background: #0b0716; border: 1px solid rgba(124,92,255,.4); color: #e8ebf4; border-radius: 6px; padding: 6px 8px; font-size: .72rem; }
.cp-del { background: none; border: none; color: #ff8fb0; cursor: pointer; font-size: .8rem; }
.cfg-add { align-self: flex-start; background: rgba(124,92,255,.15); border: 1px dashed rgba(124,92,255,.5); color: #d8ccff; border-radius: 8px; padding: 6px 12px; font-size: .74rem; cursor: pointer; margin-top: 4px; }
.cfg-actions { display: flex; gap: 8px; margin-top: 8px; }
.cfg-ghost { flex: 1; background: rgba(73,232,221,.14); border: 1px solid #49e8ff; color: #bfeef6; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .78rem; }
.cfg-save { flex: 1; margin-top: 0; background: linear-gradient(135deg, #ff4d8d, #7c5cff); border: none; color: #fff; border-radius: 8px; padding: 9px; cursor: pointer; font-size: .8rem; font-weight: 600; }
.cfg-note { font-size: .64rem; color: #8a7bb8; margin-top: 4px; }
.mind-music { position: absolute; bottom: 14px; right: 14px; z-index: 5; width: 300px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,77,141,.4); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.mind-music-cap { font-size: .62rem; color: #ffd7e6; background: rgba(10,6,24,.8); padding: 4px 8px; text-align: center; }
.proposal-exec-btn { display: block; margin-top: 10px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 8px; padding: 8px 14px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.proposal-exec-btn:hover { filter: brightness(1.1); }
.proposal-exec-btn:disabled { opacity: .6; cursor: default; filter: none; }

/* modelos externos: sección plegada, al final y visualmente secundaria */
.ext-block{opacity:.72}
.ext-block:hover,.ext-block[open]{opacity:1}
.ext-block>summary{cursor:pointer;font-weight:600;font-size:.9rem;list-style:none;padding:2px 0}
.ext-block>summary::-webkit-details-marker{display:none}
.ext-block>summary::before{content:'▸ ';color:var(--accent)}
.ext-block[open]>summary::before{content:'▾ '}