/* ══════════════════════════════════════════════════════════════════════
   KACHAI · Estructura del espacio de trabajo

   Sólo la disposición y los componentes propios del chat. La paleta vive
   en kachai-mono.css, que se carga justo antes y define la escala --w-*.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 2. Superficies ────────────────────────────────────────────────── */
html, body { background: var(--w-papel); }
:root .chat-shell,
:root .chat-main,
:root .workspace,
:root .chat-col { background: var(--w-papel) !important; }
:root .chat-main {
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}
/* Decoraciones de las hojas anteriores (halos, lienzo de fondo). */
.chat-main::before, .chat-main::after, .brain-canvas { display: none; }

:root .sidebar {
  width: 252px;
  background: var(--w-barra) !important;
  border-right: 1px solid var(--w-linea) !important;
  border-color: var(--w-linea) !important;
  box-shadow: none;
}

.brand { padding-top: 26px; }
.brand__sub {
  font: 10px/1 var(--fuente-mono, ui-monospace, monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w-tinta-3);
}

/* ── 3. Botones ────────────────────────────────────────────────────── */
/* Primario: bloque de tinta llena. Es la única pieza de alto contraste
   de la pantalla, así que marca sin ambigüedad la acción principal. */
:root .btn-primary,
:root .btn-send {
  background: var(--w-acento) !important;
  color: var(--w-acento-tinta) !important;
  border: 1px solid var(--w-acento) !important;
  box-shadow: none !important;
}
:root .btn-primary:hover,
:root .btn-send:hover:not(:disabled) { opacity: .86; }
:root .btn-send:disabled { background: var(--w-linea-2) !important; border-color: var(--w-linea-2) !important; color: var(--w-papel) !important; }

/* En la barra lateral el primario se vacía: allí manda la lista, no el botón. */
.side-actions .btn-primary {
  background: transparent !important;
  color: var(--w-tinta) !important;
  border: 1px solid var(--w-linea-2) !important;
}
.side-actions .btn-primary:hover { background: var(--w-hover) !important; opacity: 1; }

.sidebar-theme, .sidebar-settings {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--w-tinta-2);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.sidebar-theme:hover, .sidebar-settings:hover { background: var(--w-hover); color: var(--w-tinta); }
.sidebar-mobile-toggle { display: none; position: absolute; z-index: 8; left: 12px; top: 12px; }

/* ── 4. Hilo y estado vacío ────────────────────────────────────────── */
.thread { padding: 40px max(24px, calc((100% - 820px) / 2)); }
.empty { min-height: 100%; justify-content: center; padding: 30px 0; position: relative; }

/* Retícula de puntos: el único adorno de la pantalla. Se apoya en la
   tinta a muy baja opacidad y se desvanece hacia los bordes, así sugiere
   papel técnico sin competir con el texto. */
.empty::before {
  content: '';
  position: absolute;
  inset: -40px -10% auto;
  height: 420px;
  pointer-events: none;
  background-image: radial-gradient(currentColor .8px, transparent .8px);
  background-size: 22px 22px;
  color: var(--w-tinta);
  opacity: .055;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 78%);
}

.work-welcome { position: relative; width: min(100%, 660px); margin: auto; text-align: left; }
/* El isotipo de KACHAI: la K abstracta de la marca, en una sola tinta.
   Antes había aquí un asterisco tipográfico, que no identifica a este
   producto. Las trayectorias secundarias van más tenues para que la K se
   lea primero y el trazo converja en el nodo central. */
.work-welcome__mark { margin-bottom: 26px; color: var(--w-tinta); line-height: 0; }
.marca-k { width: 54px; height: 54px; display: block; overflow: visible; }
.marca-k__nodos { opacity: .9; }
/* El nodo de convergencia se abre ligeramente al apuntar la bienvenida. */
.marca-k__nodos { transition: opacity .4s ease; }
.work-welcome:hover .marca-k__nodos { opacity: .55; }
.work-welcome__label {
  display: inline-block;
  color: var(--w-tinta-3);
  text-transform: uppercase;
  letter-spacing: .16em;
  font: 11px/1 var(--fuente-mono, ui-monospace, monospace);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--w-linea);
}
.work-welcome h1 {
  color: var(--w-tinta);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 18px 0 12px;
}
.work-welcome p { color: var(--w-tinta-2); max-width: 530px; font-size: 15px; line-height: 1.7; }
.work-welcome__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  font: 11px var(--fuente-mono, ui-monospace, monospace);
  color: var(--w-tinta-3);
}
.work-welcome__meta span {
  padding: 7px 11px;
  border: 1px solid var(--w-linea);
  border-radius: 999px;
  background: var(--w-papel);
}

/* ── 5. Mensajes ───────────────────────────────────────────────────── */
.msg { padding: 0; }
.msg__row { border: 0 !important; }
.msg__meta { display: none; }
.msg__body { width: 100%; }
.msg__avatar { box-shadow: none; background: var(--w-tinta); color: var(--w-papel); border-radius: 7px; }
.reasoning { display: none; }

/* ── 6. Redactor ───────────────────────────────────────────────────── */
:root .composer {
  background: var(--w-papel) !important;
  border: 0 !important;
  border-top: 0 !important;
  padding-bottom: 18px;
}
.composer__inner { max-width: 820px; }
:root .composer__box {
  background: var(--w-panel) !important;
  border: 1px solid var(--w-linea-2) !important;
  border-color: var(--w-linea-2) !important;
  border-radius: 16px;
  box-shadow: var(--w-sombra);
  transition: border-color .16s ease, box-shadow .16s ease;
}
/* El foco se marca con la propia tinta: sin anillo de color. */
:root .composer__box:focus-within {
  border-color: var(--w-tinta) !important;
  box-shadow: 0 0 0 3px var(--w-hover);
}
.composer__input { min-height: 78px; }
.btn-send { border-radius: 10px; }
.composer__note { font-size: 11px; color: var(--w-tinta-3); }

.composer-more { position: relative; }
.composer-more > summary { list-style: none; cursor: pointer; }
.composer-more__trigger { display: flex; align-items: center; gap: 7px; width: auto; padding: 8px; }
.composer-more__menu {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 14px);
  left: 0;
  width: 330px;
  padding: 18px;
  border: 1px solid var(--w-linea);
  border-radius: 14px;
  background: var(--w-panel);
  box-shadow: var(--w-sombra);
}
.composer-more__head, .composer-more__field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--w-tinta-2);
}
.composer-more__actions { display: flex; gap: 8px; margin-bottom: 18px; }
.composer-action {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 10px 5px;
  border: 1px solid var(--w-linea);
  border-radius: 9px;
  background: var(--w-papel);
  color: var(--w-tinta-2);
  cursor: pointer;
  font-size: 11px;
}
.composer-action:hover { background: var(--w-hover); color: var(--w-tinta); border-color: var(--w-linea-2); }

/* ── 7. Actividad y progreso ───────────────────────────────────────── */
.activity__dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--w-tinta);
  animation: kPulse 1.4s infinite;
}
.stream-bar {
  max-width: 820px;
  width: calc(100% - 48px);
  margin: 0 auto 8px;
  border-radius: 10px;
  border: 1px solid var(--w-linea);
  background: var(--w-panel);
}
.stream-bar__timer { font: 11px var(--fuente-mono, ui-monospace, monospace); color: var(--w-tinta-3); }

.generation-progress {
  border: 1px solid var(--w-linea);
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0;
  color: var(--w-tinta-2);
  font-size: 13px;
}
.generation-progress summary { cursor: pointer; }
.generation-progress summary::marker { color: var(--w-tinta-3); }
.generation-progress__bar { height: 2px; background: var(--w-linea); border-radius: 2px; overflow: hidden; margin-top: 10px; }
.generation-progress__bar::after {
  content: '';
  display: block;
  width: 35%; height: 100%;
  background: var(--w-tinta);
  animation: work-progress 1.6s ease-in-out infinite alternate;
}
.generation-progress pre { white-space: pre-wrap; max-height: 280px; overflow: auto; font: 12px/1.6 var(--fuente-mono, ui-monospace, monospace); }
@keyframes work-progress { to { transform: translateX(185%); } }

/* ── 8. Pie de la barra: contexto, cuota e identidad ───────────────── */
.side-foot { border-top: 1px solid var(--w-linea); }
.ctx-head, .ctx-quota {
  font: 11px var(--fuente-mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w-tinta-3);
}
.ctx-head__value { color: var(--w-tinta); letter-spacing: 0; }
.ctx-track { background: var(--w-linea); height: 2px; border-radius: 2px; overflow: hidden; }
.ctx-fill { background: var(--w-tinta); }
.ctx-note { color: var(--w-tinta-3); font-size: 11px; line-height: 1.5; }

.user-card {
  border: 1px solid var(--w-linea);
  border-radius: 10px;
  background: var(--w-panel);
  transition: border-color .16s ease, background .16s ease;
}
.user-card:hover { border-color: var(--w-linea-2); background: var(--w-hover); }
/* La inicial va en un bloque de tinta: misma familia visual que el botón
   principal, y deja de ser la única mancha de color de la barra. */
.user-card__avatar {
  background: var(--w-tinta) !important;
  color: var(--w-papel) !important;
  border-radius: 7px !important;
  font: 600 13px var(--fuente-mono, ui-monospace, monospace);
}
.user-card__name { color: var(--w-tinta); }
.user-card__plan { color: var(--w-tinta-3); font: 11px var(--fuente-mono, ui-monospace, monospace); }

/* ── 9. Taller y visores ───────────────────────────────────────────── */
/* El visor conserva su lienzo intacto: aquí sólo se neutraliza el marco. */
.workshop { background: var(--w-papel); box-shadow: none; border-color: var(--w-linea); }
.code-card { box-shadow: none; border-color: var(--w-linea); }
.code-card > summary { cursor: pointer; list-style: none; color: var(--w-tinta-2); }
.code-card > summary::before { content: '›'; margin-right: 8px; color: var(--w-tinta-3); }
.code-card[open] > summary::before { content: '⌄'; }
.code-card:not([open]) .code-card__pre { display: none; }
.work-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  padding: 9px 13px;
  border: 1px solid var(--w-linea-2);
  border-radius: 9px;
  background: var(--w-papel);
  color: var(--w-tinta);
  cursor: pointer;
}
.work-open:hover { background: var(--w-hover); }
.ws-stage.is-componiendo::before {
  content: 'Preparando vista previa…';
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  background: var(--w-panel);
  color: var(--w-tinta);
  font-size: 12px;
}

/* ── 10. Móvil ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar-mobile-toggle { display: grid; place-items: center; }
  .composer-more__menu { width: min(330px, calc(100vw - 40px)); left: -40px; }
  .ws-bar { overflow-x: auto; }
  .ws-devices, .ws-title, .ws-flag { display: none; }
  .thread { padding: 64px 20px 20px; }
  .work-welcome h1 { font-size: 30px; }
  .work-welcome__mark { margin-bottom: 18px; }
  .marca-k { width: 42px; height: 42px; }
  .composer { padding: 8px 12px 12px; }
  .work-welcome__meta { gap: 6px; }
  .empty::before { display: none; }
}

/* ── 12. Piezas con color escrito a mano ───────────────────────────── */
/* El logotipo llevaba los nodos en azul, violeta y rojo, y «AI» en un
   degradado. Aquí es una sola tinta: los nodos bajan a gris para que la
   palabra se lea antes que el adorno. */
.kachai-brand__word .node,
.kachai-brand__word .node--blue,
.kachai-brand__word .node--violet,
.kachai-brand__word .node--red { color: var(--w-tinta-4) !important; }
.kachai-brand__word .ai {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--w-tinta) !important;
  font-style: normal;
}

:root .btn-primary, :root .btn-send {
  background-image: none !important;
  filter: none;
}
:root .btn-primary:hover, :root .btn-send:hover { filter: none; box-shadow: none !important; }
.side-actions .btn-primary { background-image: none !important; }

.mode-switch__btn { border-radius: 999px !important; }
.mode-switch__btn.is-on {
  background: var(--w-tinta) !important;
  background-image: none !important;
  color: var(--w-papel) !important;
}
.mode-switch__btn:not(.is-on):hover { color: var(--w-tinta) !important; }
.btn-nodo .ms { color: var(--w-tinta-2) !important; }
:root .composer__note { color: var(--w-tinta-3) !important; }

/* ── 13. Paridad entre paletas ─────────────────────────────────────── */
/* theme-boot apaga chat-light.css entera al pasar a oscuro, y con ella se
   iban también sus reglas de DISPOSICIÓN, no sólo las de color: la marca
   se quedaba en línea y el nombre chocaba con el subtítulo. Se rehace
   aquí, en la hoja que sí está activa en las dos paletas. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.brand__sub { display: block; }
.brand a, .brand__word, .kachai-brand__word { text-decoration: none; border-bottom: 0; }

/* La barra lateral era un bloque a sangre en claro y una tarjeta
   redondeada en oscuro. Se unifica a sangre en las dos. */
:root .sidebar { border-radius: 0 !important; margin: 0 !important; }

/* Ningún degradado heredado debe reaparecer sobre las superficies. */
:root .chat-shell, :root .chat-main, :root .sidebar,
:root .composer, :root .composer__box, :root .thread { background-image: none !important; }

/* ── 14. Restos de la piel anterior ────────────────────────────────── */
/* La marca es un <a>: traía subrayado y un filete azul translúcido por
   debajo. Ninguno de los dos aporta nada cuando el logotipo ya es tinta. */
a.brand, .brand, .kachai-brand {
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.brand:hover .kachai-brand__word { opacity: .7; }

/* La barra llevaba filete en los cuatro lados; sólo hace falta el que la
   separa del hilo. */
:root .sidebar {
  border: 0 !important;
  border-right: 1px solid var(--w-linea) !important;
}

/* El botón de búsqueda conservaba un azul escrito a mano, no un token. */
.btn-square, .btn-icon, .icon-btn {
  background: var(--w-papel) !important;
  background-image: none !important;
  border: 1px solid var(--w-linea) !important;
  color: var(--w-tinta-2) !important;
}
.btn-square:hover, .btn-icon:hover, .icon-btn:hover {
  background: var(--w-hover) !important;
  color: var(--w-tinta) !important;
}

/* Rótulos de sección de la barra, en versalitas de una sola tinta. */
.side-label, .sessions-label, .sidebar__label {
  color: var(--w-tinta-3) !important;
  font: 11px var(--fuente-mono, ui-monospace, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Cualquier enlace de la barra: sin subrayado permanente. */
.sidebar a { text-decoration: none; }
.sidebar a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Isotipo a escala de icono, dentro del modal de acceso. */
.auth-modal__spark { display: inline-flex; color: var(--w-tinta); line-height: 0; }
.marca-k--mini { width: 20px; height: 20px; }