/* Elffuss Code — VS Code oscuro con alma élfica */
:root {
  --bg: #090a11; --bg2: #101317; --bg3: #161a24; --line: #20252c;
  /* `--accent2` era #6e63c5: saturación 100 % al lado de un `--accent` arena al
     46 %, y ese SALTO de saturación es lo que cansa la vista, más que el color.
     El de ahora tiene la misma saturación que el arena y una luminosidad casi
     igual (58 % contra 60 %), así que el degradado deja de dar el tirón.
     De paso arregla la legibilidad: con texto blanco encima el morado viejo
     daba 3,62:1, por debajo del 4,5:1 que pide WCAG; éste da 4,95:1.
     ⚠ El arena sigue en 2,42:1 con blanco encima — peor aún— pero bajarlo
     cambia la identidad de la marca, así que esa decisión no se toma aquí. */
  --fg: #eae8f2; --muted: #8b929c; --accent: #c8a06a; --accent2: #6e63c5;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg); overflow: hidden; }

/* ---------- landing ---------- */
#landing {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1100px 700px at 50% 30%, #221740, #0b0d12 72%); text-align: center;
}
#landing[hidden] { display: none; }
#landing canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; }
#landing .l-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
#landing .hero { width: 170px; filter: drop-shadow(0 12px 40px rgba(124,92,255,.35)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-9px); } }
#landing h1 { margin: 4px 0 0; font-size: 2rem; }
#landing h1 b { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#landing .tag { color: var(--muted); margin: 0; line-height: 1.5; }
#landing .tag b { color: var(--accent); }
#open-project {
  margin-top: 12px; padding: 14px 34px; font-size: 1.08rem; 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);
}
#open-project:hover { filter: brightness(1.12); }
#landing .ghost, .ghost {
  background: none; color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
#landing .mini { font-size: .75rem; color: #5a6480; }
.resume-clone { display: flex; align-items: center; gap: 8px; margin-top: 8px; background: rgba(124,92,255,.12); border: 1px solid var(--accent2); border-radius: 999px; padding: 7px 8px 7px 16px; font-size: .78rem; color: var(--fg); }
#resume-clone-btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 999px; padding: 6px 14px; font-size: .76rem; cursor: pointer; }
.clone-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.clone-or { font-size: .72rem; color: #5a6480; }
#clone-url { width: 300px; max-width: 60vw; background: var(--bg3); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 9px 16px; font-size: .82rem; }
#clone-url:focus { outline: none; border-color: var(--accent2); }
#clone-btn { background: none; color: var(--fg); border: 1px solid var(--accent2); border-radius: 999px; padding: 9px 16px; font-size: .82rem; cursor: pointer; white-space: nowrap; }
#clone-btn:hover { background: rgba(124,92,255,.15); }
#clone-btn:disabled { opacity: .5; cursor: default; }
.clone-status { min-height: 1.1em; }
.clone-status.err { color: #ff6b8b; }
@media (max-width: 560px) { .clone-row { flex-direction: column; } #clone-url { width: 78vw; } }

/* ---------- IDE ---------- */
#ide { display: flex; flex-direction: column; height: 100vh; }
#ide[hidden] { display: none; } /* el display:flex le ganaba a [hidden] → el IDE asomaba tras la landing */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; background: var(--bg2); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 26px; height: 26px; }
.proj { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.controls { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
select { background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.off { background: #4a5062; } .dot.on { background: #3fb970; }
.dot.loading { background: #e5a53a; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

#settings-panel { display: flex; gap: 10px; padding: 10px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto; position: relative; }
#settings-panel[hidden] { display: none; } /* ¡el display:flex le ganaba a hidden! */
#settings-close { position: absolute; top: 6px; right: 10px; background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
#settings-close:hover { color: var(--accent); }
#settings-panel .card { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: .8rem; min-width: 200px; }
#settings-panel input[type=text], #settings-panel input:not([type]) , #settings-panel input[type=password] { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: .78rem; }

main { flex: 1; display: grid; grid-template-columns: 46px 235px minmax(0, 1fr) minmax(440px, 34%); grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
body.hide-tree main { grid-template-columns: 46px 0 minmax(0, 1fr) minmax(440px, 34%); }
body.hide-tree #sidebar { display: none; }

/* barra de actividad estilo VS Code */
#activity {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #0d0f15; border-right: 1px solid var(--line); padding: 8px 0;
}
#activity button {
  width: 44px; height: 42px; background: none; border: none; cursor: pointer;
  color: #6b7391; display: flex; align-items: center; justify-content: center;
  border-left: 2px solid transparent;
}
#activity button:hover { color: var(--fg); }
#activity button.on { color: var(--fg); border-left-color: var(--accent); }
#activity img { width: 26px; height: 26px; margin-top: auto; margin-bottom: 6px; opacity: .85; }

/* explorador */
#sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--bg2); border-right: 1px solid var(--line); }
#explorer-head {
  padding: 8px 12px 6px; font-size: .68rem; letter-spacing: .08em; color: var(--muted);
  display: flex; gap: 8px; align-items: baseline;
}
#explorer-head span { color: var(--fg); font-weight: 700; }
#tree { flex: 1; overflow: auto; padding: 0 4px 8px; font-size: .82rem; }
#tree ul { list-style: none; margin: 0; padding-left: 10px; border-left: 1px solid #1d2230; }
#tree > ul { border-left: none; padding-left: 4px; }
#tree summary { cursor: pointer; color: #c8cede; padding: 2px 0; display: flex; align-items: center; gap: 4px; user-select: none; }
#tree summary::-webkit-details-marker, #tree summary::marker { display: none; content: ''; }
#tree details[open] > summary .chevron { transform: rotate(90deg); transform-origin: 8px 8px; }
#tree .chevron { transition: transform .12s; }
#tree summary:hover, #tree .file:hover { color: #fff; background: #ffffff0a; border-radius: 4px; }
#tree .file { cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 2px 0 2px 16px; color: #b8c0d4; }
.fico { flex: 0 0 auto; vertical-align: -3px; }

#editor-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
#tabs-bar { display: flex; background: #0d0f15; border-bottom: 1px solid var(--line); overflow-x: auto; min-height: 34px; }
.tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .8rem; color: var(--muted); border-right: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.tab.active { background: var(--bg); color: var(--fg); box-shadow: inset 0 2px 0 var(--accent); }
.tab.tab-preview .tab-name { font-style: italic; }
.tab .tab-ico { display: flex; }
.tab b { cursor: pointer; opacity: .55; width: 14px; text-align: center; }
.tab b:hover { opacity: 1; color: var(--accent); }
.tab b.dirty { opacity: 1; color: var(--fg); }
.tab b.dirty:hover::before { content: ''; }
#editor { flex: 1; min-height: 0; }
#editor-empty { position: absolute; inset: 34px 0 22px 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); color: var(--muted); z-index: 2; text-align: center; }
#editor-empty img { width: 84px; opacity: .5; }
#editor-empty p { font-size: .9rem; line-height: 1.5; }

/* la elfa de la barra: animada cuando el cerebro trabaja (invita a hacer clic) */
#activity img { transition: transform .2s; cursor: pointer; }
#activity img:hover { transform: scale(1.12); }
#activity img.working { animation: elfWorking 1.5s ease-in-out infinite; }
@keyframes elfWorking {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(124,92,255,.5)); }
  50% { transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(255,77,141,.95)); }
}

/* ── 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; }
.bridge-card #br-token, .bridge-card #br-folder { background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 6px 9px; font-size: .78rem; width: 100%; }
.bridge-card details { color: var(--muted); }
.bridge-card details summary::marker { color: var(--accent2); }
#fireworks-fx { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
.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; }
@media (max-width: 820px) { #mind-log { width: 88vw; right: -90vw; } .mind-music { width: 180px; } }

/* menú contextual del árbol y de las pestañas (botón derecho) */
#tree-menu, #tab-menu { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; min-width: 168px; box-shadow: 0 10px 34px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.tm-item { text-align: left; background: none; border: none; color: var(--fg); font-size: .82rem; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.tm-item:hover { background: var(--bg3); }
.tm-item.danger { color: #ff6b8b; }
.tm-item.danger:hover { background: #3a1420; }
.tm-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* vista previa de markdown (pestaña en modo Vista previa, en vez del código fuente) */
#md-preview-pane { position: absolute; inset: 34px 0 22px 0; overflow-y: auto; background: var(--bg); padding: 18px 26px; z-index: 2; }
#md-preview-pane h1, #md-preview-pane h2, #md-preview-pane h3 { color: #fff; margin: 18px 0 8px; }
#md-preview-pane code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: .88em; }
#md-preview-pane pre { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow-x: auto; }
#md-preview-pane a { color: var(--accent2); }
#md-preview-pane.html-preview { padding: 0; overflow: hidden; }
#md-preview-pane.html-preview iframe { display: block; width: 100%; height: 100%; border: none; background: #fff; }

/* panel del terminal (abajo del editor, estilo VS Code) */
#terminal-panel { display: flex; flex-direction: column; height: 260px; flex: 0 0 auto; background: #0b0d12; border-top: 1px solid var(--line); position: relative; }
#terminal-panel[hidden] { display: none; }
#term-resize { position: absolute; top: -3px; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 3; }
#term-resize:hover { background: var(--accent2); opacity: .4; }
#term-head { display: flex; align-items: center; gap: 10px; padding: 3px 10px; background: #0d0f15; border-bottom: 1px solid var(--line); }
#term-head .term-title { font-size: .68rem; letter-spacing: .08em; color: var(--fg); font-weight: 700; }
#term-caps { font-size: .68rem; color: var(--muted); flex: 1; }
.term-btn { background: none; border: none; color: var(--muted); font-size: .72rem; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.term-btn:hover { color: var(--fg); background: var(--bg3); }
#terminal-host { flex: 1; min-height: 0; padding: 4px 6px; overflow: hidden; }
#terminal-host .xterm { height: 100%; }

#statusbar {
  padding: 3px 12px; font-size: .74rem; color: #fff; min-height: 22px;
  background: linear-gradient(90deg, #3d2a68, #4c2050);
  border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px;
}

/* carga del modelo: visible desde el primer segundo, sobre landing e IDE */
#model-progress {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 120; display: flex; align-items: center; gap: 10px;
  width: min(440px, 92vw); padding: 10px 14px;
  background: var(--bg3); border: 1px solid var(--accent2); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(124, 92, 255, .35);
}
#model-progress[hidden] { display: none; }
#model-progress img { width: 34px; height: 34px; }
#model-progress .mp-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
#model-progress span { font-size: .82rem; color: var(--fg); }
#model-progress .track { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
#model-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .25s; }

/* ---------- chat ---------- */
#chat { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg2); min-height: 0; }
#chat-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

/* pestañas de conversación (varias en paralelo — cerrar NO borra, solo quita de la vista) */
#conv-tabs { display: flex; flex: 0 0 auto; background: #0d0f15; border-bottom: 1px solid var(--line); overflow-x: auto; min-height: 34px; align-items: center; }
#conv-tabs .tab-add { flex: 0 0 auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 4px 12px; align-self: stretch; }
#conv-tabs .tab-add:hover { color: var(--fg); background: var(--bg3); }
.tab.tab-busy .tab-name::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; animation: tab-busy-pulse 1s ease-in-out infinite; }
@keyframes tab-busy-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* panel de historial de conversaciones (todas las guardadas, no solo abiertas) */
#history-panel { position: fixed; top: 46px; right: 12px; width: 320px; max-height: 60vh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.5); z-index: 90; display: flex; flex-direction: column; }
#history-panel[hidden] { display: none; }
.hp-head { display: flex; align-items: center; padding: 10px 12px; font-size: .85rem; font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--line); }
.hp-head button { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; }
#hp-list { overflow-y: auto; padding: 4px; }
.hp-empty { padding: 16px; color: var(--muted); font-size: .8rem; text-align: center; }
.hp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.hp-row:hover { background: var(--bg3); }
.hp-title { font-size: .82rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-date { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.hp-del { background: none; border: none; cursor: pointer; font-size: .8rem; opacity: .6; }
.hp-del:hover { opacity: 1; }
.msg { padding: 8px 11px; border-radius: 11px; font-size: .85rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-width: 95%; }
.msg.sys { background: linear-gradient(135deg, #1c1430, #14202e); border: 1px solid var(--line); }
.msg.user { background: var(--accent2); color: #fff; align-self: flex-end; }
.msg.assistant { background: var(--bg3); border: 1px solid var(--line); align-self: flex-start; }
.msg.err { border-color: #a03050; }
/* herramientas estilo plugin de Claude Code: ● nombre + args + resultado plegable */
.msg.tool { display: flex; align-items: center; gap: 7px; background: none; padding: 2px 6px; font-size: .8rem; }
.msg.tool .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.msg.tool b { color: var(--fg); font-weight: 600; font-family: ui-monospace, monospace; font-size: .76rem; }
.msg.tool .targ { color: var(--muted); font-family: ui-monospace, monospace; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.tool-result { color: var(--muted); font-size: .74rem; background: none; padding: 0 6px 0 19px; }
.msg.tool-result summary { cursor: pointer; list-style: none; }
.msg.tool-result summary::before { content: '⎿ '; color: #4a5266; }
.msg.tool-result pre { margin: 4px 0 0; background: #0d1117; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; font-size: .72rem; }
.msg.tool-result.err summary { color: #e5a53a; }
.msg.user.queued { opacity: .55; }
.msg.user.queued::after { content: ' ⏳'; }
.msg.thinking { background: var(--bg3); border: 1px dashed var(--line); color: var(--muted); font-size: .8rem; }
.msg.thinking .gen { font-family: ui-monospace, monospace; font-size: .7rem; color: #5f6880; max-height: 168px; overflow-y: auto; white-space: pre-wrap; }
.msg.thinking .gen.tool-preview { font-family: inherit; font-size: .78rem; color: var(--accent2); font-style: italic; }

/* 🎯 Modo Objetivo: botón + tarjeta de plan (planificador/ejecutor) */
.cbtn.goal { font-size: .74rem; }
.cbtn.goal.on { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #3a2050, #2a1840); }
.cbtn.hardwork { font-size: .74rem; }
.cbtn.hardwork.on { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #3a2a18, #2a1f40); box-shadow: 0 0 0 1px var(--accent) inset; }
.msg.plan-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font-size: .82rem; align-self: stretch; max-width: 100%; }
.plan-card .plan-head { font-weight: 600; margin-bottom: 2px; }
.plan-card .plan-summary { color: var(--muted); font-size: .78rem; margin-bottom: 8px; }
.plan-card .plan-status { float: right; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.plan-card ul.plan-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.plan-card ul.plan-tasks li { display: flex; align-items: baseline; gap: 7px; padding: 5px 7px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line); }
.plan-card .task-ico { flex: 0 0 auto; }
.plan-card .task-title { font-weight: 600; }
.plan-card .task-desc { color: var(--muted); font-size: .76rem; }
.plan-card li.task-in-progress { border-color: var(--accent2); }
.plan-card li.task-done .task-title { color: #7ee787; }
.plan-card li.task-failed { border-color: #a03050; }
.plan-card li.task-failed .task-title { color: #e5a53a; }
.plan-card li.task-skipped { opacity: .5; }
.plan-card li.task-skipped .task-title { text-decoration: line-through; }
#composer { display: flex; gap: 6px; padding: 10px; }
#prompt { flex: 1; background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; color: var(--fg); padding: 9px 11px; outline: none; }
#prompt:focus { border-color: var(--accent2); }
#composer button { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; border-radius: 9px; color: #fff; padding: 0 14px; cursor: pointer; }

/* ---------- markdown en el chat (estilo plugin de Claude Code) ---------- */
.msg.md { white-space: normal; }
.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; }
.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 code.file-link { cursor: pointer; color: var(--accent2); border-color: var(--accent2); text-decoration: underline dotted; }
.msg.md code.file-link:hover { background: rgba(124,92,255,.18); }
.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: .92rem; color: var(--fg); }
.msg.md ul { margin: 4px 0; padding-left: 18px; }
.msg.md li { margin: 2px 0; }
.msg.md b { color: #fff; }

/* botón flotante chat↔editor: solo en móvil */
#code-flip {
  display: none; position: fixed; bottom: 78px; 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;
}

/* ---------- móvil: cabecera fija + chat/editor conmutables ---------- */
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; }
  #activity, #sidebar { display: none; }
  #code-flip { display: block; }
  #editor-wrap { display: none; }
  body.show-editor #editor-wrap { display: flex; }
  body.show-editor #chat { display: none; }
  #chat { border-left: none; min-width: 0; }
  header { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .proj { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  select { max-width: 38vw; font-size: .78rem; }
  #prompt { font-size: 16px; } /* sin auto-zoom iOS */
  #settings-panel { flex-direction: column; }
  /* nada puede tapar el composer: píldora y botón flotante, por encima de él */
  #model-progress { bottom: 132px; }
  #code-flip { bottom: 76px; }
}

/* ---------- composer estilo plugin de Claude Code ---------- */
#composer-wrap { border-top: 1px solid var(--line); background: var(--bg2); }
#ctx-meter { display: flex; align-items: center; gap: 8px; padding: 5px 12px 0; font-size: .68rem; color: var(--muted); }
#ctx-meter .ctx-track { flex: 1; height: 3px; background: var(--bg); border-radius: 2px; overflow: hidden; }
#ctx-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .3s; }
#ctx-bar.hot { background: linear-gradient(90deg, #e5a53a, #e5533a); }
#composer { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px; }
.cbtn {
  flex: 0 0 auto; background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; min-width: 30px; height: 32px; padding: 0 8px; cursor: pointer;
  font-size: .95rem; display: inline-flex; align-items: center; gap: 4px;
}
.cbtn:hover { color: var(--fg); border-color: var(--accent2); }
.cbtn.autoedit { font-size: .74rem; }
.cbtn.autoedit .ae-ico { font-family: ui-monospace, monospace; }
.cbtn.autoedit.on { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #3a2050, #2a1840); }
#btn-send { position: relative; flex: 0 0 auto; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; border-radius: 8px; color: #fff; height: 32px; padding: 0 14px; cursor: pointer; }
/* mientras se procesa: la elfa está "pensando" — feedback claro en el propio botón */
#btn-send.sending { cursor: not-allowed; }
#btn-send.sending svg { opacity: .25; }
#btn-send.sending::after {
  content: ''; position: absolute; inset: 9px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: btn-send-spin .7s linear infinite;
}
@keyframes btn-send-spin { to { transform: rotate(360deg); } }

/* Botón en modo PARAR (mientras el agente genera): clicable, no un spinner muerto */
#btn-send.is-stop { background: linear-gradient(135deg, #e5484d, #c0353a); cursor: pointer; }
#btn-send.is-stop svg { opacity: 1; }
#btn-send.is-stop::after { display: none; }   /* fuera el spinner de bloqueo */

#composer #prompt { flex: 1; min-width: 0; }

/* menú flotante de +/ */
#menu {
  position: absolute; bottom: 96px; left: 10px; right: 10px; z-index: 40;
  background: var(--bg3); border: 1px solid var(--accent2); border-radius: 10px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5); max-height: 320px; overflow-y: auto; padding: 4px;
}
#menu[hidden] { display: none; }
#menu .sep { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px 3px; }
#menu .menu-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: .82rem; }
#menu .menu-item:hover { background: #ffffff0f; }
#menu .menu-item b { font-family: ui-monospace, monospace; font-weight: 600; }
#menu .menu-item span { color: var(--muted); font-size: .74rem; }
#chat { position: relative; }

/* panel de skills */
.skills-panel h3 { margin: 0 0 4px; font-size: 1rem; }
.sk-h { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
.sk-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: .82rem; }
.sk-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-row .muted { color: var(--muted); font-size: .74rem; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.sk-row a { color: var(--accent2); font-size: .74rem; text-decoration: none; }
.sk-row input { flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 6px 9px; font-size: .78rem; }
.sk-row button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 6px; padding: 5px 11px; cursor: pointer; font-size: .76rem; }
.sk-row button.ghost { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: .76rem; }
#settings-panel { max-height: 55vh; overflow-y: auto; flex-direction: column; }

/* el panel de ajustes/skills se SUPERPONE (no empuja el IDE) */
#settings-panel { position: fixed; top: 46px; left: 46px; right: 0; z-index: 90; max-height: 78vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
@media (max-width: 760px) { #settings-panel { left: 0; } }

/* barra indeterminada (descargas sin loaded/total, p. ej. Gemma vía LiteRT-LM) */
#model-progress .track { overflow: hidden; }
#model-bar.indet { width: 35%; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ===== chrome estilo VS Code: menubar + palette + settings + git ===== */
header { position: relative; }
#model-select[hidden] { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-inline svg { vertical-align: -3px; }

/* barra de menú File/Edit/View/Git en la MISMA línea */
#menubar { display: flex; gap: 1px; margin-left: 6px; }
#menubar button { background: none; border: none; color: var(--muted); padding: 4px 9px; font-size: .8rem; cursor: pointer; border-radius: 5px; }
#menubar button:hover, #menubar button.open { color: var(--fg); background: #ffffff10; }
@media (max-width: 900px) { #menubar { display: none; } }

/* dropdown del menú (fixed, anclado al botón) */
#topmenu { position: fixed; z-index: 110; min-width: 220px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 34px rgba(0,0,0,.55); padding: 4px; }
#topmenu[hidden] { display: none; }
#topmenu .menu-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: .82rem; }
#topmenu .menu-item:hover { background: #ffffff10; }
#topmenu .menu-item span { color: var(--muted); font-size: .74rem; }

/* chip de rama git */
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg3); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: .74rem; cursor: pointer; white-space: nowrap; }
.chip[hidden] { display: none; }
.chip:hover { color: var(--fg); border-color: var(--accent2); }
.chip svg { width: 12px; height: 12px; }

/* command palette */
#palette { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 130; width: min(640px, 92vw); background: var(--bg3); border: 1px solid var(--accent2); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; }
#palette[hidden] { display: none; }
#pal-input { width: 100%; background: var(--bg); border: none; border-bottom: 1px solid var(--line); color: var(--fg); padding: 12px 14px; font-size: .92rem; outline: none; }
#pal-list { max-height: 50vh; overflow-y: auto; padding: 4px; }
.pal-item { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: .84rem; }
.pal-item.sel, .pal-item:hover { background: #7c5cff33; }
.pal-item .pi-name { font-weight: 500; }
.pal-item .pi-hint { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-empty { padding: 12px 14px; color: var(--muted); font-size: .82rem; }

/* settings: título, cierre y tarjetas de modelo/proveedor */
.panel-title { margin: 2px 0 8px; font-size: 1rem; }
.panel-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; }
.panel-close:hover { color: var(--accent); }
.panel-close svg { width: 16px; height: 16px; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 6px; }
.model-card { text-align: left; background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--fg); }
.model-card:hover { border-color: var(--accent2); }
.model-card.active { border-color: var(--accent); background: linear-gradient(135deg, #2a1840, #1a1428); }
.model-card b { font-size: .84rem; color: var(--fg); }
.model-card.active b { color: #fff; }
.model-card span { color: #aab2c8; font-size: .72rem; }
.prov-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; }
.prov-card.on { border-color: var(--accent2); }
.prov-head { display: flex; align-items: center; gap: 8px; }
.prov-head b { flex: 1; font-size: .84rem; }
.prov-use { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 6px; padding: 4px 10px; font-size: .74rem; cursor: pointer; }
.prov-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.prov-fields.hide { display: none; }
.prov-fields input { background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 6px 9px; font-size: .78rem; width: 100%; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field .muted { font-size: .7rem; }
button.wide { width: 100%; padding: 9px; border-radius: 8px; }

.model-card.disabled { opacity: .5; cursor: not-allowed; }
.model-card.disabled:hover { border-color: var(--line); }

/* ---------- vistas Arquitectura / Ciudad 3D (overlay sobre el editor) ---------- */
#view-overlay { position: absolute; inset: 34px 0 22px 0; z-index: 30; background: #0b0d12; overflow: hidden; }
#view-overlay[hidden] { display: none; }
#editor-wrap { position: relative; }
#view-close { position: absolute; top: 10px; right: 12px; z-index: 32; background: var(--bg3); border: 1px solid var(--line); color: var(--muted); width: 30px; height: 28px; border-radius: 7px; cursor: pointer; }
#view-close:hover { color: var(--accent); }
#view-body { width: 100%; height: 100%; position: relative; }
#view-body svg#arch-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.arch-node { cursor: pointer; }
.arch-node:hover circle { stroke-width: 3; }
.view-head { position: absolute; top: 10px; left: 14px; z-index: 31; font-size: .8rem; color: #c8cede; background: #0d1117cc; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); }
.view-hint { color: var(--muted); font-size: .72rem; margin-left: 8px; }
.view-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: .9rem; }
#city-canvas { width: 100%; height: 100%; display: block; }

/* ── Compositor: la caja de escribir es lo más grande de la barra ──────────
   Antes era un <input> de una línea compartiendo fila con seis botones de
   colores: acababa siendo una píldora estrecha con el texto recortado («Ask
   Elffu»), indistinguible de sus vecinas. En un chat, el sitio donde se
   escribe tiene que ser lo primero que se ve. */
#composer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#composer #prompt {
  /* Dos ids a propósito: más arriba hay un `#composer #prompt { flex: 1 }` que
     gana por especificidad a un `#prompt` suelto. Se iguala en vez de usar
     !important, que solo traslada la pelea al siguiente que llegue. */
  flex: 1 0 100%;
  min-width: 100%;
  order: -1;                 /* fila propia y la primera, pase lo que pase */
  min-height: 84px;
  max-height: 40vh;          /* crece con el texto, pero no se come el chat */
  resize: vertical;
  overflow-y: auto;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg3);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#prompt::placeholder { color: var(--fg3, #8b8b9e); opacity: 1; }
#prompt:focus {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 22%, transparent);
}

/* ── Modos: un desplegable EXPLICADO ──────────────────────────────────────
   «Auto», «Goal» y «Hard Work» sueltos en la barra no dicen qué hacen. Los
   mismos botones siguen existiendo con los mismos ids —el JS no se entera—
   pero dentro de un menú donde cada uno lleva su explicación. */
#modos { position: relative; }
#modos-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 300px;
  padding: 8px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
#modos-menu[hidden] { display: none; }
/* Sin degradado. `#composer button` lo pone a todos, y en una fila de seis son
   seis manchas de color compitiendo entre ellas y con el texto — y dentro de un
   menú, donde lo que importa es LEER qué hace cada modo, el degradado solo
   estorba. Se deja el color para el estado activo, que es cuando dice algo. */
#modos-menu .cbtn {
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  display: block;
  width: 100%;
  /* `.cbtn` trae `height: 32px` fija, pensada para la barra. Dentro del menú
     cada opción lleva su explicación debajo y tiene que CRECER: con la altura
     fija el texto se salía del botón y se pisaba con el de abajo. */
  height: auto;
  min-height: 0;
  text-align: left;
  white-space: normal;
  padding: 10px 12px;
  line-height: 1.35;
}
#modos-menu .modo-que { display: block; font-size: .78rem; opacity: .68; margin-top: 3px; font-weight: 400; }
#modos-menu .cbtn:hover { background: var(--bg3); border-color: var(--line); }
/* El degradado se reserva para el modo ENCENDIDO: ahí el color informa. */
#modos-menu .cbtn.on {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
}
#modos-menu .cbtn.on .modo-que { opacity: .85; }

/* ── El chat a toda la ventana ────────────────────────────────────────────
   Mismo patrón que `hide-tree`, que ya existía. El editor no se destruye: se
   le da cero de ancho, así que volver es instantáneo y no se pierde estado. */
#btn-ancho {
  position: absolute; top: 6px; right: 8px; z-index: 30;
  background: transparent; border: 1px solid var(--line); color: var(--fg2, #aaa);
  border-radius: 8px; padding: 2px 8px; cursor: pointer; font-size: .9rem;
}
#btn-ancho:hover { color: var(--fg); border-color: var(--accent2); }
#chat { position: relative; }
body.chat-full main { grid-template-columns: 46px 0 0 minmax(0, 1fr); }
body.chat-full #chat { border-left: none; }

/* ── Velocímetro ─────────────────────────────────────────────────────────────
   Panel anclado a la derecha de la cabecera. Posición fija y no absoluta
   respecto al header a propósito: el header tiene overflow y recortaba la
   gráfica por abajo. */
#speed-panel {
  position: fixed; top: 52px; right: 12px; z-index: 60;
  width: min(280px, calc(100vw - 24px));
  background: var(--panel, #15161c); color: var(--fg, #e8e8ef);
  border: 1px solid var(--line, #2a2b36); border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  font-size: .82rem; line-height: 1.35;
}
#speed-panel[hidden] { display: none; }
.vm-tit { font-weight: 600; margin-bottom: 8px; }
.vm-tit2 { margin-top: 14px; }
.vm-filas { display: grid; gap: 6px; }
.vm-filas > div { display: flex; align-items: baseline; gap: 8px; }
.vm-filas b { font-variant-numeric: tabular-nums; font-size: 1.05rem; min-width: 4.2em; }
.vm-filas span { opacity: .72; }
.vm-graf { margin: 10px 0 2px; }
.vm-graf-top, .vm-graf-pie { display: flex; justify-content: space-between; opacity: .6; font-size: .72rem; }
.vm-graf svg { width: 100%; height: 38px; display: block; margin: 3px 0; }
.vm-vacio { opacity: .55; font-size: .76rem; margin: 6px 0; }
.vm-nota { margin-top: 12px; opacity: .5; font-size: .7rem; line-height: 1.3; }