Blame for css/code.css

/* 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); }
/* el display:flex de arriba le ganaba a [hidden]: la píldora vacía con
   Reanudar/Descartar salía SIEMPRE en la landing, sin descarga a medias */
.resume-clone[hidden] { display: none; }
.resume-clone a { color: inherit; }
#open-project:disabled, #clone-url:disabled { opacity: .5; cursor: not-allowed; filter: none; }
#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%; }
/* el punto del modelo es un botón (lleva a Ajustes → Cerebro) */
button.dot { border: none; padding: 0; cursor: pointer; flex: 0 0 auto; }
button.dot:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.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; }
/* Cada pieza en SU columna. Sin esto, al ocultar el explorador (display:none)
   el resto se corría una columna a la izquierda: el editor caía en la de 0 px y
   desaparecía, el chat ocupaba su sitio y la columna del chat quedaba vacía. */
#activity { grid-column: 1; }
#sidebar { grid-column: 2; }
#editor-wrap { grid-column: 3; }
#chat { grid-column: 4; }

/* 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; }
/* la elfa es un botón (abre la Mente): el botón va abajo, la imagen dentro */
#activity #act-mind { margin-top: auto; margin-bottom: 6px; }
#activity #act-mind img { margin: 0; }
#activity button:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }

/* 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; }
#tree .file.active { color: #fff; background: #ffffff12; border-radius: 4px; }
#tree summary:focus-visible, #tree .file:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; border-radius: 4px; }
#tree .tree-more { color: var(--muted); font-size: .74rem; padding: 2px 0 2px 16px; font-style: italic; }
.tm-item:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.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, .tab .tab-x { cursor: pointer; opacity: .55; width: 16px; text-align: center; }
.tab .tab-x { background: none; border: none; color: inherit; padding: 0; font: inherit; line-height: 1; border-radius: 4px; }
.tab b:hover, .tab .tab-x:hover { opacity: 1; color: var(--accent); }
.tab b.dirty, .tab .tab-x.dirty { opacity: 1; color: var(--fg); }
.tab b.dirty:hover::before { content: ''; }
.tab:focus-visible, .tab .tab-x:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.tab .tab-name.deleted { text-decoration: line-through; }
/* «¿Guardar los cambios?» al cerrar una pestaña con cambios sin guardar */
#dirty-dialog { background: var(--bg2); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; max-width: min(420px, 92vw); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
#dirty-dialog::backdrop { background: rgba(0,0,0,.45); }
#dirty-dialog .dd-title { margin: 0 0 4px; font-weight: 600; }
#dirty-dialog .dd-sub { margin: 0 0 14px; color: var(--muted); font-size: .85rem; }
#dirty-dialog .dd-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#dirty-dialog button { background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; cursor: pointer; font: inherit; font-size: .85rem; }
#dirty-dialog button.dd-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border: none; }
#dirty-dialog button:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
#editor { flex: 1; min-height: 0; }
#editor-empty { position: absolute; inset: 34px 0 calc(22px + var(--term-h, 0px)) 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); }
.bridge-card .br-sha { font-size: .64rem; color: var(--muted); margin: 0 0 6px; overflow-wrap: anywhere; }
.bridge-card .br-sha code { font-size: .64rem; color: var(--fg); }
#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, #conv-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 calc(22px + var(--term-h, 0px)) 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) */
/* Las capas del editor (aviso vacío, vista previa) terminan encima de la consola:
   --term-h la pone main.js con su altura real, 0 si está cerrada. Antes se
   estiraban hasta la barra de estado y tapaban la consola entera. */
#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; }
#model-progress .mp-acciones { display: flex; gap: 6px; }
#model-progress .mp-acciones button { background: var(--bg2); color: var(--fg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; font: inherit; font-size: .78rem; cursor: pointer; }

/* ---------- 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); }
/* la fila es un botón (abrir) más el de borrar */
.hp-row:has(.hp-open) { display: flex; padding: 0 6px 0 0; }
.hp-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; background: none; border: none; color: inherit; font: inherit; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.hp-open[aria-current="true"] .hp-title { color: var(--accent); }
.hp-open:focus-visible, .hp-del:focus-visible, .hp-head button:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.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 agente: ● 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: ' ⏳'; }
/* encolado y descartado al pulsar ■ (parar vacía la cola) */
.msg.user.cancelled { opacity: .45; text-decoration: line-through; }
.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 agente) ---------- */
.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); }
a.file-link { color: var(--accent2); text-decoration: underline dotted; }
.msg.md code.file-link a.file-link { color: inherit; text-decoration: inherit; }
a.file-link:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; border-radius: 3px; }
.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, #editor-wrap, #chat { grid-column: 1; }
  #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 agente ---------- */
#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 */
/* «Parando…»: ya se pulsó ■ y el turno se está soltando. Texto en vez de icono,
   apagado y sin el spinner (en un botón más ancho saldría ovalado). */
#btn-send.is-stopping { background: #7a2a2d; color: #f3d6d7; cursor: progress; font-size: .78rem; white-space: nowrap; }
#btn-send.is-stopping::after { display: none; }
/* Solo para lectores de pantalla (la región viva del envío). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#composer #prompt { flex: 1; min-width: 0; }
/* fichas de lo adjuntado con @, encima de la caja */
#attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 0; }
#attach-chips[hidden] { display: none; }
.attach-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; font-size: .72rem; color: var(--fg); background: var(--bg3); border: 1px solid var(--line); border-radius: 12px; padding: 1px 2px 1px 8px; overflow-wrap: anywhere; }
.attach-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .85rem; line-height: 1; padding: 2px 6px; border-radius: 10px; }
.attach-chip button:hover, .attach-chip button:focus-visible { color: var(--fg); background: var(--line); }

/* 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.sel { background: #ffffff1a; }
#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: «Instaladas» y «Explorar catálogos», una acción por fila.
   El contenido no pasa de un ancho legible aunque el panel ocupe toda la
   pantalla; los nombres largos parten en vez de cortarse («Co…» en el móvil). */
.skills-panel { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.skills-panel .sk-intro { margin: 0 0 4px; line-height: 1.45; }
.skills-panel > .sk-msg { margin: 0; min-height: 1.2em; }
.skills-panel section { display: flex; flex-direction: column; }
.sk-h { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; font-weight: 600; }
.sk-h:focus { outline: none; }
.sk-h:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.sk-nota, .sk-vacio { margin: 0 0 8px; font-size: .78rem; }
.sk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; font-size: .82rem; }
.sk-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-info b { overflow-wrap: anywhere; }
.sk-info .muted, .sk-info a { font-size: .74rem; overflow-wrap: anywhere; }
.sk-row .muted { color: var(--muted); }
.sk-row a { color: var(--accent2); text-decoration: none; }
.sk-row a:hover { text-decoration: underline; }
.sk-row > button { flex: 0 0 auto; min-width: 84px; }
.sk-browse { flex: 1 0 100%; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.sk-browse[hidden] { display: none; }
.sk-browse .sk-row { background: var(--bg2); }
.sk-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sk-add input { flex: 1 1 220px; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 7px 9px; font-size: .8rem; }
.skills-panel button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: .78rem; }
.skills-panel button.ghost { background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: .78rem; }
.skills-panel button[aria-disabled="true"] { opacity: .7; cursor: default; }
.skills-panel button[aria-busy="true"] { cursor: progress; }
.skills-panel button:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.sk-remove-repo { margin-top: 8px; }
.sk-msg { font-size: .76rem; }
.sk-msg.err { color: #ff8fb0; }

/* El panel de Ajustes / Skills / Extensiones se SUPERPONE (no empuja el IDE) y
   ocupa ENTERO el hueco de trabajo: de la cabecera al pie y del borde del
   explorador al de la ventana. Antes era una persiana de la altura de su
   contenido (top fijo a 46 px y max-height 78vh): por debajo asomaban el
   editor y el chat, y empezaba 5 px por debajo de la cabecera. La barra de
   actividad y el explorador quedan a la vista y funcionando; al ocultar el
   árbol, el panel se ensancha hasta la barra. */
#settings-panel {
  position: fixed; top: var(--ide-top, 41px); left: 281px; right: 0; bottom: 0; z-index: 90;
  max-height: none; overflow-y: auto; overscroll-behavior: contain; flex-direction: column;
  border-left: 1px solid var(--line); border-bottom: none;
}
#settings-panel > * { flex-shrink: 0; }
body.hide-tree #settings-panel, body.chat-full #settings-panel { left: 46px; }
@media (max-width: 760px) { #settings-panel, body.hide-tree #settings-panel { left: 0; border-left: none; } }

/* ---------- móvil: cajón con el árbol y las herramientas ----------
   En el móvil la barra de actividad, el árbol y la barra de menús están
   ocultos: sin esto, en la vista Editor no había forma de abrir un fichero
   (salvo enlaces del chat) ni de llegar a la Mente, el terminal, las vistas 3D
   o las skills. ☰ abre un cajón con todo eso. */
#btn-drawer { display: none; }
@media (max-width: 760px) {
  #btn-drawer { display: inline-flex; font-size: 1rem; }
  body.drawer-open #activity {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    position: fixed; left: 0; top: var(--drawer-top, 52px); width: min(86vw, 340px); height: auto;
    z-index: 96; padding: 4px; border-right: none; border-bottom: 1px solid var(--line);
  }
  body.drawer-open #activity #act-mind { margin: 0; }
  body.drawer-open #activity button { width: 36px; height: 40px; border-left: none; border-bottom: 2px solid transparent; }
  body.drawer-open #sidebar {
    display: flex; position: fixed; left: 0; top: calc(var(--drawer-top, 52px) + var(--drawer-act, 50px)); bottom: 0;
    width: min(86vw, 340px); z-index: 95; box-shadow: 12px 0 40px rgba(0,0,0,.55);
  }
  body.drawer-open #drawer-scrim { display: block; }
}
#drawer-scrim { display: none; position: fixed; inset: 0; z-index: 94; background: rgba(0,0,0,.45); }

/* 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; } }

/* la búsqueda fija arriba: parece un campo, abre la paleta debajo */
.top-search { flex: 0 1 440px; margin: 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 28px; padding: 0 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  color: var(--muted); font-size: .8rem; cursor: text; text-align: left; }
.top-search:hover { border-color: var(--accent2); color: var(--fg); }
.top-search:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
.top-search .ts-ico { display: inline-flex; flex: none; }
.top-search .ts-ico svg { width: 14px; height: 14px; }
.top-search .ts-txt { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-search .ts-kbd { flex: none; font: inherit; font-size: .72rem; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg3); }
@media (max-width: 760px) { .top-search { flex: 0 0 auto; width: 34px; padding: 0; justify-content: center; } .top-search .ts-txt, .top-search .ts-kbd { 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; }
#topmenu .menu-item.disabled { opacity: .55; cursor: default; }
#topmenu .menu-item.disabled:hover { background: none; }
#topmenu .menu-item:focus-visible, #menubar button:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }

/* 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; }
/* El nombre del modelo junto a su punto: el punto solo, de 9 px, no se
   encontraba, y es la puerta para cambiar de modelo (Ajustes → Cerebro). */
.model-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.model-name:empty { display: none; }
@media (max-width: 820px) { .model-name { display: none; } }

/* 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; }
/* Ocupado (mandando, vaciando): con aria-disabled y no con disabled, para no
   sacarlo del foco (ver ocupa() en main.js); esto es lo que se ve. */
.prov-use[aria-busy="true"], .chip[aria-busy="true"] { opacity: .6; cursor: progress; }
.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.loading { border-color: #e5a53a; }
.model-card:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
.model-card.disabled:hover { border-color: var(--line); }

/* ---------- vistas Arquitectura / Ciudad 3D (overlay sobre el editor) ---------- */
/* termina encima de la consola: si está abierta, nada la tapa (--term-h, de main.js) */
#view-overlay { position: absolute; inset: 34px 0 calc(22px + var(--term-h, 0px)) 0; z-index: 30; background: #0b0d12; overflow: hidden; }
/* Lo que hay en la vista 3D, como lista que se puede buscar y recorrer con el teclado */
.view-list { position: absolute; top: 48px; right: 12px; bottom: 12px; width: 280px; z-index: 31; display: flex; flex-direction: column; background: #0d1117e6; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.view-list .vl-filter { width: 100%; box-sizing: border-box; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: .78rem; }
.view-list .vl-count { color: var(--muted); font-size: .7rem; margin: 6px 2px 0; }
.view-list .vl-items { list-style: none; margin: 6px 0 0; padding: 0; overflow: auto; flex: 1; }
.view-list .vl-items li { display: flex; align-items: center; gap: 2px; }
.view-list .vl-open { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: #c8cede; padding: 3px 6px; border-radius: 5px; cursor: pointer; font: inherit; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-list .vl-open:hover, .view-list .vl-open:focus-visible, .view-list .vl-locate:hover, .view-list .vl-locate:focus-visible { background: var(--bg3); }
.view-list .vl-dir { color: var(--muted); font-size: .68rem; }
.view-list .vl-locate { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 5px; }
@media (max-width: 760px) { .view-list { top: auto; left: 8px; right: 8px; width: auto; height: 40%; } }
#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; }
.vm-modelo { font-weight: 400; opacity: .6; font-size: .78rem; }
/* El aviso de «leer va tan lento como escribir»: es un sintoma, no un dato. */
.vm-alerta { margin: 10px 0 2px; padding: 8px 10px; border-radius: 8px; font-size: .75rem;
  line-height: 1.35; background: rgba(255,176,32,.10); border: 1px solid rgba(255,176,32,.28); }