/* =========================================================
   aaHost · Asesor con IA  (sistema claro, suizo)
   ========================================================= */

/* Vista previa decorativa en la home */
.ai-preview{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.1rem;
  display:grid; gap:.6rem;
}
.ai-preview__bubble{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--r) var(--r) var(--r) 1px;
  padding:.7rem .9rem;
  font-size:var(--t-sm); color:var(--muted); line-height:1.55;
}
.ai-preview__bubble strong{ color:var(--brand-soft); font-weight:600; }
.ai-preview__bubble--user{
  background:var(--brand-wash);
  border-color:rgba(56,189,248,.3);
  border-radius:var(--r) var(--r) 1px var(--r);
  color:var(--text); justify-self:end; max-width:85%;
}
.ai-preview__typing{ display:flex; gap:4px; padding:.3rem .2rem; }
.ai-preview__typing span, .ai-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--brand); opacity:.35;
  animation:aiDot 1.3s infinite ease-in-out;
}
.ai-preview__typing span:nth-child(2), .ai-typing span:nth-child(2){ animation-delay:.18s }
.ai-preview__typing span:nth-child(3), .ai-typing span:nth-child(3){ animation-delay:.36s }
@keyframes aiDot{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }


/* Panel */
.ai-panel{
  position:fixed; z-index:70;
  right:clamp(.75rem,3vw,1.75rem); bottom:clamp(.75rem,3vw,1.75rem);
  width:min(400px, calc(100vw - 1.5rem));
  height:min(620px, calc(100dvh - 1.5rem));
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  box-shadow:0 24px 64px -20px rgba(0,0,0,.75);
  overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
body.ai-open .ai-panel{ opacity:1; visibility:visible; transform:none; }

.ai-head{
  display:flex; align-items:center; gap:.7rem;
  padding:.95rem 1.05rem;
  border-bottom:1px solid var(--line);
  background:var(--bg-elev);
  flex:none;
}
.ai-avatar{
  width:32px; height:32px; border-radius:var(--r-xs); flex:none;
  display:grid; place-items:center;
  background:var(--brand); color:var(--brand-ink); font-size:.85rem;
}
.ai-head__t{ font-family:var(--f-display); font-weight:700; font-size:.875rem; letter-spacing:-.02em; display:flex; align-items:center; gap:.4rem; }
.ai-head__s{ font-size:var(--t-xs); color:var(--faint); }
.ai-x{
  margin-left:auto; width:32px; height:32px; flex:none;
  border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--bg);
  color:var(--muted); cursor:pointer; display:grid; place-items:center;
  transition:border-color .16s ease, color .16s ease;
}
.ai-x:hover{ border-color:var(--text); color:var(--text); }

.ai-body{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:1.25rem; display:flex; flex-direction:column; gap:1rem;
}

.ai-msg{
  max-width:88%;
  padding:.85rem 1rem;
  font-size:var(--t-sm); line-height:1.6;
  border-radius:var(--r) var(--r) var(--r) 1px;
  background:var(--bg-elev); border:1px solid var(--line);
  white-space:pre-wrap; word-wrap:break-word;
  animation:aiIn .22s ease;
}
.ai-msg--user{
  align-self:flex-end;
  border-radius:var(--r) var(--r) 1px var(--r);
  background:rgba(56,189,248,.17); border-color:rgba(56,189,248,.36);
}
@keyframes aiIn{ from{ opacity:0; transform:translateY(6px) } }

.ai-typing{ display:flex; gap:4px; align-self:flex-start; padding:.8rem .95rem; }

.ai-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.ai-chip{
  border:1px solid var(--line-strong); background:var(--bg-elev);
  color:var(--muted); font-size:var(--t-xs); font-weight:500;
  padding:.45rem .7rem; border-radius:var(--r-sm); cursor:pointer; text-align:left;
  font-family:var(--f-display);
  transition:border-color .16s ease, color .16s ease;
}
.ai-chip:hover{ border-color:var(--brand); color:var(--brand); }

/* Tarjeta de plan dentro del chat */
.ai-card{
  background:var(--bg-elev);
  border:1px solid var(--line-strong);
  border-top:3px solid var(--brand);
  background:var(--bg);
  border-radius:var(--r); padding:1rem;
  animation:aiIn .25s ease;
}
.ai-card__top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.ai-card__name{ font-family:var(--f-display); font-weight:700; font-size:var(--t-sm); letter-spacing:-.02em; }
.ai-card__price{ font-family:var(--f-display); font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; }
.ai-card__sub{ font-size:var(--t-xs); color:var(--faint); }
.ai-card ul{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.35rem; }
.ai-card li{ font-size:var(--t-xs); color:var(--muted); display:flex; gap:.45rem; }
.ai-card li::before{ content:""; width:.7em; height:.7em; margin-top:.35em; flex:none; background:var(--brand); -webkit-mask:var(--ico-check) center/contain no-repeat; mask:var(--ico-check) center/contain no-repeat; }
.ai-card .btn{ margin-top:.9rem; }

/* Diagnóstico */
.ai-diag{ border:1px solid var(--line); background:var(--bg-elev); border-radius:var(--r); padding:.95rem; animation:aiIn .25s; }
.ai-diag__t{ font-family:var(--f-display); font-weight:700; font-size:var(--t-xs); margin-bottom:.6rem; display:flex; align-items:center; gap:.45rem; letter-spacing:-.01em; }
.ai-diag__t .ico{ color:var(--brand); }
.ai-diag dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; font-size:var(--t-xs); }
.ai-diag dt{ color:var(--faint); }
.ai-diag dd{ margin:0; color:var(--text); text-align:right; font-family:var(--f-display); font-weight:600; font-variant-numeric:tabular-nums; }
.ai-diag dd.ok{ color:var(--ok); } .ai-diag dd.warn{ color:var(--warn); }

.ai-foot{ flex:none; border-top:1px solid var(--line); padding:.85rem; background:var(--bg-elev); }
.ai-form{ display:flex; gap:.45rem; align-items:flex-end; }
.ai-input{
  flex:1; resize:none; max-height:110px; min-height:42px;
  background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:.75rem .9rem; font-size:var(--t-sm); line-height:1.45;
}
.ai-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash); }
.ai-send{
  width:44px; height:44px; flex:none; border:0; border-radius:var(--r-sm); cursor:pointer;
  background:var(--brand); color:var(--brand-ink); font-size:.9rem;
  transition:background .16s ease, opacity .16s ease;
}
.ai-send:hover{ background:var(--brand-deep); }
.ai-send:disabled{ opacity:.4; cursor:not-allowed; }
.ai-legal{ margin-top:.5rem; font-size:.6875rem; color:var(--faint); text-align:center; line-height:1.4; }
.ai-legal a{ color:var(--brand); text-decoration:underline; }

@media (max-width:560px){
  .ai-panel{ right:.5rem; left:.5rem; bottom:.5rem; width:auto; height:min(86dvh, 620px); }
}