/* AI Waiter widget styles. Everything is prefixed aiw-.
 * z-index: core's Livewire modals (options popup etc.) sit around z-50, so the orb
 * uses 40 and the panel 45; core popups therefore always cover the waiter. */
.aiw-root {
    all: initial;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1d1b16;
    --aiw-panel-bg: rgba(255, 255, 255, 0.92);
    --aiw-panel-fg: #1d1b16;
    --aiw-muted: #6b665c;
    --aiw-line: rgba(0, 0, 0, 0.12);
    --aiw-input-bg: #ffffff;
}
.aiw-root *, .aiw-root *::before, .aiw-root *::after { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
    .aiw-root {
        color: #f1eee6;
        --aiw-panel-bg: rgba(30, 28, 24, 0.92);
        --aiw-panel-fg: #f1eee6;
        --aiw-muted: #a8a294;
        --aiw-line: rgba(255, 255, 255, 0.16);
        --aiw-input-bg: #26231e;
    }
}

/* Orb button. Fixed corner placement comes from aiw-left / aiw-right. */
.aiw-orb {
    all: unset;
    display: block;
    position: fixed;
    z-index: 40;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, opacity 0.3s ease;
}
.aiw-orb.aiw-small { width: 60px; height: 60px; }
.aiw-orb:hover { transform: scale(1.04); }
.aiw-orb:focus-visible { outline: 3px solid #4c8bf5; outline-offset: 3px; }
.aiw-orb canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.aiw-orb.aiw-dim { opacity: 0.45; }

/* Corner placement: 16px gutter, clears core's floating cart button. */
.aiw-left  { left: 16px;  bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.aiw-right { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.aiw-rtl { direction: rtl; }
.aiw-rtl .aiw-left  { left: auto; right: 16px; }
.aiw-rtl .aiw-right { right: auto; left: 16px; }

/* One-time hint bubble. */
.aiw-hint {
    position: fixed;
    z-index: 40;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--aiw-panel-bg);
    color: var(--aiw-panel-fg);
    border: 1px solid var(--aiw-line);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    cursor: pointer;
}
.aiw-hint.aiw-left,
.aiw-hint.aiw-right { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }

/* Panel anchored above the orb. */
.aiw-panel {
    position: fixed;
    z-index: 45;
    width: calc(100vw - 32px);
    max-width: 360px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--aiw-panel-bg);
    color: var(--aiw-panel-fg);
    border: 1px solid var(--aiw-line);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.25);
}
.aiw-panel.aiw-left,
.aiw-panel.aiw-right { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .aiw-panel, .aiw-hint {
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        backdrop-filter: blur(14px) saturate(1.3);
    }
}

/* Single fading subtitle line (no chat history). */
.aiw-caption-user, .aiw-caption-bot {
    min-height: 1.4em;
    margin: 0;
    transition: opacity 0.6s ease;
    overflow-wrap: anywhere;
}
.aiw-caption-user { color: var(--aiw-muted); font-size: 13px; }
.aiw-caption-bot  { color: var(--aiw-panel-fg); font-size: 15px; font-weight: 500; }
.aiw-caption-user:empty, .aiw-caption-bot:empty { display: none; }
.aiw-dim { opacity: 0.35; }

/* Backup one-line text input. */
.aiw-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    max-width: 360px;
}
.aiw-form[hidden] { display: none; }
.aiw-input {
    all: unset;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--aiw-line);
    background: var(--aiw-input-bg);
    color: var(--aiw-panel-fg);
    font-size: 16px; /* 16px stops iOS zooming on focus */
}
.aiw-input:focus-visible { outline: 2px solid #4c8bf5; }
.aiw-send, .aiw-close {
    all: unset;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--aiw-panel-fg);
}
.aiw-send { background: var(--aiw-line); }
.aiw-close { border-radius: 50%; color: var(--aiw-muted); }
.aiw-send:hover, .aiw-close:hover { background: var(--aiw-line); }
.aiw-send:focus-visible, .aiw-close:focus-visible { outline: 2px solid #4c8bf5; }

@media (prefers-reduced-motion: reduce) {
    .aiw-orb, .aiw-caption-user, .aiw-caption-bot { transition: none; }
    .aiw-orb:hover { transform: none; }
}