/* ==========================================================================
   Avodah — botones flotantes: WhatsApp + asistente virtual (prototipo)
   Capas: fab 105 · panel de chat 115 (encima de los paneles laterales 100, debajo de los avisos 120)
   ========================================================================== */
.fabs { position: fixed; right: 20px; bottom: 20px; z-index: 105; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; transition: opacity .25s, transform .25s var(--ease-out); }
body.cart-open .fabs, body.menu-open .fabs, body.msearch-open .fabs { opacity: 0; transform: translateY(12px); pointer-events: none; }

.fab {
	position: relative; display: flex; align-items: center; justify-content: flex-end; height: 58px; min-width: 58px; padding: 0; border: 0; border-radius: 999px;
	color: #fff; box-shadow: 0 12px 28px -8px rgba(23,34,26,.45); transition: transform .25s var(--ease-out), box-shadow .25s;
}
.fab:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(23,34,26,.5); }
.fab__ico { display: grid; place-items: center; width: 58px; height: 58px; flex: none; }
.fab__ico svg { width: 28px; height: 28px; }
.fab__label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 14.5px; font-weight: 700; opacity: 0; transition: max-width .35s var(--ease-out), opacity .25s, padding .35s; }
.fab:hover .fab__label, .fab:focus-visible .fab__label { max-width: 220px; opacity: 1; padding-left: 22px; }
.fab--wa { background: #25D366; }
.fab--wa::before { /* pulso suave para llamar la atención */
	content: ""; position: absolute; right: 0; top: 0; width: 58px; height: 58px; border-radius: 50%; background: #25D366; z-index: -1; animation: fab-pulse 2.6s var(--ease-out) infinite;
}
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.fab--bot { background: var(--olive-700); }
.fab--bot .fab__x { display: none; }
.fab--bot[aria-expanded="true"] .fab__bot { display: none; }
.fab--bot[aria-expanded="true"] .fab__x { display: block; }
.fab__badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--terracotta-ink); border: 2px solid #fff; font: 700 11px/16px var(--sans); text-align: center; }

/* Burbuja de bienvenida junto al bot */
.fab-teaser {
	position: absolute; right: 72px; bottom: 6px; width: 250px; padding: 14px 34px 14px 16px; border-radius: 16px 16px 4px 16px;
	background: #fff; color: var(--ink); font-size: 14px; line-height: 1.45; box-shadow: var(--shadow-pop);
	opacity: 0; transform: translateX(8px) scale(.96); transform-origin: right bottom; pointer-events: none; transition: opacity .3s, transform .35s var(--ease-out);
}
.fab-teaser.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab-teaser b { display: block; margin-bottom: 2px; }
.fab-teaser button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 14px; }
.fab-teaser button:hover { background: var(--field); }
.fab-bot-wrap { position: relative; }

/* Panel del chat */
.chat {
	position: fixed; right: 20px; bottom: 162px; z-index: 115; display: flex; flex-direction: column; width: 380px; height: min(560px, calc(100dvh - 190px)); /* encima de ambos botones flotantes */
	background: #fff; border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(23,34,26,.45); overflow: hidden;
	opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97); transform-origin: right bottom;
	transition: opacity .25s, transform .3s var(--ease-out), visibility 0s linear .3s;
}
.chat.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px; background: var(--olive-700); color: #fff; }
.chat__avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #F6EFE2; color: var(--olive-700); flex: none; }
.chat__avatar .bot-swap { width: 26px; height: 26px; }
.chat__avatar::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #5DD47A; border: 2px solid var(--olive-700); }
.chat__head b { display: block; font-size: 16px; }
.chat__head small { display: block; font-size: 12.5px; opacity: .85; }
.chat__close { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 20px; }
.chat__close:hover { background: rgba(255,255,255,.14); }
.chat__body { flex: 1; overflow-y: auto; padding: 18px 16px 8px; background: #FAF7F2 var(--paws); background-size: 140px; overscroll-behavior: contain; }
.msg { display: flex; gap: 8px; margin-bottom: 12px; animation: msg-in .3s var(--ease-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg__bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.5; box-shadow: 0 2px 6px rgba(23,34,26,.06); }
.msg__bubble a { color: var(--olive-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.msg--me { justify-content: flex-end; }
.msg--me .msg__bubble { border-radius: 16px 16px 4px 16px; background: var(--olive-700); color: #fff; }
.msg__time { display: block; margin-top: 4px; font-size: 11px; opacity: .6; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #B7B1A6; animation: typing 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; background: #FAF7F2; }
.chat__chips button { height: 34px; padding: 0 14px; border: 1.5px solid var(--olive-700); border-radius: 999px; background: #fff; color: var(--olive-700); font-size: 13px; font-weight: 600; transition: background .15s, color .15s; }
.chat__chips button:hover { background: var(--olive-700); color: #fff; }
.chat__form { display: flex; align-items: center; gap: 8px; padding: 12px 12px 14px; border-top: 1px solid var(--line); }
.chat__form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); font: 400 14.5px var(--sans); color: var(--ink); outline: none; }
.chat__form input:focus { border-color: var(--olive-700); background: #fff; }
.chat__form button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--olive-700); color: #fff; font-size: 18px; flex: none; }
.chat__form button:hover { background: var(--olive-800); }
.chat__foot { padding: 0 16px 12px; text-align: center; font-size: 11.5px; color: var(--muted); }

/* Los avisos se apartan de los botones flotantes */
.toasts { right: 96px; }

@media (max-width: 600px) {
	.fabs { right: 14px; bottom: 14px; gap: 10px; }
	.fab, .fab__ico { height: 52px; min-width: 52px; width: auto; }
	.fab__ico { width: 52px; }
	.fab--wa::before { width: 52px; height: 52px; }
	.fab-teaser { right: 62px; width: 210px; font-size: 13px; }
	.chat { inset: auto 0 0 0; width: auto; height: 78dvh; border-radius: 20px 20px 0 0; transform-origin: center bottom; }
	.toasts { right: 16px; bottom: 140px; }
	.chat__form input { font-size: 16px; } /* evita el zoom de iOS */
}
@media (hover: none) { .fab__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .fab--wa::before { animation: none; } }

/* Icono del asistente: alterna perrito robot y gatito robot ---------------- */
.bot-swap { position: relative; display: block; width: 30px; height: 30px; perspective: 120px; }
.bot-swap svg { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: transform .7s cubic-bezier(.5,1.6,.5,1), opacity .35s; }
.bot-swap__cat { transform: rotateY(180deg); opacity: 0; }
.bot-swap.is-cat .bot-swap__dog { transform: rotateY(-180deg); opacity: 0; }
.bot-swap.is-cat .bot-swap__cat { transform: none; opacity: 1; }
.fab--bot:hover .bot-swap svg { animation: bot-nod .6s ease-in-out; }
@keyframes bot-nod { 0%, 100% { rotate: 0deg; } 30% { rotate: -10deg; } 65% { rotate: 8deg; } }
.fab__ico .bot-swap { width: 34px; height: 34px; }
@media (max-width: 600px) { .fab__ico .bot-swap { width: 31px; height: 31px; } }
@media (prefers-reduced-motion: reduce) { .bot-swap svg { transition: none; } }