/* Site assistant (resources/views/site/assistant.blade.php): a round chat button floating bottom right (bottom left in
   Arabic), the mirror of the search button, above the phone order bar. The panel opens above it. Tokens only. */
.cf-assistant { position: fixed; inset-inline-end: var(--s-gutter); bottom: calc(var(--s-tap) + var(--s-space-l) + env(safe-area-inset-bottom) + var(--cf-kb, 0px)); z-index: calc(var(--s-z-bar) + 1); }
.cf-assistant[hidden] { display: none; }
.cf-assistant__btn { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--s-tap) * 1.2); height: calc(var(--s-tap) * 1.2);
    border: 0; border-radius: 50%; background: var(--s-madder); color: var(--s-tissue); cursor: pointer; box-shadow: var(--s-photo-shadow); }
.cf-assistant__btn:hover { background: var(--s-ink); }
.cf-assistant__btn:focus-visible, .cf-assistant__close:focus-visible, .cf-assistant__chip:focus-visible { outline: var(--s-line-w) solid var(--s-ink); outline-offset: var(--s-space-3xs); }
.cf-assistant__btn .cf-icon { width: calc(var(--s-tap) * 0.55); height: calc(var(--s-tap) * 0.55); }

.cf-assistant__panel { position: absolute; inset-inline-end: 0; bottom: calc(100% + var(--s-space-2xs));
    display: flex; flex-direction: column; width: min(24rem, calc(100vw - 2 * var(--s-gutter)));
    max-height: min(34rem, calc(var(--cf-vv-h, 100svh) - var(--s-tap) * 3 - var(--s-space-l) * 2)); background: var(--s-page); box-shadow: var(--s-photo-shadow); }
.cf-assistant__panel[hidden] { display: none; }
.cf-assistant__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-space-xs);
    padding: var(--s-space-2xs) var(--s-space-xs); background: var(--s-madder); color: var(--s-tissue); }
.cf-assistant__title { margin: 0; font-size: var(--s-size-small); font-weight: var(--s-w-tag); }
.cf-assistant__close { display: inline-flex; align-items: center; justify-content: center; min-width: var(--s-tap); min-height: var(--s-tap);
    border: 0; background: none; color: inherit; cursor: pointer; }
.cf-assistant__close .cf-icon { width: calc(var(--s-tap) * 0.45); height: calc(var(--s-tap) * 0.45); }

.cf-assistant__log { flex: 1; min-height: 8rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-space-xs);
    display: flex; flex-direction: column; gap: var(--s-space-2xs); }
.cf-assistant__msg { margin: 0; max-width: 90%; padding: var(--s-space-2xs) var(--s-space-xs); line-height: 1.45; overflow-wrap: anywhere; }
.cf-assistant__msg--bot { align-self: flex-start; background: var(--s-tissue); color: var(--s-ink); }
.cf-assistant__msg--me { align-self: flex-end; background: var(--s-ink); color: var(--s-page); }
.cf-assistant__msg.is-waiting { color: var(--s-text-muted); }

.cf-assistant__chips { display: flex; flex-wrap: wrap; gap: var(--s-space-3xs); }
.cf-assistant__chip { min-height: var(--s-tap); padding: 0 var(--s-space-xs); border: var(--s-line-w) solid var(--s-madder); border-radius: var(--s-tap);
    background: var(--s-page); color: var(--s-madder); font: inherit; font-size: var(--s-size-small); cursor: pointer; }
.cf-assistant__chip:hover { background: var(--s-madder); color: var(--s-tissue); }

.cf-assistant__links { display: flex; flex-wrap: wrap; gap: var(--s-space-3xs) var(--s-space-s); margin: 0; font-size: var(--s-size-small); }
.cf-assistant__pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-space-3xs); }
.cf-assistant__piece { display: flex; justify-content: space-between; gap: var(--s-space-xs); padding: var(--s-space-3xs) 0;
    border-bottom: var(--s-rule-w) solid var(--s-rule); }
.cf-assistant__piece a { overflow-wrap: anywhere; }
.cf-assistant__price { flex: none; font-variant-numeric: tabular-nums; color: var(--s-text-muted); }

.cf-assistant__form { display: flex; gap: var(--s-space-2xs); padding: var(--s-space-xs); border-top: var(--s-rule-w) solid var(--s-rule); }
.cf-assistant__form input { flex: 1; min-width: 0; min-height: var(--s-tap); font-size: 1rem; }
.cf-assistant__note { margin: 0; padding: 0 var(--s-space-xs) var(--s-space-xs); font-size: var(--s-size-small); color: var(--s-text-muted); }

@media (min-width: 48rem) { .cf-assistant { bottom: calc(var(--s-space-l) + var(--cf-kb, 0px)); } }

/* Phones, and phones held sideways (short screens): the open chat is a full-width sheet over exactly the VISIBLE area (assistant.js keeps --cf-vv-top/--cf-vv-h
   current from window.visualViewport), so the text box sits on top of the keyboard and the header stays in reach.
   Without the script values, 100dvh (the visible height as the browser reports it). The page behind stays still. */
@media (max-width: 47.99rem), (max-height: 31.25rem) {
    .cf-assistant.is-open .cf-assistant__btn { display: none; }
    .cf-assistant.is-open .cf-assistant__panel {
        position: fixed; inset-inline: 0; bottom: auto; top: var(--cf-vv-top, 0px);
        width: auto; height: var(--cf-vv-h, 100dvh); max-height: none; animation: none;
    }
    .cf-assistant.is-open .cf-assistant__head { padding-top: calc(var(--s-space-2xs) + env(safe-area-inset-top)); }
    /* The text box is the last thing, right on top of the keyboard; the note moves above it. */
    .cf-assistant.is-open .cf-assistant__head { order: 0; }
    .cf-assistant.is-open .cf-assistant__log { order: 1; min-height: 0; }
    .cf-assistant.is-open .cf-assistant__note { order: 2; padding-top: var(--s-space-2xs); padding-bottom: 0; border-top: var(--s-rule-w) solid var(--s-rule); }
    .cf-assistant.is-open .cf-assistant__form { order: 3; border-top: 0; padding-bottom: calc(var(--s-space-xs) + env(safe-area-inset-bottom)); }
    .cf-chat-open, .cf-chat-open body { overflow: hidden; }
    /* Very little room (a phone held sideways, keyboard up): the conversation and the text box come first. */
    .cf-assistant.is-open.is-short .cf-assistant__note { display: none; }
    .cf-assistant.is-open.is-short .cf-assistant__head { padding-block: 0; }
    .cf-assistant.is-open.is-short .cf-assistant__form { padding-block: var(--s-space-3xs); }
}
@media (prefers-reduced-motion: no-preference) { .cf-assistant__panel { animation: cf-assistant-in var(--s-dur-fast) var(--s-ease-out); } }
@keyframes cf-assistant-in { from { opacity: 0; transform: translateY(var(--s-space-2xs)); } }