/* ==========================================================
   Asistente virtual: usa los tokens de styles.css (un solo acento,
   píldoras, tarjetas de 24px). Móvil primero.
   ========================================================== */
.chat-launcher {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 18px;
  border-radius: var(--r-btn); background: var(--ink); color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: var(--shadow-xl); transition: transform .3s var(--ease), background .2s;
}
.chat-launcher svg { width: 24px; height: 24px; }
.chat-launcher:hover { background: var(--charcoal); transform: translateY(-2px); }
.chat-launcher.is-open { background: var(--accent); }

.chat-nudge {
  position: fixed; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 59; max-width: min(280px, calc(100vw - 32px));
  display: flex; gap: 8px; align-items: flex-start; padding: 14px 8px 14px 18px; background: #fff; color: var(--charcoal);
  border: 1px solid var(--hairline); border-radius: 20px 20px 6px 20px; box-shadow: var(--shadow-xl); font-size: 14px; line-height: 1.4;
  animation: chatPop .5s var(--ease) both; cursor: pointer;
}
.chat-nudge[hidden] { display: none; }
.chat-nudge p { margin: 0; }
.chat-nudge b { color: var(--accent); }
.chat-nudge button { flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--graphite); }
.chat-nudge button:hover { background: var(--surface); }

.chat {
  position: fixed; z-index: 70; inset: 0; display: flex; flex-direction: column; background: var(--canvas);
  animation: chatPop .35s var(--ease) both; overscroll-behavior: contain;
}
.chat[hidden] { display: none; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 16px 14px 18px; background: var(--ink); color: #fff; }
.chat__avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; object-fit: contain; padding: 4px; }
.chat__who { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.chat__who b { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: normal; }
.chat__status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #B9CED8; }
.chat__status i { width: 7px; height: 7px; border-radius: 50%; background: #55D6A0; box-shadow: 0 0 0 3px rgba(85, 214, 160, .2); }
.chat__status em { font-style: normal; }
.chat__x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.chat__x:hover { background: rgba(255, 255, 255, .12); }
.chat__x svg { width: 20px; height: 20px; }

.chat__log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: auto; }
.msg { max-width: 88%; font-size: 15px; line-height: 1.5; letter-spacing: normal; animation: chatIn .35s var(--ease) both; }
.msg p { margin: 0; padding: 11px 16px; border-radius: 20px; }
.msg strong { font-weight: 700; color: var(--ink); }
.msg--bot { align-self: flex-start; }
.msg--bot p { background: #fff; color: var(--charcoal); border: 1px solid var(--hairline); border-bottom-left-radius: 6px; }
.msg--user { align-self: flex-end; }
.msg--user p { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.msg__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.act { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-btn); border: 1px solid var(--accent); color: var(--accent); font-size: 14px; font-weight: 600; background: #fff; transition: background .2s, color .2s; }
.act:hover { background: var(--accent); color: #fff; }
.act--wa { background: var(--accent); color: #fff; }
.act--wa:hover { background: #166683; }
.msg--typing p, .msg--typing .dots { display: inline-flex; gap: 5px; padding: 14px 16px; background: #fff; border: 1px solid var(--hairline); border-radius: 20px; border-bottom-left-radius: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ash); animation: chatDot 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }

.chat__chips { display: flex; gap: 8px; padding: 8px 16px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chat__chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 8px 16px; border-radius: var(--r-btn); background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s, border-color .2s; }
.chip:hover { background: #fff; border-color: var(--accent); color: var(--accent); }
.chip--ghost { background: transparent; color: var(--graphite); }

.chat__form { display: flex; gap: 8px; padding: 6px 16px 8px; flex: none; }
.chat__input { flex: 1; min-width: 0; height: 48px; padding: 0 20px; border-radius: var(--r-btn); border: 1px solid var(--hairline); background: #fff; font: inherit; font-size: 16px; /* 16px: iOS no hace zoom */ letter-spacing: normal; color: var(--ink); }
.chat__input::placeholder { color: var(--ash); }
.chat__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat__send { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; transition: background .2s; }
.chat__send:hover { background: #166683; }
.chat__send svg { width: 22px; height: 22px; }
.chat__foot { margin: 0; padding: 4px 20px calc(10px + env(safe-area-inset-bottom)); font-size: 11.5px; line-height: 1.35; color: var(--graphite); text-align: center; flex: none; }

@keyframes chatPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes chatDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Escritorio: ventana flotante en la esquina */
@media (min-width: 720px) {
  .chat { inset: auto 20px 86px auto; width: 400px; height: min(660px, calc(100dvh - 106px)); border-radius: var(--r-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-xl); overflow: hidden; }
  .chat__head { padding-top: 16px; }
  .chat-launcher { right: 20px; bottom: 20px; }
  .chat-nudge { right: 20px; bottom: 90px; }
  .chat:not([hidden]) ~ .chat-nudge { display: none; }
}
@media (max-width: 719px) {
  /* abierto a pantalla completa: el botón flotante y el aviso sobran */
  .chat:not([hidden]) ~ .chat-nudge, body:has(.chat:not([hidden])) .chat-launcher { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat, .msg, .chat-nudge { animation: none; }
  .dots i { animation: none; opacity: .6; }
  .chat-launcher { transition: none; }
}