/* ==================================================
   ShopBot AI chat widget styles
   ================================================== */
/* Colors/sizing read from CSS custom properties (with sensible
   fallbacks) so both the live storefront widget and the admin Appearance
   preview can theme themselves from the same variable names. Real values
   are set inline per-store by ShopBot_AI_Chat_Widget::render_widget_container()
   (scoped to #shopbot-ai-widget-root) or by admin-appearance.js (scoped to
   #shopbot-ai-preview-frame).

   Look: frosted-glass panels (backdrop-filter blur) over glossy gradients,
   with color-tinted glow shadows instead of flat black ones, so the widget
   reads as an "AI surface" floating above the page rather than an opaque
   card sitting on it. Default palette matches the "AgentChat" design
   system (see shopbot-agentchat-theme.css) — deep purple primary (#7040A0)
   with a lilac accent (#9B5EC8), all still overridable per-store via the
   Appearance tab's color pickers. */

#shopbot-ai-widget-root {
    --shopbot-ai-glow: color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 60%, #9B5EC8 40%);
}

.shopbot-ai-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--shopbot-ai-primary, #7040A0); /* fallback for browsers without color-mix()/backdrop-filter */
    background: radial-gradient(
        circle at 32% 28%,
        color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 55%, #ffffff 25%) 0%,
        var(--shopbot-ai-primary, #7040A0) 45%,
        color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 55%, #9B5EC8 45%) 100%
    );
    background-size: 160% 160%;
    animation: shopbot-ai-header-shimmer 7s ease-in-out infinite;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow:
        0 10px 28px -6px color-mix(in srgb, var(--shopbot-ai-glow) 65%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px color-mix(in srgb, #ffffff 45%, transparent),
        inset 0 -8px 14px -8px color-mix(in srgb, #000000 35%, transparent);
    z-index: 999999;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.shopbot-ai-bubble:hover {
    transform: scale(1.06);
}

/* Slow-rotating gradient halo behind the bubble — the "AI is alive" cue
   modern widgets use instead of a static circle. Sits at negative z-index
   so it glows out from behind the glossy orb rather than overlaying it. */
.shopbot-ai-bubble::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        color-mix(in srgb, var(--shopbot-ai-glow) 85%, transparent) 25%,
        transparent 50%,
        color-mix(in srgb, var(--shopbot-ai-glow) 85%, transparent) 75%,
        transparent 100%
    );
    filter: blur(7px);
    opacity: 0.75;
    z-index: -1;
    animation: shopbot-ai-ring-spin 5s linear infinite;
}

@keyframes shopbot-ai-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Soft outward "signal" ring so the launcher reads as alive, not static. */
.shopbot-ai-bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 45%, transparent);
    animation: shopbot-ai-bubble-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes shopbot-ai-bubble-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 45%, transparent);
    }
    70% {
        box-shadow: 0 0 0 14px color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.shopbot-ai-panel {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: min(var(--shopbot-ai-width, 320px), calc(100vw - 24px));
    /* Configured size is a ceiling, not a fixed value: on short viewports
       (small laptops, landscape mobile) the panel shrinks to fit instead of
       overflowing off the top of the screen or getting clipped. */
    height: min(var(--shopbot-ai-height, 420px), calc(100vh - 120px));
    max-height: calc(100vh - 120px);
    /* Frosted glass: translucent tint over whatever's behind the widget,
       blurred so it reads as a distinct floating surface rather than a
       see-through hole in the page. Solid fallback first for browsers
       without backdrop-filter/color-mix support. */
    background: var(--shopbot-ai-panel-bg, #FAF5FF);
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--shopbot-ai-panel-bg, #FAF5FF) 80%, transparent) 0%,
        color-mix(in srgb, var(--shopbot-ai-panel-bg, #FAF5FF) 90%, transparent) 100%
    );
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid color-mix(in srgb, #ffffff 30%, transparent);
    border-radius: var(--shopbot-ai-radius, 12px);
    box-shadow:
        0 20px 50px -12px rgba(0, 0, 0, 0.35),
        0 0 40px -10px color-mix(in srgb, var(--shopbot-ai-glow) 45%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 35%, transparent);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999999;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transform-origin: bottom right;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Glass sheen: a soft diagonal highlight so the panel catches "light" like
   a glossy surface. Painted behind the real header/messages/input content
   (default stacking order), low-opacity so it never fights legibility. */
.shopbot-ai-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, color-mix(in srgb, #ffffff 40%, transparent) 0%, transparent 35%);
    pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .shopbot-ai-panel {
        background: var(--shopbot-ai-panel-bg, #FAF5FF);
    }
}

#shopbot-ai-widget-root.shopbot-ai-position-left .shopbot-ai-panel {
    transform-origin: bottom left;
}

/* Open/close is a class toggle (not display:none) so the panel can fade and
   slide instead of snapping instantly; pointer-events keeps it inert while
   hidden without needing display changes to break the transition. */
.shopbot-ai-panel-closed {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
}

.shopbot-ai-header {
    position: relative;
    background: var(--shopbot-ai-primary, #7040A0); /* fallback for browsers without color-mix() */
    background: linear-gradient(
        120deg,
        var(--shopbot-ai-primary, #7040A0) 0%,
        color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 55%, #9B5EC8 45%) 50%,
        var(--shopbot-ai-primary, #7040A0) 100%
    );
    background-size: 220% 100%;
    animation: shopbot-ai-header-shimmer 7s ease-in-out infinite;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, #ffffff 18%, transparent);
}

/* Glossy highlight along the top edge of the header, echoing the panel's
   glass sheen so the header reads as part of the same glass surface. */
.shopbot-ai-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, #ffffff 22%, transparent) 0%, transparent 60%);
    pointer-events: none;
}

@keyframes shopbot-ai-header-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.shopbot-ai-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    overflow: hidden;
}

/* Host themes/page builders (Elementor's global `img { max-width:100%;
   height:auto }` especially) out-cascade a bare `.shopbot-ai-header-avatar
   img` rule on the live storefront, collapsing the avatar photo down to its
   intrinsic aspect ratio instead of filling the circle — so width/height
   need !important here, same as the button/input fixes below. */
#shopbot-ai-widget-root .shopbot-ai-header-avatar img,
#shopbot-ai-preview-frame .shopbot-ai-header-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 50%;
}

.shopbot-ai-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shopbot-ai-header-title {
    font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shopbot-ai-header-subtitle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Decorative window-chrome dots echoing the reference design's framing —
   purely cosmetic, no functionality attached. */
.shopbot-ai-header-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.shopbot-ai-header-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    opacity: 0.85;
}

.shopbot-ai-header-dots span:nth-child(1) { background: #f87171; }
.shopbot-ai-header-dots span:nth-child(2) { background: #fbbf24; }
.shopbot-ai-header-dots span:nth-child(3) { background: #4ade80; }

/* Small "online" indicator so the header reads as an active AI, not a static label. */
.shopbot-ai-status-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6ee7b7, #10b981);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6), 0 0 6px 1px rgba(16, 185, 129, 0.7);
    animation: shopbot-ai-status-pulse 2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes shopbot-ai-status-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6), 0 0 6px 1px rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0), 0 0 6px 1px rgba(16, 185, 129, 0.7);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 6px 1px rgba(16, 185, 129, 0.7);
    }
}

.shopbot-ai-messages {
    position: relative;
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shopbot-ai-message-row {
    display: flex;
    align-items: flex-end;
    max-width: 88%;
    animation: shopbot-ai-msg-in 0.22s ease both;
}

@keyframes shopbot-ai-msg-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shopbot-ai-message-row-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.shopbot-ai-message-row-assistant {
    align-self: flex-start;
}

.shopbot-ai-message {
    min-width: 0;
    padding: 9px 13px;
    border-radius: var(--shopbot-ai-msg-radius, 12px);
    font-size: 14px;
    line-height: 1.45;
}

.shopbot-ai-message-user {
    /* Sharp bottom-right corner reads as a speech-bubble "tail" pointing at
       the edge the visitor's own messages hug, matching the reference. */
    border-radius: var(--shopbot-ai-msg-radius, 12px) var(--shopbot-ai-msg-radius, 12px) 4px var(--shopbot-ai-msg-radius, 12px);
    background: var(--shopbot-ai-primary, #7040A0); /* fallback for browsers without color-mix() */
    background: linear-gradient(135deg, color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 85%, #ffffff 15%), color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 75%, #9B5EC8 25%));
    color: #fff;
    box-shadow:
        0 3px 10px color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 35%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
}

.shopbot-ai-message-assistant {
    /* Sharp bottom-left corner mirrors the user bubble's tail on the
       opposite side, matching the reference design. */
    border-radius: var(--shopbot-ai-msg-radius, 12px) var(--shopbot-ai-msg-radius, 12px) var(--shopbot-ai-msg-radius, 12px) 4px;
    /* Glass bubble: translucent + blurred rather than a flat opaque fill,
       so it reads as part of the frosted panel instead of a plain card. */
    background: var(--shopbot-ai-assistant-bg, #EDE4FF);
    background: color-mix(in srgb, var(--shopbot-ai-assistant-bg, #EDE4FF) 68%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
    color: var(--shopbot-ai-assistant-text, #1E0A3C);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.shopbot-ai-message-assistant p {
    margin: 0 0 8px;
}

.shopbot-ai-message-assistant p:last-child {
    margin-bottom: 0;
}

.shopbot-ai-message-assistant ul,
.shopbot-ai-message-assistant ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.shopbot-ai-message-assistant ul:last-child,
.shopbot-ai-message-assistant ol:last-child {
    margin-bottom: 0;
}

.shopbot-ai-product-link {
    font-weight: 600;
    color: var(--shopbot-ai-primary, #7040A0);
    background: color-mix(in srgb, #9B5EC8 18%, transparent);
    padding: 1px 4px;
    border-radius: 4px;
    text-decoration: none;
}

.shopbot-ai-product-link:hover,
.shopbot-ai-product-link:focus {
    text-decoration: underline;
}

/* "Bot is typing..." indicator */
.shopbot-ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
}

.shopbot-ai-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--shopbot-ai-assistant-text, #1E0A3C); /* fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 70%, var(--shopbot-ai-assistant-text, #1E0A3C) 30%);
    opacity: 0.6;
    animation: shopbot-ai-typing-bounce 1s infinite ease-in-out;
}

.shopbot-ai-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.shopbot-ai-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes shopbot-ai-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Post-reply rating card */
.shopbot-ai-rating-card {
    align-self: flex-start;
    max-width: 80%;
    background: var(--shopbot-ai-assistant-bg, #EDE4FF); /* fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--shopbot-ai-assistant-bg, #EDE4FF) 72%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
    color: var(--shopbot-ai-assistant-text, #1E0A3C);
    border-radius: var(--shopbot-ai-msg-radius, 12px);
    padding: 12px 14px;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    animation: shopbot-ai-msg-in 0.22s ease both;
}

.shopbot-ai-rating-prompt,
.shopbot-ai-rating-thanks {
    margin: 0 0 6px;
}

.shopbot-ai-rating-thanks {
    margin-bottom: 0;
}

.shopbot-ai-rating-emojis {
    display: flex;
    justify-content: center;
    gap: 6px;
}

#shopbot-ai-widget-root .shopbot-ai-rating-emoji,
#shopbot-ai-preview-frame .shopbot-ai-rating-emoji {
    background: none !important;
    border: none !important;
    font-size: 20px;
    line-height: 1;
    padding: 4px !important;
    cursor: pointer;
    border-radius: 8px !important;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

#shopbot-ai-widget-root .shopbot-ai-rating-emoji:hover,
#shopbot-ai-preview-frame .shopbot-ai-rating-emoji:hover {
    background: color-mix(in srgb, #9B5EC8 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, #9B5EC8 30%, transparent) inset;
    transform: scale(1.18);
}

#shopbot-ai-widget-root .shopbot-ai-rating-emoji:disabled,
#shopbot-ai-preview-frame .shopbot-ai-rating-emoji:disabled {
    cursor: default;
}

#shopbot-ai-widget-root .shopbot-ai-rating-emoji-selected,
#shopbot-ai-preview-frame .shopbot-ai-rating-emoji-selected {
    background: color-mix(in srgb, #9B5EC8 22%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #9B5EC8 40%, transparent) inset;
    transform: scale(1.3);
}

/* Reaction "pop" burst: several copies of the tapped emoji float up and
   fade out, same idea as double-tapping a reaction in a chat app. Lives in
   its own fixed full-viewport layer (see chat-widget.js) so it isn't
   clipped by the panel's overflow:hidden/transform, and sits above the
   panel's own z-index. */
#shopbot-ai-emoji-burst-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000000;
}

.shopbot-ai-emoji-burst-particle {
    position: absolute;
    font-size: 22px;
    line-height: 1;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: shopbot-ai-emoji-burst;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
    animation-fill-mode: forwards;
}

@keyframes shopbot-ai-emoji-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
        opacity: 0;
    }
    15% {
        transform: translate(
                calc(-50% + var(--shopbot-ai-burst-drift, 0px) * 0.25),
                calc(-50% + var(--shopbot-ai-burst-rise, -40px) * 0.2)
            )
            scale(var(--shopbot-ai-burst-scale, 1.1)) rotate(calc(var(--shopbot-ai-burst-rotate, 0deg) * 0.2));
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--shopbot-ai-burst-drift, 0px)), calc(-50% + var(--shopbot-ai-burst-rise, -120px)))
            scale(calc(var(--shopbot-ai-burst-scale, 1.1) * 0.65)) rotate(var(--shopbot-ai-burst-rotate, 0deg));
        opacity: 0;
    }
}

/* Order lookup form card */
.shopbot-ai-order-form-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    background: var(--shopbot-ai-assistant-bg, #EDE4FF); /* fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--shopbot-ai-assistant-bg, #EDE4FF) 72%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--shopbot-ai-assistant-text, #1E0A3C);
    border-radius: var(--shopbot-ai-msg-radius, 12px);
    border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
    border-top: 2px solid color-mix(in srgb, #9B5EC8 55%, transparent);
    padding: 14px;
    font-size: 13px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.shopbot-ai-order-form-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 600;
}

/* Host themes/page builders (Elementor's global Button/Form Fields
   defaults especially) ship broad `button`/`input` selectors of their own.
   Those load after this stylesheet and can out-cascade a bare
   `.shopbot-ai-order-form-label input` rule on the live storefront (though
   never in the wp-admin preview, which has no such page-wide CSS) — so
   every form-control rule below is duplicated under both root IDs the
   widget can be mounted in, which reliably outranks a plain-class or
   plain-element host rule. */
#shopbot-ai-widget-root .shopbot-ai-order-form-label input,
#shopbot-ai-preview-frame .shopbot-ai-order-form-label input {
    border: 1px solid color-mix(in srgb, var(--shopbot-ai-assistant-text, #1E0A3C) 18%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #ffffff 85%, transparent);
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 400;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#shopbot-ai-widget-root .shopbot-ai-order-form-label input:focus,
#shopbot-ai-preview-frame .shopbot-ai-order-form-label input:focus {
    outline: none;
    border-color: #9B5EC8;
    box-shadow: 0 0 0 3px color-mix(in srgb, #9B5EC8 22%, transparent);
}

/* Explicit, always-visible empty-field feedback on submit — deliberately not
   relying on the browser's native validation bubble alone, since that can
   render clipped/invisible inside a scrolling widget panel and leave the
   form looking like it silently did nothing. */
#shopbot-ai-widget-root .shopbot-ai-order-form-input-invalid,
#shopbot-ai-preview-frame .shopbot-ai-order-form-input-invalid {
    border-color: #E0483E !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #E0483E 18%, transparent);
}

.shopbot-ai-order-form-error {
    font-size: 11px;
    font-weight: 500;
    color: #E0483E;
}

#shopbot-ai-widget-root .shopbot-ai-order-form-card button,
#shopbot-ai-preview-frame .shopbot-ai-order-form-card button {
    align-self: flex-start;
    background: var(--shopbot-ai-primary, #7040A0); /* fallback for browsers without color-mix() */
    background: linear-gradient(135deg, color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 85%, #ffffff 15%), color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 60%, #9B5EC8 40%)) !important;
    color: #fff;
    border: none !important;
    border-radius: 9999px !important;
    padding: 9px 18px !important;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 30%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#shopbot-ai-widget-root .shopbot-ai-order-form-card button:hover:not(:disabled),
#shopbot-ai-preview-frame .shopbot-ai-order-form-card button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 40%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
}

#shopbot-ai-widget-root .shopbot-ai-order-form-card input:disabled,
#shopbot-ai-widget-root .shopbot-ai-order-form-card button:disabled,
#shopbot-ai-preview-frame .shopbot-ai-order-form-card input:disabled,
#shopbot-ai-preview-frame .shopbot-ai-order-form-card button:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.shopbot-ai-input-row {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 1px solid color-mix(in srgb, #ffffff 20%, transparent);
    background: var(--shopbot-ai-panel-bg, #FAF5FF);
    background: color-mix(in srgb, var(--shopbot-ai-panel-bg, #FAF5FF) 55%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 10px;
    gap: 8px;
}

#shopbot-ai-widget-root .shopbot-ai-input-row input,
#shopbot-ai-preview-frame .shopbot-ai-input-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--shopbot-ai-assistant-text, #1E0A3C) 16%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, #ffffff 75%, transparent);
    padding: 10px 16px;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#shopbot-ai-widget-root .shopbot-ai-input-row input:focus,
#shopbot-ai-preview-frame .shopbot-ai-input-row input:focus {
    outline: none;
    border-color: #9B5EC8;
    background: color-mix(in srgb, #ffffff 92%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, #9B5EC8 20%, transparent);
}

#shopbot-ai-widget-root .shopbot-ai-input-row input:disabled,
#shopbot-ai-preview-frame .shopbot-ai-input-row input:disabled {
    opacity: 0.7;
}

#shopbot-ai-widget-root .shopbot-ai-input-row button,
#shopbot-ai-preview-frame .shopbot-ai-input-row button {
    /* Flat solid circle (not the glossy radial-gradient orb used for the
       floating launcher) so the send action reads as a simple icon button,
       matching the reference design. !important on the box-shape
       properties because some host themes/page builders (Elementor's
       global Button defaults especially) set width/padding on every
       <button> with enough weight that plain specificity doesn't
       reliably beat them. */
    flex-shrink: 0;
    box-sizing: border-box !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--shopbot-ai-primary, #7040A0) !important;
    color: #fff;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 35%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#shopbot-ai-widget-root .shopbot-ai-input-row button:hover:not(:disabled),
#shopbot-ai-preview-frame .shopbot-ai-input-row button:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--shopbot-ai-primary, #7040A0) 45%, transparent);
}

#shopbot-ai-widget-root .shopbot-ai-input-row button:disabled,
#shopbot-ai-preview-frame .shopbot-ai-input-row button:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* Position: bottom-left */
#shopbot-ai-widget-root.shopbot-ai-position-left .shopbot-ai-bubble,
#shopbot-ai-widget-root.shopbot-ai-position-left .shopbot-ai-panel {
    right: auto;
    left: 20px;
}

/* Hide on small screens when enabled in Behavior & Triggers */
@media (max-width: 768px) {
    #shopbot-ai-widget-root.shopbot-ai-hide-mobile .shopbot-ai-bubble,
    #shopbot-ai-widget-root.shopbot-ai-hide-mobile .shopbot-ai-panel {
        display: none !important;
    }
}

/* Respect visitors who've asked their OS/browser to minimize motion. */
@media (prefers-reduced-motion: reduce) {
    .shopbot-ai-bubble::before,
    .shopbot-ai-bubble::after,
    .shopbot-ai-bubble,
    .shopbot-ai-header,
    .shopbot-ai-status-dot,
    .shopbot-ai-typing span {
        animation: none;
    }

    .shopbot-ai-message-row {
        animation: none;
    }

    .shopbot-ai-emoji-burst-particle {
        animation: none;
        display: none;
    }

    .shopbot-ai-panel,
    .shopbot-ai-bubble {
        transition: none;
    }
}