:root{
  --aira-brand:#0ea5e9;
  --aira-brand-soft:rgba(14,165,233,.12);
  --aira-launcher:#0ea5e9; /* esfera */
  --aira-header:#0ea5e9;   /* cabecera del panel */
}

/* ===== Reset local para evitar barras horizontales ===== */
#aira-panel, #aira-panel * , #aira-panel *::before, #aira-panel *::after{
  box-sizing:border-box;
}

/* ---------- FAB (launcher) ---------- */
#aira-launcher{
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
  background:var(--aira-launcher); color:#fff; width:56px; height:56px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.2); cursor:pointer; z-index:99998;
  transition:transform .15s,box-shadow .15s, background-color .15s;
}
#aira-launcher:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.25); }
#aira-launcher svg{ fill:#fff; }
/* Pulso opcional (data-pulse="1") */
@keyframes aira-pulse-ring{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
@keyframes aira-pulse-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--aira-launcher),#000 85%)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 16px transparent}}
#aira-launcher[data-pulse="1"]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--aira-launcher);filter:blur(3px);opacity:.28;animation:aira-pulse-glow 2.2s ease-out infinite}
#aira-launcher[data-pulse="1"]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:2px solid var(--aira-launcher);animation:aira-pulse-ring 2.2s ease-out infinite}
.aira-open #aira-launcher[data-pulse="1"]::before,
.aira-open #aira-launcher[data-pulse="1"]::after{display:none}

/* ---------- Backdrop + Panel ---------- */
#aira-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.36);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:99997; opacity:0; transition:opacity .18s; pointer-events:none;
}
#aira-backdrop.is-visible{ opacity:1; pointer-events:auto; }

#aira-panel{
  position:fixed; right:18px; bottom:calc(84px + env(safe-area-inset-bottom));
  width:380px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:16px; box-shadow:0 22px 60px rgba(0,0,0,.28);
  overflow:hidden; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  z-index:99999; display:flex; flex-direction:column; max-height:min(86vh, 700px);
  opacity:0; transform:translateY(8px) scale(.98); transition:opacity .18s, transform .18s;
}
#aira-panel[hidden]{ display:none; }
#aira-panel.is-open{ opacity:1; transform:translateY(0) scale(1); }

.aira-header{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--aira-header); color:#fff; padding:10px 12px;
}
.aira-title-wrap{ display:flex; align-items:center; gap:10px; min-width:0; }
.aira-avatar{ width:26px; height:26px; border-radius:999px; object-fit:cover; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.35) inset; }
.aira-title{ font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aira-close{ background:transparent; border:none; color:#fff; font-size:22px; cursor:pointer; line-height:1; border-radius:8px; padding:2px 6px; }

/* ---------- Cuerpo ---------- */
.aira-body{
  display:flex; flex-direction:column; gap:10px;
  padding:10px 10px 0; flex:1; min-height:0;
  overflow:hidden;               /* evita scroll horizontal global */
}

/* ORDEN: sugerencias ARRIBA, mensajes DEBAJO, acciones al final */
.aira-suggest{ order:0; }
.aira-messages{ order:1; }
.aira-actions{ order:2; }

/* ---------- Sugerencias (una por línea) ---------- */
.aira-suggest{
  padding:0 4px 4px;
  max-height:clamp(120px, 36vh, 280px);
  overflow-y:auto; overflow-x:hidden;
}
.aira-suggest-title{
  font-size:12px; color:#555; margin:0 8px 6px;
  position:sticky; top:0; background:#fff; z-index:1; padding-top:4px;
}
.aira-suggest-list{ display:block; }
.aira-chip{
  display:block; width:100%;
  background:#f1f5f9; border:none; cursor:pointer;
  border-radius:12px; padding:10px 12px; margin:8px 6px 0 6px;
  font-size:14px; text-align:left; white-space:normal;
}
.aira-chip:hover{ background:#e9eef5; }

/* ---------- Mensajes ---------- */
.aira-messages{
  flex:1 1 auto; min-height:160px;
  overflow-y:auto; overflow-x:hidden;     /* fuera barra horizontal */
  display:flex; flex-direction:column; gap:8px; padding-right:6px;

  /* Reservas para que lo último NUNCA quede tapado
     (altura aprox. de acciones + input) */
  padding-bottom:80px;
}
.aira-msg{ display:flex; gap:8px; align-items:flex-start; }
.aira-bubble{
  padding:9px 11px; border-radius:12px; max-width:85%;
  font-size:14px; line-height:1.5; box-shadow:0 1px 0 rgba(0,0,0,.04);
  overflow-wrap:anywhere;                  /* corta textos largos */
}
.aira-user .aira-bubble{ background:var(--aira-brand-soft); margin-left:auto; border-bottom-right-radius:4px; }
.aira-bot  .aira-bubble{ background:#f7f7f8; border-bottom-left-radius:4px; }

/* ---------- Acciones (fijo encima del input) ---------- */
.aira-actions{
  position:sticky; bottom:8px;
  z-index:2;
  background:linear-gradient(180deg, rgba(14,165,233,.08), #fff);
  border:1px solid #eef2f7; border-radius:14px;
  padding:10px; margin:0;

  /* NUEVO: fila con 2 botones principales a extremos */
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.aira-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;                  /* más compacto */
  border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; color:#0f172a;
  font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
  min-width:auto;
}
.aira-btn--primary{
  background:var(--aira-brand); color:#fff; border-color:transparent;
}
/* Botón secundario a la DERECHA */
.aira-more{ background:#f3f4f6; color:#111; border:1px solid #e5e7eb; margin-left:auto; }
.aira-btn__icon{ width:16px; height:16px; }

/* ---------- Panel de contacto ---------- */
.aira-acc-panel{ width:100%; margin:0; flex:1 1 100%; padding: 6px 0 0; }

/* En escritorio: todo en una línea; en móvil: scroll horizontal si no caben */
.aira-acc-inner{
  display:flex;
  flex-wrap:nowrap;          /* una línea */
  gap:6px;
  width:100%;
  overflow-x:auto;           /* permite desplazamiento si no caben */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.aira-acc-inner a{
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; color:#0f172a; text-decoration:none;
  font-size:12px; line-height:1.2;
  flex:0 0 auto;             /* tamaño natural, no se estiran */
}
.aira-acc-inner a:hover{ background:#f8fafc; border-color:#cbd5e1; }

/* ---------- Input ---------- */
.aira-input{
  position:sticky; bottom:0; background:#fff; z-index:3;
  display:flex; gap:8px; padding:10px; border-top:1px solid #eee;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.aira-text{
  flex:1; border:1px solid #e5e7eb; border-radius:16px;
  padding:10px 14px; font-size:14px; outline:none;
  max-height:140px; overflow-y:auto; resize:none; line-height:1.45; background:#fff;
}
.aira-text:focus{ border-color:var(--aira-brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--aira-brand), transparent 82%); }
.aira-send{ background:var(--aira-brand); border:none; color:#fff; border-radius:999px; padding:0 14px; display:flex; align-items:center; justify-content:center; min-width:44px; }
.aira-send svg{ fill:#fff; }

/* ---------- Responsive ---------- */
@media (max-width:640px){
  #aira-panel{
    right:0; left:0; bottom:0; width:auto; max-width:none;
    height:min(76dvh, 92vh); max-height:min(76dvh, 92vh);
    border-radius:16px 16px 0 0; transform:translateY(6px);
  }
  #aira-panel.is-open{ transform:translateY(0); }
  .aira-header{ padding:12px 14px; }
  .aira-title{ font-size:16px; }
  .aira-bubble{ max-width:92%; }

  /* En móvil, si no caben, ya tenemos overflow-x:auto arriba */
  .aira-acc-inner{ gap:6px; }
}

body.aira-open{ overflow:hidden; touch-action:none; }

/* ===== Acordeón de sugerencias ===== */
.aira-suggest-wrap{ margin:8px 4px 4px; }
.aira-suggest-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px;
  padding:8px 12px; font-size:13px; color:#334155; cursor:pointer;
}
.aira-suggest-toggle:hover{ background:#eef2f7; }
.aira-suggest-toggle .aira-caret{ transition:transform .18s; }
.aira-suggest-toggle[aria-expanded="true"] .aira-caret{ transform:rotate(180deg); }

/* el título embebido no se usa cuando hay acordeón */
.aira-suggest-title{ display:none; }

/* plegado/abierto */
.aira-suggest[hidden]{ display:none !important; }

/* cuando el acordeón está abierto, dejamos más altura total al panel */
#aira-panel.aira-suggest-open{ max-height:min(92vh, 820px); }

/* chips ya existentes a 1 por fila (como antes) */
.aira-suggest-list{ display:grid; grid-template-columns:1fr; gap:8px; }
.aira-chip{ width:100%; text-align:center; }

/* aseguramos que el contenedor de mensajes nunca muestre scroll horizontal */
.aira-messages{ overflow-x:hidden; }

/* ---- Píldoras de contacto con icono (para compatibilidad si usas .aira-contact) ---- */
.aira-contact{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; border:1px solid #e5e7eb; background:#fff;
  color:#111; padding:6px 10px; border-radius:999px; font-size:12px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.aira-contact:hover{
  transform:translateY(-1px);
  border-color:#d1d5db;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.aira-ico{
  width:14px; height:14px; display:inline-block;
  flex:0 0 14px; color:var(--aira-brand); fill:currentColor;
}