/* Asistente con IA de los ejemplos de Gato Studio.
   Cada negocio pone sus colores en el elemento .asis con estas variables:
   --as-marca (botón y burbujas propias), --as-sobre-marca (texto encima de la marca),
   --as-fondo, --as-tinta, --as-suave, --as-linea, --as-radio. La letra la hereda de la página. */
.asis{--as-marca:#24121f;--as-sobre-marca:#fff;--as-fondo:#fff;--as-tinta:#1f1d24;--as-suave:#f3f1ee;--as-linea:#e4e0da;--as-gris:#6b6670;--as-radio:16px;
  position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));font:inherit;color:var(--as-tinta)}
.asis *{box-sizing:border-box}
.asis[hidden]{display:none}
.asis.izq{right:auto;left:max(16px,env(safe-area-inset-left))}
.asis.arriba{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 72px)}

/* Botón que abre */
.asis-abrir{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 20px 0 8px;border:0;border-radius:999px;background:var(--as-marca);color:var(--as-sobre-marca);
  font:inherit;font-weight:600;font-size:15.5px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.asis-abrir:hover{filter:brightness(1.06)}
.asis-abrir:focus-visible,.asis button:focus-visible,.asis a:focus-visible,.asis textarea:focus-visible{outline:3px solid var(--as-marca);outline-offset:3px}
.asis-abrir .asis-cara{width:40px;height:40px}
.asis-abrir small{display:block;font-size:12px;font-weight:500;opacity:.8;line-height:1.2}
.asis-abrir b{display:block;line-height:1.2;font-weight:700}
.asis-abrir .asis-txt{text-align:left}
.asis.abierto .asis-abrir{display:none}

/* Cara del asistente: círculo con destellos de la marca */
.asis-cara{flex:none;border-radius:50%;background:var(--as-sobre-marca);color:var(--as-marca);display:grid;place-items:center;position:relative}
.asis-cara svg{width:56%;height:56%}
.asis-cara .punto{position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#2fb36b;border:2px solid var(--as-marca)}

/* Ventana */
.asis-ventana{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:min(400px,calc(100vw - 32px));height:min(640px,calc(100vh - 32px));
  background:var(--as-fondo);border:1px solid var(--as-linea);border-radius:calc(var(--as-radio) + 4px);box-shadow:0 24px 64px rgba(0,0,0,.28);
  display:flex;flex-direction:column;overflow:hidden}
.asis.izq .asis-ventana{right:auto;left:max(16px,env(safe-area-inset-left))}
.asis-ventana[hidden]{display:none}
.asis-cab{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:var(--as-marca);color:var(--as-sobre-marca)}
.asis-cab .asis-cara{width:42px;height:42px}
.asis-cab .quien{flex:1;min-width:0;line-height:1.25}
.asis-cab .quien b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asis-cab .quien small{display:block;font-size:12.5px;opacity:.85}
.asis-cerrar{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.asis-cerrar:hover{background:rgba(255,255,255,.24)}
.asis-demo{margin:0;padding:9px 16px;font-size:12.5px;line-height:1.4;background:var(--as-suave);color:var(--as-gris);border-bottom:1px solid var(--as-linea)}
.asis-demo b{color:var(--as-tinta);font-weight:600}

/* Conversación */
.asis-chat{flex:1;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;overscroll-behavior:contain}
.asis-msg{max-width:86%;padding:10px 13px;border-radius:var(--as-radio);font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.asis-msg.bot{align-self:flex-start;background:var(--as-suave);border-bottom-left-radius:5px}
.asis-msg.yo{align-self:flex-end;background:var(--as-marca);color:var(--as-sobre-marca);border-bottom-right-radius:5px}
.asis-msg.bot b{font-weight:700}
.asis-acciones{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;max-width:92%}
.asis-acciones a,.asis-acciones button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--as-marca);background:var(--as-fondo);
  color:var(--as-marca);font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.asis-acciones a:hover,.asis-acciones button:hover{background:var(--as-marca);color:var(--as-sobre-marca)}
.asis-tarjetas{align-self:stretch;display:grid;gap:8px}
.asis-tarjeta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 12px;border:1px solid var(--as-linea);border-radius:calc(var(--as-radio) - 4px);background:var(--as-fondo)}
.asis-tarjeta b{font-size:14.5px;font-weight:700}
.asis-tarjeta small{grid-column:1;font-size:13px;color:var(--as-gris);line-height:1.35}
.asis-tarjeta .precio{grid-column:2;grid-row:1;font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.asis-tarjeta button{grid-column:2;grid-row:2;min-height:32px;padding:0 12px;border-radius:999px;border:0;background:var(--as-marca);color:var(--as-sobre-marca);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.asis-tarjeta button[disabled]{opacity:.6;cursor:default}
.asis-escribiendo{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--as-suave);border-radius:var(--as-radio);border-bottom-left-radius:5px}
.asis-escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--as-gris);opacity:.5;animation:asis-p 1.1s infinite}
.asis-escribiendo i:nth-child(2){animation-delay:.18s}.asis-escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes asis-p{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.asis-escribiendo i{animation:none}.asis-chat{scroll-behavior:auto}}

/* Sugerencias y caja de texto */
.asis-sugerencias{display:flex;gap:6px;overflow-x:auto;padding:4px 14px 10px;scrollbar-width:none}
.asis-sugerencias::-webkit-scrollbar{display:none}
.asis-sugerencias button{flex:none;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--as-linea);background:var(--as-fondo);color:var(--as-tinta);font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.asis-sugerencias button:hover{border-color:var(--as-marca)}
.asis-forma{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 12px;border-top:1px solid var(--as-linea);background:var(--as-fondo)}
.asis-forma textarea{flex:1;min-height:44px;max-height:120px;resize:none;padding:11px 14px;border:1px solid var(--as-linea);border-radius:22px;background:var(--as-fondo);color:var(--as-tinta);font:inherit;font-size:16px;line-height:1.35}
.asis-forma button{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--as-marca);color:var(--as-sobre-marca);cursor:pointer;display:grid;place-items:center}
.asis-forma button svg{width:20px;height:20px}
.asis-forma button[disabled]{opacity:.5;cursor:default}
.asis-pie{margin:0;padding:0 14px 10px;font-size:11.5px;color:var(--as-gris);text-align:center;background:var(--as-fondo)}

/* Celular: la ventana ocupa casi toda la pantalla y el botón es más compacto */
@media (max-width:560px){
  .asis-abrir{min-height:50px;padding:0 16px 0 6px;font-size:14.5px}
  .asis-abrir .asis-cara{width:38px;height:38px}
  .asis-abrir small{display:none}
  .asis-ventana,.asis.izq .asis-ventana{left:0;right:0;bottom:0;width:100%;height:min(92vh,100%);border-radius:20px 20px 0 0;border-bottom:0}
}