/* ════════════════════════════════════════════════════════════════
   Asistente del Albacete Balompié — chat efímero, una columna centrada.
   Cabecera: escudo + "Powered by Fluentia". Fondo: imagen del campo.
   ════════════════════════════════════════════════════════════════ */
:root{
  --green:#1c7c43;
  --green-700:#155f35;
  --crimson:#9b2433;
  --ink:#16171d;
  --bg:#f3f4f3;
  --panel:#eef0ee;
  --line:#e2e7e2;
  --muted:#5f6b62;
  --user:#1c7c43;
  --shadow:0 18px 40px -22px rgba(20,40,25,.45);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);overflow:hidden;
  font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}

.page{
  max-width:1180px;margin:0 auto;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
  padding:18px max(16px,3vw) 12px;
}

/* ── Cabecera ──────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:6px}
.brand-crest{height:54px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12))}
.topbar__sep{width:1px;height:38px;background:var(--line)}
.powered{display:flex;flex-direction:column;gap:3px;line-height:1}
.powered small{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.02em}
.fluentia-link{display:block;line-height:0;transition:opacity .15s ease}
.fluentia-link:hover{opacity:.8}
.fluentia-logo{height:30px;width:auto;display:block}
.subtitle{
  margin:2px 0 8px;text-align:center;font-size:15px;font-weight:600;color:var(--ink);
}

/* ── Chat (fondo del campo) ────────────────────────────────────── */
.chat{
  flex:1;min-height:0;overflow-y:auto;border-radius:18px;border:1px solid var(--line);
  padding:26px max(18px,5%) 22px;display:flex;flex-direction:column;gap:16px;
  scroll-behavior:smooth;
  /* Imagen del campo (la elige el JS al azar), lavada en blanco para legibilidad. */
  background-color:#f4f5f4;
  background-image:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    var(--chat-bg, none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

.row{display:flex;gap:11px;max-width:820px;width:100%;margin:0 auto;align-items:flex-end}
.row.user{flex-direction:row-reverse}
.avatar{
  flex:none;width:36px;height:36px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px -4px rgba(0,0,0,.18);
}
.avatar .crest-img{width:auto;height:22px}

.bubble{
  padding:13px 16px;border-radius:16px;font-size:14.5px;line-height:1.55;
  max-width:min(660px,84%);animation:rise .3s var(--ease) both;
}
.row.bot .bubble{
  background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;box-shadow:var(--shadow);
  text-align:justify;text-justify:inter-word;hyphens:auto;
}
.row.user .bubble{background:var(--user);color:#fff;border-bottom-right-radius:6px}
.bubble p{margin:0 0 8px}.bubble p:last-child{margin:0}
.bubble strong{font-weight:700}
.bubble ul{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.bubble.error{border-color:#e6b5ba;background:#fdf3f4;color:var(--crimson)}

/* Indicador "escribiendo" */
.typing{display:flex;gap:5px;padding:6px 2px}
.typing span{width:7px;height:7px;border-radius:50%;background:#b8c2ba;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}

/* ── Sugerencias ───────────────────────────────────────────────── */
.suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:2px 0}
.suggest__chip{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 15px;font-size:13.5px;color:var(--ink);cursor:pointer;
  transition:transform .12s var(--ease),border-color .15s ease,box-shadow .2s ease;
}
.suggest__chip:hover{transform:translateY(-2px);border-color:#cfe0d4;box-shadow:var(--shadow)}
.suggest__chip:active{transform:translateY(0) scale(.99)}

/* ── Entrada ───────────────────────────────────────────────────── */
.composer{display:flex;align-items:center;gap:10px;padding:6px 0 0}
#input{
  flex:1;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:15px 22px;font-size:15px;color:var(--ink);outline:none;
  transition:border-color .15s ease,box-shadow .2s ease;
}
#input::placeholder{color:#90998f}
#input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(28,124,67,.1)}
.send{
  flex:none;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -10px rgba(28,124,67,.8);
  transition:transform .14s var(--ease),background .2s ease;
}
.send:hover{background:var(--green-700)}.send:active{transform:scale(.92)}
.send:disabled{background:#b9c6bd;box-shadow:none;cursor:not-allowed}
.send .bat{width:30px;height:auto;display:block}

.disclaimer{text-align:center;font-size:11.5px;color:var(--muted);margin:4px 0 0}

/* ── Animaciones ───────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:640px){
  .brand-crest{height:44px}.fluentia{font-size:20px}
  .suggest__chip{font-size:12.5px;padding:8px 12px}
}