/* ══════════════════════════════════════════════════════════════════════
   KACHAI · Chat en clave editorial

   Va la última del chat, después de kachai-editorial.css. Las hojas
   anteriores (chat, chat-premium, chat-light, workspace) fijan superficies
   con !important y colores escritos a mano; por eso aquí también se usa
   !important donde hace falta ganarles, y nunca un color fuera de los
   tokens --w-* / --ed-*.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Superficies ────────────────────────────────────────────────── */
/* chat-light pintaba el cuerpo en #fff y entre la barra y el hilo quedaba
   una franja de 12 px de otro color. Todo es el mismo papel con grano. */
:root .chat-body {
  background-color: var(--w-papel) !important;
  background-image: var(--ed-grano) !important;
}
:root .chat-main, :root .workspace, :root .chat-col, :root .thread,
:root .composer { background-color: transparent !important; }
:root .sidebar { background-color: var(--w-barra) !important; }

/* ── 2. Marca en la barra ──────────────────────────────────────────── */
/* "● KACHAI": isotipo a la izquierda y la palabra con su rótulo a la
   derecha, en una fila, como la cabecera de la referencia. */
.sidebar .brand {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 24px 18px 10px !important;
}
.sidebar .kachai-brand__mark { width: 30px !important; height: 22px !important; aspect-ratio: auto !important; }
.sidebar .brand__text { gap: 5px; }

/* ── 3. Rótulos: versalitas serif ──────────────────────────────────── */
.side-label, .sessions-label, .sidebar__label,
.ctx-head, .ctx-quota .ctx-head, .work-welcome__label,
.msg__name, .composer-more__label, .auth-field__label {
  font-family: var(--ed-serif) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--w-tinta-3) !important;
}
.ctx-head__value { font-family: var(--fuente) !important; font-variant-numeric: tabular-nums; letter-spacing: .04em !important; color: var(--w-tinta) !important; }
/* Las notas de la barra eran monoespaciada en mayúsculas: se leían como
   un registro de terminal. Pasan a frase corriente. */
.ctx-note {
  font: 11.5px/1.5 var(--fuente) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--w-tinta-3) !important;
}
.ctx-fill { background: var(--ed-cobre) !important; }

/* ── 4. Sesiones ───────────────────────────────────────────────────── */
/* La sesión activa iba en una caja de tinta de cuatro lados. Ahora es un
   filete de cobre a la izquierda sobre papel tostado, como la navegación
   del estudio. */
.conv-item { border-radius: 4px !important; border: 1px solid transparent !important; }
.conv-item:hover { background: var(--w-hover) !important; }
.conv-item.is-active, .conv-item.active, .conv-item[aria-current="true"] {
  background: var(--w-hover) !important;
  border-color: transparent !important;
  box-shadow: inset 2px 0 0 var(--ed-cobre) !important;
  color: var(--w-tinta) !important;
}
.side-actions .btn-primary { border-radius: 4px !important; font-weight: 500 !important; }
.btn-square { border-radius: 4px !important; }

/* ── 5. Cuenta en el pie ───────────────────────────────────────────── */
.user-card { border-radius: 6px !important; background: var(--w-panel) !important; }
.user-card__avatar {
  background: var(--ed-petroleo) !important;
  color: var(--w-panel) !important;
  border-radius: 50% !important;
  font: 400 16px var(--ed-serif) !important;
}
.user-card__plan { font: 11px var(--fuente) !important; }

/* ── 6. Bienvenida ─────────────────────────────────────────────────── */
.work-welcome__label { border-bottom-color: var(--w-linea-2) !important; padding-bottom: 12px !important; }
.work-welcome h1 {
  font: 400 clamp(38px, 4.4vw, 62px)/1.04 var(--ed-serif) !important;
  letter-spacing: -.045em !important;
  margin: 22px 0 18px !important;
}
.ed-subrayado {
  text-decoration: underline;
  text-decoration-color: var(--ed-cobre);
  text-decoration-thickness: 3px;
  text-underline-offset: .16em;
}
.work-welcome p {
  font: 18px/1.55 var(--ed-serif) !important;
  color: var(--w-tinta-3) !important;
  letter-spacing: -.01em;
}
.work-welcome__meta span { border-radius: 2px !important; background: transparent !important; }

/* Accesos rápidos: rejilla de filetes, título serif y bajada pequeña. */
.sugerencias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid var(--w-linea-2);
}
.sugerencia {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 16px 16px 0;
  border: 0; border-bottom: 1px solid var(--w-linea-2); border-radius: 0;
  background: transparent; color: var(--w-tinta);
  text-align: left; cursor: pointer;
  transition: background-color .25s, padding-left .25s;
}
.sugerencia:nth-child(odd) { border-right: 1px solid var(--w-linea-2); }
.sugerencia:nth-child(even) { padding-left: 16px; }
.sugerencia b { font: 400 17px/1.3 var(--ed-serif); }
.sugerencia span { font-size: 11.5px; color: var(--w-tinta-3); }
.sugerencia:hover { background: color-mix(in srgb, var(--ed-cobre) 6%, transparent); }
.sugerencia:hover b { color: var(--ed-cobre); }

/* ── 7. Mensajes ───────────────────────────────────────────────────── */
/* Lo tuyo, en petróleo muy tenue; la respuesta, en serif de lectura. */
.msg:not(.msg--assistant) .msg__text {
  background: color-mix(in srgb, var(--ed-petroleo) 8%, var(--w-panel)) !important;
  border: 1px solid color-mix(in srgb, var(--ed-petroleo) 16%, var(--w-linea)) !important;
  border-radius: 9px 9px 2px 9px !important;
  color: var(--w-tinta) !important;
  font-size: 14.5px !important;
}
.msg--assistant .msg__text.md {
  font: 17px/1.72 var(--ed-serif);
  color: var(--w-tinta);
}
.msg--assistant .md :is(h1, h2, h3) { letter-spacing: -.025em; margin-top: 1.1em; }
.msg--assistant .md :is(code, pre, .code-card) { font-family: var(--fuente-mono); }
/* Las tablas son datos, no prosa: sans de interfaz. */
.msg--assistant .md :is(table, td) { font-family: var(--fuente) !important; font-size: 14px; }
.msg--assistant .md th {
  font: 400 9.5px var(--ed-serif) !important;
  letter-spacing: .2em; text-transform: uppercase; color: var(--w-tinta-3) !important;
  background: var(--w-hover) !important;
}
.msg--assistant .md blockquote {
  background: transparent !important;
  border-left: 2px solid var(--ed-cobre) !important;
  font-style: italic;
  color: var(--w-tinta-2) !important;
}
.msg--assistant .md a { color: var(--ed-cobre); text-underline-offset: 3px; }
.msg__action, .work-open { border-radius: 3px !important; }

/* ── 8. Redactor ───────────────────────────────────────────────────── */
:root .composer__box { border-radius: 7px !important; }
:root .composer__box:focus-within {
  border-color: var(--ed-cobre) !important;
  box-shadow: 0 0 0 3px var(--ed-cobre-suave) !important;
}
/* Enviar: el cobre de la referencia, con su forma de llamada editorial. */
:root .btn-send {
  background: var(--ed-cobre) !important;
  border-color: var(--ed-cobre) !important;
  color: #fff8ed !important;
  border-radius: 3px 20px 20px 3px !important;
}
:root .btn-send:hover:not(:disabled) { background: var(--ed-cobre-2) !important; opacity: 1; }
:root .btn-send.is-stop { background: var(--ed-tinta-cta) !important; border-color: var(--ed-tinta-cta) !important; color: var(--ed-papel-cta) !important; }
.composer-more__menu, .comp-menu { border-radius: 6px !important; }
.mode-switch__btn { border-radius: 3px !important; }

/* ── 9. Actividad ──────────────────────────────────────────────────── */
.activity__dot { background: var(--ed-cobre) !important; }
.stream-bar { border-radius: 6px !important; }
.generation-progress { border-radius: 6px !important; }
.generation-progress__bar::after { background: linear-gradient(90deg, var(--ed-petroleo), var(--ed-cobre)) !important; }

/* ── 10. Taller ────────────────────────────────────────────────────── */
/* La barra del taller se partía en dos filas en escritorio y el botón de
   cerrar quedaba solo debajo. Va en una fila y lo que sobra se desplaza. */
.ws-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 6px !important; }
.ws-bar::-webkit-scrollbar { display: none; }
.ws-bar > * { flex-shrink: 0; }
.ws-tab { font-family: var(--ed-serif) !important; letter-spacing: .16em !important; border-radius: 2px !important; }
.ws-btn, .ws-dev { border-radius: 4px !important; }
.workshop { border-left: 1px solid var(--w-linea) !important; container: taller / inline-size; }
/* El ancho del taller es explícito (46 % o el del arrastre), así que puede
   ser contenedor: cuando se angosta, primero se van los tamaños de
   dispositivo y después el nombre del archivo; cerrar siempre queda. */
@container taller (max-width: 640px) { .ws-devices { display: none !important; } }
@container taller (max-width: 470px) { .ws-title, .ws-flag { display: none !important; } }

/* ── 11. Acceso ────────────────────────────────────────────────────── */
/* chat-premium dejaba los campos en el azul noche translúcido de la paleta
   oscura aunque el tema fuese claro, y chat-light fijaba la caja en #fff. */
:root .auth-modal { background: rgba(33, 27, 23, .36) !important; backdrop-filter: blur(9px); }
:root .auth-modal__box {
  background: var(--w-panel) !important;
  border: 1px solid var(--w-linea) !important;
  border-top: 3px solid var(--ed-cobre) !important;
  border-radius: 8px !important;
  padding: 30px 32px 26px !important;
  box-shadow: 0 30px 100px rgba(23, 16, 9, .30) !important;
}
:root .auth-modal__box::before { display: none !important; }
.auth-modal__brand { font-family: var(--fuente) !important; letter-spacing: .2em !important; color: var(--w-tinta) !important; }
.auth-tab {
  font-family: var(--ed-serif) !important;
  letter-spacing: .2em !important;
  color: var(--w-tinta-3) !important;
}
.auth-tab.is-on { color: var(--w-tinta) !important; box-shadow: inset 0 -2px 0 var(--ed-cobre) !important; border-color: transparent !important; }
:root .auth-field input {
  height: 44px !important;
  background: var(--w-papel) !important;
  border: 1px solid var(--w-linea-2) !important;
  border-radius: 3px !important;
  color: var(--w-tinta) !important;
  font-size: 14px !important;
}
:root .auth-field input::placeholder { color: var(--w-tinta-4) !important; }
:root .auth-field input:focus { border-color: var(--ed-cobre) !important; box-shadow: 0 0 0 3px var(--ed-cobre-suave); }
/* flex:1 de .btn-primary es para la fila de la barra; dentro del formulario
   en columna dejaba el botón en 20 px de alto. */
:root .auth-submit {
  flex: 0 0 auto !important;
  height: 46px !important;
  margin-top: 4px;
  border-radius: 3px !important;
  font: 400 17px var(--ed-serif) !important;
  background: var(--ed-tinta-cta) !important;
  border-color: var(--ed-tinta-cta) !important;
  color: var(--ed-papel-cta) !important;
}
.auth-link { color: var(--ed-cobre) !important; }
.auth-note { color: var(--w-tinta-3) !important; }
.auth-error { color: var(--peligro) !important; background: var(--peligro-suave) !important; border-color: color-mix(in srgb, var(--peligro) 30%, transparent) !important; }
.auth-ok { color: var(--ed-salvia) !important; background: color-mix(in srgb, var(--ed-salvia) 10%, transparent) !important; border-color: color-mix(in srgb, var(--ed-salvia) 30%, transparent) !important; }

/* ── 12. Paleta de comandos y avisos ───────────────────────────────── */
:root .palette__box, :root .comp-menu { background: var(--w-panel) !important; border-color: var(--w-linea-2) !important; }
.palette__input { font: 18px var(--ed-serif) !important; }
.auth-notice { border-left: 2px solid var(--ed-cobre) !important; border-radius: 4px !important; }

/* ── 13. Móvil ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .work-welcome h1 { font-size: 36px !important; }
  .work-welcome p { font-size: 16.5px !important; }
  .sugerencias { grid-template-columns: 1fr; margin-top: 22px; }
  .sugerencia:nth-child(odd) { border-right: 0; }
  .sugerencia:nth-child(even) { padding-left: 0; }
  .msg--assistant .msg__text.md { font-size: 16.5px; }
  :root .auth-modal__box { padding: 26px 22px 22px !important; }
}

/* ── 14. Paridad entre temas ───────────────────────────────────────── */
/* theme-boot apaga chat-light.css en oscuro y con ella se iba el aplanado
   de los mensajes: reaparecían las tarjetas azul noche de chat-premium,
   el marco de 10 px alrededor del lienzo y los menús translúcidos. Aquí se
   rehace esa disposición en la hoja que está activa en los dos temas. */
:root .chat-shell { padding: 0 !important; gap: 0 !important; background: var(--w-papel) !important; }
:root .chat-shell::before { display: none !important; }
:root .msg__row {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--w-linea) !important;
  border-radius: 0 !important;
}
:root .msg:last-child .msg__row { border-bottom: 0 !important; }
:root .msg__body {
  margin: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  background: transparent !important;
}
:root .msg__meta { background: transparent !important; }
:root .msg:not(.msg--assistant) .msg__text { padding: 11px 15px !important; display: inline-block; max-width: 100%; }
:root .msg__actions { background: transparent !important; border: 1px solid var(--w-linea) !important; }
:root .msg__action { background: var(--w-panel) !important; color: var(--w-tinta-3) !important; }
:root .msg__action:hover { background: var(--w-hover) !important; color: var(--ed-cobre) !important; }
:root .msg__checkpoint {
  background: var(--w-panel) !important;
  border: 1px solid var(--w-linea) !important;
  color: var(--w-tinta-3) !important;
  box-shadow: none !important;
}
:root .code-card, :root .plan-card, :root .approval, :root .msg__trunc, :root .attach-chip {
  background: var(--w-panel) !important;
  border-color: var(--w-linea) !important;
  box-shadow: none !important;
}
:root .ws-bar { background: var(--w-panel) !important; border-bottom-color: var(--w-linea) !important; }
:root .palette, :root .backdrop.is-open { background: rgba(33, 27, 23, .36) !important; }
:root .palette__input { background: transparent !important; border-bottom-color: var(--w-linea) !important; color: var(--w-tinta) !important; }
:root .comp-menu__item:hover, :root .palette__item:hover,
:root .palette__item.is-on, :root .comp-menu__item.is-on {
  background: var(--w-hover) !important;
  color: var(--w-tinta) !important;
}
:root .side-foot { border-color: var(--w-linea) !important; background: transparent !important; }

/* Enviar lleva texto: el cobre baja un punto para que el crema sobre él
   cumpla contraste AA (4,9:1) en los dos temas. */
:root .btn-send { background: #a9543a !important; border-color: #a9543a !important; }
:root .btn-send:hover:not(:disabled) { background: #b65d40 !important; }
/* Pestaña y dispositivo activos: tinta llena con papel encima en los dos
   temas (en oscuro quedaba texto crema sobre fondo crema). */
:root .ws-tab.is-on, :root .ws-dev.is-on {
  background: var(--w-tinta) !important;
  color: var(--w-papel) !important;
}
:root .code-card__btn {
  background: var(--w-papel) !important;
  border: 1px solid var(--w-linea-2) !important;
  color: var(--w-tinta-2) !important;
  border-radius: 3px !important;
}
:root .code-card__btn:hover { color: var(--ed-cobre) !important; border-color: var(--ed-cobre) !important; }
/* El marcador de posición heredaba un gris azulado de chat-premium. */
:root .composer__input { color: var(--w-tinta) !important; }
:root .composer__input::placeholder { color: var(--w-tinta-4) !important; }