/**
 * chat.css — la superficie de JOS Chat.
 *
 * Todo vive bajo `.jos-chat` y con prefijo `--jc-*`. A propósito: este archivo lo
 * carga TAMBIÉN la consola (chat.js lo inyecta si no está), y la consola tiene su
 * propio juego de tokens con modo claro. Si acá se redefiniera `--bg` o `--ink`,
 * la consola en claro se rompería al abrir la pestaña Chat.
 *
 * Lo único que se hereda del anfitrión es `--accent`: el naranja de la casa es el
 * mismo acá que en el resto de la consola. Por eso no es un injerto.
 * El resto es un panel oscuro a propósito, en claro y en oscuro: es un
 * instrumento, no un documento.
 */

.jos-chat{
  --jc-stage:#0a0d13;
  --jc-panel:#111721;
  --jc-panel2:#161d29;
  --jc-line:#1d2634;
  --jc-line2:#2b384a;
  --jc-ink:#e4eaf3;
  --jc-dim:#8a97aa;
  --jc-mute:#5b6879;
  --jc-accent:var(--accent,#ff7a33);
  --jc-ok:#3ecf8e;
  --jc-warn:#e0a33a;
  --jc-stop:#ff6b5e;
  --jc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  display:flex; flex-direction:column;
  height:var(--jc-h,70vh); min-height:380px;
  background:var(--jc-stage); color:var(--jc-ink);
  border:1px solid var(--jc-line2); border-radius:14px; overflow:hidden;
  position:relative; isolation:isolate;
}
.jos-chat.full{ --jc-h:calc(100dvh - 52px); border-radius:0; border-width:1px 0 0 }

/* Retícula técnica de fondo. Es lo primero que dice "esto es un instrumento". */
.jos-chat::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--jc-line2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--jc-line2) 1px,transparent 1px);
  background-size:40px 40px; opacity:.62;
  /* La retícula se desvanece hacia abajo, no en redondo: el radial quedaba tapado
     por la barra de estado, que es opaca, y la textura no se veía en ningún lado. */
  mask-image:linear-gradient(180deg,#000 0 58%,transparent 96%);
}
.jos-chat>*{ position:relative; z-index:1 }

/* ── barra de estado ─────────────────────────────────────────────────────── */
.jc-bar{
  display:flex; align-items:stretch; flex-wrap:wrap;
  border-bottom:1px solid var(--jc-line2); background:var(--jc-panel);
}
.jc-cell{
  display:flex; flex-direction:column; gap:2px; justify-content:center;
  padding:8px 14px; border-right:1px solid var(--jc-line); min-width:0;
}
.jc-cell:last-child{ border-right:0 }
.jc-cell.grow{ flex:1 }
.jc-cell.acts{ flex-direction:row; gap:6px; align-items:center }
.jc-k{ font-family:var(--jc-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--jc-mute) }
.jc-v{ font-family:var(--jc-mono); font-size:12px; color:var(--jc-ink); font-variant-numeric:tabular-nums;
       white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.jc-v.dimv{ color:var(--jc-dim) }
.jc-mark{ font-weight:800; letter-spacing:.22em; font-size:12px; font-family:var(--jc-mono); color:var(--jc-ink) }
.jc-mark i{ color:var(--jc-accent); font-style:normal }

.jc-led{ width:8px; height:8px; border-radius:99px; display:inline-block; background:var(--jc-mute); flex:none;
         margin-right:7px; vertical-align:1px }
.jc-led.on{ background:var(--jc-ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--jc-ok) 22%,transparent) }
.jc-led.off{ background:var(--jc-stop); box-shadow:0 0 0 3px color-mix(in srgb,var(--jc-stop) 22%,transparent) }
.jc-led.wait{ background:var(--jc-warn); animation:jc-pulse 1s steps(2,end) infinite }
@keyframes jc-pulse{ 50%{ opacity:.25 } }

.jc-mini{ font:inherit; font-family:var(--jc-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--jc-dim); border:1px solid var(--jc-line2); border-radius:7px;
  padding:4px 9px; cursor:pointer }
.jc-mini:hover{ color:var(--jc-ink); border-color:var(--jc-accent) }

/* medidor de contexto: una regla, no un adorno */
.jc-gauge{ height:3px; background:var(--jc-line); border-radius:99px; overflow:hidden; width:82px; margin-top:3px }
.jc-gauge>i{ display:block; height:100%; background:var(--jc-accent) }
.jc-gauge.hot>i{ background:var(--jc-warn) }

/* ── transcripción ───────────────────────────────────────────────────────── */
.jc-stage{ flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 14px 8px; scroll-behavior:smooth }
.jc-msg{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; padding:12px 0;
         border-top:1px solid var(--jc-line) }
.jc-msg:first-child{ border-top:0 }
.jc-rail{ font-family:var(--jc-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
          color:var(--jc-mute); text-align:right; padding-top:3px }
.jc-msg.you .jc-rail{ color:var(--jc-dim) }
.jc-msg.pass .jc-rail{ color:var(--jc-accent) }
.jc-msg.err .jc-rail{ color:var(--jc-stop) }
.jc-body{ min-width:0 }
.jc-txt{ font-size:14.5px; line-height:1.62; word-wrap:break-word; overflow-wrap:anywhere }
.jc-msg.you .jc-txt{ color:var(--jc-dim) }
.jc-txt p{ margin:0 0 9px } .jc-txt p:last-child{ margin-bottom:0 }
.jc-txt ul,.jc-txt ol{ margin:0 0 9px; padding-left:20px }
.jc-txt li{ margin:2px 0 }
.jc-txt .jc-h{ margin:2px 0 6px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--jc-dim) }
.jc-txt code{ font-family:var(--jc-mono); font-size:12.5px; background:var(--jc-panel2);
              border:1px solid var(--jc-line); border-radius:5px; padding:1px 5px }
.jc-txt b{ color:#fff } .jc-txt i{ color:var(--jc-ink) }

/* bloque de código: su propio scroll horizontal, nunca el de la página */
.jc-code{ position:relative; margin:9px 0; border:1px solid var(--jc-line2); border-radius:9px;
          background:#070a0f; overflow:hidden }
.jc-code pre{ margin:0; padding:11px 13px; overflow-x:auto; max-width:100% }
.jc-code code{ font-family:var(--jc-mono); font-size:12.5px; line-height:1.55; background:none; border:0;
               padding:0; white-space:pre; color:#cfe3ff }
.jc-lang{ display:block; font-family:var(--jc-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
          color:var(--jc-mute); padding:5px 13px 0 }

/* la procedencia: de dónde salió la respuesta. Va en la respuesta, no escondida. */
.jc-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:9px;
          font-family:var(--jc-mono); font-size:10.5px }
.jc-pill{ border:1px solid var(--jc-line2); border-radius:6px; padding:2px 7px; color:var(--jc-dim);
          white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis }
.jc-pill.src{ border-color:color-mix(in srgb,var(--jc-accent) 45%,var(--jc-line2)); color:var(--jc-accent) }
.jc-pill.src b{ color:var(--jc-accent); font-weight:700 }
.jc-copy{ font:inherit; background:transparent; border:1px solid var(--jc-line2); border-radius:6px;
          color:var(--jc-mute); padding:2px 8px; cursor:pointer }
.jc-copy:hover{ color:var(--jc-ink); border-color:var(--jc-accent) }

.jc-cut{ display:flex; align-items:center; gap:10px; margin:6px 0 2px;
  font-family:var(--jc-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--jc-warn) }
.jc-cut::after{ content:''; flex:1; height:1px; background:repeating-linear-gradient(90deg,
  color-mix(in srgb,var(--jc-warn) 55%,transparent) 0 6px,transparent 6px 12px) }

.jc-err{ border:1px solid color-mix(in srgb,var(--jc-stop) 45%,transparent); border-radius:9px;
         background:color-mix(in srgb,var(--jc-stop) 8%,transparent); padding:10px 12px }
.jc-err b{ color:var(--jc-stop); font-size:12.5px }
.jc-err pre{ margin:8px 0 0; padding:9px 10px; background:#070a0f; border:1px solid var(--jc-line);
  border-radius:7px; font-family:var(--jc-mono); font-size:11.5px; color:var(--jc-dim);
  white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto }

.jc-think{ font-family:var(--jc-mono); font-size:12px; color:var(--jc-dim) }
.jc-think::after{ content:'▍'; color:var(--jc-accent); animation:jc-blink 1s steps(2,end) infinite }
@keyframes jc-blink{ 50%{ opacity:0 } }

/* ── estado vacío: tiene que explicarse en dos segundos ──────────────────── */
.jc-boot{ padding:22px 6px 8px; max-width:640px }
.jc-boot h2{ font-family:var(--jc-mono); font-size:15px; letter-spacing:.06em; margin:0 0 10px; color:var(--jc-ink) }
.jc-boot .ln{ font-family:var(--jc-mono); font-size:12px; color:var(--jc-dim); line-height:1.85 }
.jc-boot .ln i{ color:var(--jc-accent); font-style:normal }
.jc-seeds{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px }
.jc-seed{ font:inherit; font-size:12.5px; text-align:left; background:var(--jc-panel); color:var(--jc-dim);
  border:1px solid var(--jc-line2); border-radius:9px; padding:7px 11px; cursor:pointer; max-width:100% }
.jc-seed:hover{ color:var(--jc-ink); border-color:var(--jc-accent) }

/* ── compositor ──────────────────────────────────────────────────────────── */
.jc-dock{ border-top:1px solid var(--jc-line2); background:var(--jc-panel); padding:10px 12px 11px }
.jc-in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:end;
  background:var(--jc-panel2); border:1px solid var(--jc-line2); border-radius:11px; padding:8px 9px 8px 11px;
  transition:border-color .12s,box-shadow .12s }
.jc-in:focus-within{ border-color:var(--jc-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--jc-accent) 16%,transparent) }
.jc-in textarea{
  width:100%; resize:none; border:0; outline:0; background:transparent; color:var(--jc-ink);
  font:14.5px/1.55 ui-sans-serif,system-ui,-apple-system,sans-serif; padding:3px 0; max-height:190px; overflow-y:auto }
.jc-in textarea::placeholder{ color:var(--jc-mute) }
.jc-send{ font:inherit; font-family:var(--jc-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--jc-accent); color:#160a02; border:0; border-radius:8px; padding:9px 14px;
  font-weight:700; cursor:pointer; white-space:nowrap }
.jc-send:disabled{ opacity:.4; cursor:not-allowed }
.jc-hint{ display:flex; flex-wrap:wrap; gap:5px 12px; align-items:center; margin-top:7px;
  font-family:var(--jc-mono); font-size:10px; letter-spacing:.06em; color:var(--jc-mute) }
.jc-hint kbd{ font-family:var(--jc-mono); font-size:9.5px; border:1px solid var(--jc-line2); border-radius:4px;
  padding:1px 4px; color:var(--jc-dim) }
.jc-hint .bad{ color:var(--jc-stop); text-transform:none; letter-spacing:0; font-size:11px }

/* ── móvil: 375 px sin scroll horizontal ─────────────────────────────────── */
@media (max-width:560px){
  .jos-chat{ border-radius:10px }
  .jc-msg{ grid-template-columns:minmax(0,1fr); gap:4px }
  .jc-rail{ text-align:left; padding-top:0 }
  /* La barra no puede comerse un tercio de la pantalla: se pliega a dos filas
     cortas y la URL del broker se guarda (vuelve entera si el Pass se cae). */
  .jc-cell{ padding:5px 9px; gap:1px }
  .jc-cell.sm-no{ display:none }
  .jc-cell.acts{ flex:1; justify-content:flex-end; border-right:0 }
  .jc-k{ font-size:8.5px; letter-spacing:.12em }
  .jc-v,.jc-mark{ font-size:11px }
  .jc-mark{ letter-spacing:.14em }
  .jc-gauge{ width:54px }
  .jc-mini{ padding:3px 7px; font-size:10px }
  .jc-stage{ padding:12px 11px 6px }
  .jc-txt{ font-size:14px }
  .jc-send{ padding:9px 11px }
  .jc-boot{ padding-top:14px }
}