/* ============================================================
   AG-ATA · custom.css  (FUSIÓN v2.7 — azul 221)
   Conserva lo productivo (Inter, watermark link oculto, starters,
   composer, dark). Footer se cambia por TRADUCCIÓN (en-US.json),
   no por CSS. Sin reglas step-card (daban recuadro).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --agata-mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --loading-cursor-color: hsl(var(--primary));
}
@keyframes agata-spin{ to{ transform: rotate(360deg); } }

/* Ocultar link "Built with Chainlit" + botón readme */
a[href*="chainlit"][target="_blank"],
a[href*="github.com/Chainlit"],
#readme-button { display:none !important; }

/* Tipografía global Inter */
body, html, #root {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  letter-spacing:-0.01em;
}

/* Header */
header {
  padding:12px 24px !important;
  border-bottom:1px solid hsl(var(--border));
}

/* Starters (sugerencias) */
button[class*="starter"]{
  border-radius:12px !important;
  padding:14px 18px !important;
  font-weight:500 !important;
  border:1px solid hsl(var(--primary) / .2) !important;
  background:hsl(var(--card)) !important;
  transition:all .15s ease-in-out !important;
  text-align:left !important;
}
button[class*="starter"]:hover{
  border-color:hsl(var(--primary)) !important;
  background:hsl(var(--primary) / .07) !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px hsl(var(--primary) / .12);
}

/* line-height de mensajes */
[class*="message"]{ line-height:1.6; }

/* Composer (caja del input — intencional) */
[class*="MessageComposer"], [class*="messageComposer"]{
  border-radius:12px !important;
  border:1px solid hsl(var(--primary) / .2) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

/* ---- Enviar OUTLINE azul 221 ---- */
#chat-submit, button[type="submit"]{
  background:transparent !important;
  border:1px solid hsl(var(--primary)) !important;
  color:hsl(var(--primary)) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
#chat-submit:hover, button[type="submit"]:hover{ background:hsl(var(--primary) / .12) !important; }
#chat-submit svg, #chat-submit svg *, button[type="submit"] svg, button[type="submit"] svg *{
  color:hsl(var(--primary)) !important; fill:currentColor !important;
}
#chat-input{ border-radius:12px; }
#chat-input:focus-within{ border-color:hsl(var(--ring)); }

/* ---- tcodes / código inline en monoespaciada ---- */
.message-content code, [class*="message"] code, code:not(pre code){
  font-family:var(--agata-mono);
  color:hsl(var(--primary));
  background:hsl(var(--primary) / .11);
  border:1px solid hsl(var(--primary) / .22);
  border-radius:5px; padding:1px 6px; font-size:.86em;
}

/* ---- "Pensando": marca AG-ATA girando + texto (solo standalone) ---- */
.loading-cursor:not(.ml-2){
  width:auto !important; height:auto !important;
  background:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  animation:none !important; border-radius:0 !important;
  display:inline-flex !important; align-items:center; gap:.7rem;
  color:hsl(var(--muted-foreground)); font-size:1.05rem; font-style:normal;
}
.loading-cursor:not(.ml-2)::before{
  content:""; width:2.8rem; height:2.8rem; flex:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke%3D%27%233973EF%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2740%27%20stroke-width%3D%273.5%27%20stroke-dasharray%3D%27226%2025%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M50%2050%20C%2052%2043%2050%2037%2056%2033%20C%2060%2030%2064%2031%2067%2034%27%20stroke-width%3D%274%27%2F%3E%3Cpath%20d%3D%27M50%2050%20C%2052%2043%2050%2037%2056%2033%20C%2060%2030%2064%2031%2067%2034%27%20stroke-width%3D%274%27%20transform%3D%27rotate%28120%2050%2050%29%27%2F%3E%3Cpath%20d%3D%27M50%2050%20C%2052%2043%2050%2037%2056%2033%20C%2060%2030%2064%2031%2067%2034%27%20stroke-width%3D%274%27%20transform%3D%27rotate%28240%2050%2050%29%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%273%27%20fill%3D%27%233973EF%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  animation:agata-spin 2.2s linear infinite;
}
.loading-cursor:not(.ml-2)::after{ content:"Pensando\2026"; }

/* ---- Dark: starters ---- */
.dark button[class*="starter"]{
  background:hsl(var(--card)) !important;
  border-color:hsl(var(--primary) / .25) !important;
  color:hsl(var(--foreground)) !important;
}
.dark button[class*="starter"]:hover{
  background:hsl(var(--primary) / .1) !important;
  border-color:hsl(var(--primary)) !important;
}