/* ---------- the buttons at the side (WhatsApp above, chat below) and the chat window ---------- */
.chat-dock { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.chat-fab { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); transition: transform .18s, box-shadow .18s; text-decoration: none; }
.chat-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); }
.chat-fab svg { width: 28px; height: 28px; }
.chat-wa { background: #25d366; }
.chat-open { background: #000; }
.chat-open[aria-expanded="true"] { background: var(--pink); }
.chat-fab:focus-visible, .chat-x:focus-visible, .chat-quick button:focus-visible, .chat-form button:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.chat-panel { position: fixed; right: 18px; bottom: 150px; z-index: 125; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 180px)); display: flex; flex-direction: column; background: #fff; color: #111; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #000; color: #fff; }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; font: 600 17px var(--display); }
.chat-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.chat-title b { font-size: 15px; }
.chat-title small { font-size: 12px; color: #ccc; display: flex; align-items: center; gap: 6px; }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; display: inline-block; }
.chat-x { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; border-radius: 50%; }
.chat-x:hover { background: rgba(255, 255, 255, .15); }
.chat-x svg { width: 20px; height: 20px; }

.chat-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; background: #faf6f8; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.chat-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #f0e2e8; border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: #000; color: #fff; border-bottom-right-radius: 4px; }
.chat-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; white-space: normal; }
.chat-links a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #000; color: #000; font-size: 13px; font-weight: 600; text-decoration: none; }
.chat-links a:hover { background: #000; color: #fff; }
.chat-links a.wa { background: #25d366; border-color: #25d366; color: #fff; }
.chat-prods { align-self: stretch; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.chat-prod { display: block; background: #fff; border: 1px solid #f0e2e8; border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; }
.chat-prod img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #f2dbe4; }
.chat-prod span { display: block; padding: 8px 10px 0; font-size: 13px; line-height: 1.3; }
.chat-prod b { display: block; padding: 2px 10px 10px; font-size: 13px; }
.chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid #f0e2e8; border-radius: 16px; border-bottom-left-radius: 4px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: #bbb; animation: chat-bounce 1s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }

.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 10px; background: #faf6f8; }
.chat-quick:empty { display: none; }
.chat-quick button { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #d9b8c6; color: #111; font: inherit; font-size: 13px; cursor: pointer; }
.chat-quick button:hover { background: var(--blush); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee; background: #fff; }
.chat-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid #ddd; border-radius: 999px; font: inherit; font-size: 15px; outline: 0; }
.chat-form input:focus { border-color: #000; }
.chat-form button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #000; color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-form button:hover { background: var(--pink); }
.chat-form button svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
    .chat-dock { right: 12px; bottom: 12px; gap: 10px; }
    .chat-fab { width: 52px; height: 52px; }
    .chat-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(78vh, 620px); }
    body.chat-on .chat-dock { display: none; }
}
@media (prefers-reduced-motion: reduce) { .chat-fab, .chat-typing i { transition: none; animation: none; } }