/* The shop's AI chatbot (chatbot.js). Uses the theme's colours. */
.cbot { position: fixed; right: 16px; bottom: 16px; z-index: 1045; font-size: .95rem; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
.cbot > * { pointer-events: auto; }
body.has-basket-bar .cbot { bottom: 84px; }

/* The round button: pops in, lifts on hover, presses in on click; its icon turns into × while the chat is open. */
.cbot-fab {
    position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; padding: 0;
    background: var(--brand, #c0392b); color: #fff; border: 0; box-shadow: 0 8px 24px color-mix(in srgb, var(--brand, #c0392b) 40%, rgba(0, 0, 0, .25));
    transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, filter .2s ease;
}
.cbot.is-ready .cbot-fab { transform: scale(1); }
.cbot-fab:hover, .cbot-fab:focus-visible { background: var(--brand, #c0392b); color: #fff; filter: brightness(1.08); transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 30px color-mix(in srgb, var(--brand, #c0392b) 45%, rgba(0, 0, 0, .25)); }
.cbot-fab:active { transform: scale(.92); transition-duration: .1s; }
.cbot-fab:focus-visible { outline: 3px solid rgba(0, 0, 0, .35); outline-offset: 3px; }
.cbot-ico { position: absolute; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.cbot-ico-close { opacity: 0; transform: rotate(-90deg) scale(.4); }
.cbot.is-open .cbot-ico-open { opacity: 0; transform: rotate(90deg) scale(.4); }
.cbot.is-open .cbot-ico-close { opacity: 1; transform: none; }
/* The first time on a visit: a ring spreads out from the button twice. */
.cbot-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.cbot-fab.cbot-pulse-on .cbot-pulse { animation: cbotPulse 1.6s ease-out 2; }
@keyframes cbotPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand, #c0392b) 55%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }

/* The chat window: grows out of the button with a soft spring, shrinks back into it when closed. */
.cbot-panel {
    width: 370px; max-width: calc(100vw - 32px); height: min(600px, calc(100vh - 110px)); display: flex; flex-direction: column;
    border: 1px solid var(--line, #e7e7e7); border-radius: 20px; overflow: hidden; background: var(--surface, #fff);
    box-shadow: 0 24px 60px rgba(17, 20, 28, .22);
    transform-origin: bottom right; opacity: 0; transform: translateY(24px) scale(.82);
    transition: opacity .22s ease, transform .38s cubic-bezier(.34, 1.4, .64, 1);
}
.cbot.is-open .cbot-panel { opacity: 1; transform: none; }
.cbot.is-closing .cbot-panel { transition: opacity .2s ease, transform .24s cubic-bezier(.55, 0, .7, .2); }
.cbot.no-anim .cbot-panel, .cbot.no-anim .cbot-ico { transition: none; }
.cbot-panel[hidden] { display: none; }
/* Inside: the header slides in, then the messages and buttons appear one after another. */
.cbot.is-open .cbot-head { animation: cbotDown .35s ease-out both; }
@keyframes cbotDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cbot-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; background: var(--brand, #c0392b); color: #fff; }
.cbot-head-icon { font-size: 1.2rem; }
.cbot-titles { flex: 1; min-width: 0; line-height: 1.2; }
.cbot-titles small { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbot-icon { color: #fff; border: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.cbot-icon:hover, .cbot-icon:focus-visible { background: rgba(255, 255, 255, .18); color: #fff; }

.cbot-log { flex: 1; overflow-y: auto; padding: .9rem .8rem .4rem; display: flex; flex-direction: column; gap: .45rem; background: var(--tile, #fafafa); }
.cbot-msg { max-width: 85%; padding: .5rem .75rem; border-radius: 14px; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; }
.cbot-bot { align-self: flex-start; background: var(--surface, #fff); border: 1px solid var(--line, #e7e7e7); color: var(--ink, #222); border-bottom-left-radius: 4px; }
.cbot-you { align-self: flex-end; background: var(--tint, #fdecea); color: var(--ink, #222); border-bottom-right-radius: 4px; }
.cbot-typing { display: inline-flex; gap: 4px; padding: .7rem .8rem; }
.cbot-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #888); animation: cbot-dot 1s infinite ease-in-out; }
.cbot-typing span:nth-child(2) { animation-delay: .15s; }
.cbot-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cbot-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cbot-typing span { animation: none; } }
.cbot-msg.cbot-new { animation: cbotMsg .32s cubic-bezier(.34, 1.3, .64, 1) both; }
.cbot-bot.cbot-new { transform-origin: bottom left; }
.cbot-you.cbot-new { transform-origin: bottom right; }
@keyframes cbotMsg { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.cbot-chip { transition: background .15s, color .15s, transform .15s; }
.cbot-chips.anim .cbot-chip { animation: cbotChip .3s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.cbot-chip:hover:not(:disabled) { transform: translateY(-1px); }
.cbot-chip:active:not(:disabled) { transform: scale(.96); }
@keyframes cbotChip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cbot-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .55rem .8rem; max-height: 40%; overflow-y: auto; border-top: 1px solid var(--line, #e7e7e7); }
.cbot-chips:empty { display: none; }
.cbot-chip {
    display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--brand, #c0392b); color: var(--brand, #c0392b);
    background: var(--surface, #fff); border-radius: 999px; padding: .3rem .75rem; font-weight: 600; text-align: left;
}
.cbot-chip:hover, .cbot-chip:focus-visible { background: var(--tint, #fdecea); color: var(--brand, #c0392b); border-color: var(--brand, #c0392b); }
.cbot-chip-primary { background: var(--brand, #c0392b); color: #fff; }
.cbot-chip-primary:hover, .cbot-chip-primary:focus-visible { background: var(--brand, #c0392b); color: #fff; filter: brightness(1.08); }
.cbot-chip:disabled { opacity: .45; }

.cbot-form { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem .7rem; border-top: 1px solid var(--line, #e7e7e7); background: var(--surface, #fff); }
.cbot-form .form-control:disabled { background: var(--tile, #f4f4f4); }
.cbot-lock { color: var(--muted, #888); }
.cbot-send { background: var(--brand, #c0392b); color: #fff; border: 0; width: 36px; height: 34px; }
.cbot-send:disabled { background: var(--line, #ddd); color: var(--muted, #888); }
.cbot-form.is-open .form-control { border-color: var(--brand, #c0392b); }

@media (max-width: 575.98px) {
    /* Phones: the chat covers the screen and slides up from the bottom (and back down). */
    .cbot.is-open, .cbot.is-closing { right: 0; bottom: 0; left: 0; top: 0; gap: 0; }
    .cbot.is-open .cbot-fab, .cbot.is-closing .cbot-fab { display: none; }
    .cbot-panel { width: 100%; max-width: none; height: 100%; border-radius: 0; border: 0; transform-origin: bottom center; transform: translateY(100%); opacity: 1;
        transition: transform .36s cubic-bezier(.22, 1, .36, 1); }
    .cbot.is-closing .cbot-panel { transition: transform .26s cubic-bezier(.55, 0, .7, .2); }
    body.has-basket-bar .cbot.is-open, body.has-basket-bar .cbot.is-closing { bottom: 0; }
}

/* Less motion when the device asks for it: a short fade only. */
@media (prefers-reduced-motion: reduce) {
    .cbot-fab, .cbot-ico, .cbot-panel { transition: opacity .15s ease !important; }
    .cbot-fab, .cbot.is-ready .cbot-fab { transform: none !important; }
    .cbot-panel { transform: none !important; }
    .cbot-msg.cbot-new, .cbot-chips.anim .cbot-chip, .cbot.is-open .cbot-head, .cbot-fab.cbot-pulse-on .cbot-pulse { animation: none !important; }
}