/* Layout and positioning for WinaltChat */
/* Reviewer note: this file controls geometry/positioning only (window placement,
 * panel modes, spacing). Theme colors are defined separately in chat-theme.css.
 */

/* ================================================ */
/* CHAT WINDOW POSITIONING */
/* ================================================ */

/* Chat window positioning */
.ai-window {
    position: fixed;
    top: auto !important;
    bottom: 88px !important;
    right: 20px !important;
    left: auto !important;
    /* Fixed 380x600 regardless of screen size made the window feel
       identically small on every desktop monitor and get needlessly
       cramped on shorter 14" laptop viewports (~768-800px tall).
       clamp() lets it grow modestly on spacious screens and shrink to
       fit shorter ones, while staying within a sane min/max range. */
    width: clamp(360px, 26vw, 440px);
    /* Taller ceiling for spacious desktop/laptop viewports so product
       cards and quick-reply chips have room without excessive scrolling;
       shorter screens still clamp down via the min/vh floor above. */
    height: clamp(460px, 80vh, 760px);
    max-height: 88vh;
    display: flex;
    flex-direction: column; 
    overflow: hidden;
    opacity: 0; 
    visibility: hidden; 
    z-index: 2147483647;
    transform: translateY(20px);
    background: var(--ai-primary) !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
    border: none !important;
}

/* Open state for chat window */
.ai-window.open { 
    opacity: 1; 
    visibility: visible; 
    transform: none; 
}

/* Header trigger + right slide panel mode (desktop) */
.ai-chat-trigger-header {
    position: static !important;
    width: auto !important;
    height: auto !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #1f2937 !important;
}

.winaltchat-header-trigger-anchor {
    position: absolute !important;
    top: calc(50% + var(--ai-header-trigger-top-offset, 0px)) !important;
    right: var(--ai-header-trigger-right, 24px) !important;
    transform: translateY(-50%) !important;
    z-index: 2147483646 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.ai-chat-trigger-header.ai-header-row-anchor {
    position: static !important;
}


.winaltchat-header-menu-item {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

.ai-chat-trigger-header .ai-header-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    background: var(--ai-header-trigger-bg, #f8fafc) !important;
    color: var(--ai-header-trigger-text, #0f172a) !important;
    box-shadow: none !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.ai-chat-trigger-header .ai-header-trigger-btn:hover,
.ai-chat-trigger-header .ai-header-trigger-btn:focus {
    background: var(--ai-header-trigger-bg, #f8fafc) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    filter: brightness(0.96);
}

.ai-chat-trigger-header .ai-header-trigger-btn.hidden {
    display: none !important;
}

.ai-chat-trigger-header .ai-header-trigger-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.ai-chat-trigger-header .ai-header-trigger-icon img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

.ai-chat-trigger-header .ai-header-trigger-label {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.ai-chat-trigger-header.ai-header-trigger-fallback {
    position: fixed !important;
    top: 14px !important;
    right: 20px !important;
    z-index: 2147483646 !important;
}

.ai-chat-trigger-header.ai-header-trigger-fallback .ai-header-trigger-btn {
    background: var(--ai-primary) !important;
    color: var(--ai-text) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2) !important;
}

.admin-bar .ai-chat-trigger-header.ai-header-trigger-fallback {
    top: 46px !important;
}

@media (max-width: 1200px) {
    .winaltchat-header-trigger-anchor {
        right: 16px !important;
    }
}

.ai-window.header-panel-mode {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(420px, calc(100vw - 16px)) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    transform: translateX(100%) !important;
    pointer-events: none;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    z-index: 2147483647 !important;
}

.ai-window.header-panel-mode.open {
    transform: translateX(0) !important;
    pointer-events: auto;
}

.ai-window.header-panel-mode .ai-action-btn,
.ai-window.header-panel-mode .portal-btn {
    width: 42px !important;
    height: 42px !important;
}

.ai-window.header-panel-mode .ai-action-btn svg,
.ai-window.header-panel-mode .portal-btn svg {
    width: 22px !important;
    height: 22px !important;
}

@media (max-width: 768px) {
    .ai-chat-trigger-header,
    .ai-chat-trigger-header.ai-header-trigger-fallback {
        top: auto !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    .ai-window.header-panel-mode {
        width: min(96vw, 420px) !important;
        top: 12px !important;
        bottom: 12px !important;
        height: auto !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 0 !important;
    }
}

/* Fullscreen for mobile */
.ai-window.fullscreen {
    position: fixed !important;
    top: var(--_wac-t, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: var(--_wac-h, 100vh) !important;
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Desktop header */
.ai-header {
    display: flex !important;
    background: var(--ai-primary) !important;
    color: var(--ai-text) !important;
    padding: 15px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
}

.ai-title-wrap,
.portal-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
}

.ai-title-wrap {
    overflow: hidden !important;
}

.ai-title-wrap strong,
.portal-center {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ai-header-actions,
.portal-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    /* The left group holds one button (download), the right holds two
       (minimize/close). Giving both groups the same min-width — sized
       to the wider (right) group — and right-aligning the left group's
       content keeps the two side columns visually symmetric, so the
       centered title-wrap between them actually sits in the header's
       true center instead of drifting toward the lighter side. */
    min-width: 80px !important;
}

.ai-header-actions-left,
.portal-actions-left {
    justify-content: flex-start !important;
}

.ai-header-actions-right,
.portal-actions-right {
    justify-content: flex-end !important;
}

/* ================================================ */
/* MESSAGES AREA - FIXED EXTRA SPACE */
/* ================================================ */

/* Messages area layout */
.ai-messages { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    background: var(--ai-background);
}

/* Mobile fullscreen: messages fill remaining flex space */
@media (max-width: 768px) {
    .ai-window.fullscreen .ai-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 12px 16px !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Ensure fullscreen window never creates a transform containing block on mobile */
@media (max-width: 768px) {
    .ai-window.fullscreen {
        transform: none !important;
    }

    .ai-window.fullscreen.open {
        transform: none !important;
    }
}

/* Input area */
.ai-input-area {
    border-top: 1px solid var(--ai-border) !important;
    background: var(--ai-background) !important;
    padding: 12px 16px 6px !important;
    flex-shrink: 0;
}

/* Quick-reply suggestion chips, shown above the input row. */
.ai-input-chips {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0 8px !important;
    flex-shrink: 0;
}
.ai-input-chips::-webkit-scrollbar {
    display: none;
}
.ai-input-chip {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 11px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

/* Privacy notice shown when an external AI provider is active */
.ai-privacy-notice {
    margin: 0 !important;
    padding: 2px 14px 4px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #9ca3af !important;
    background: var(--ai-background) !important;
    text-align: center !important;
    flex-shrink: 0;
}

.ai-privacy-notice a {
    color: inherit !important;
    text-decoration: underline !important;
}

.ai-input-wrapper {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
}

.ai-input-wrapper {
    align-items: flex-end !important;
}

.ai-input-wrapper textarea {
    flex: 1 !important;
    background: #ffffff !important;
    border: 1px solid var(--ai-border) !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    outline: none !important;
    font-family: var(--ai-font-family) !important;
    resize: none !important;
    overflow-y: hidden !important;
    max-height: 120px !important;
    min-height: 40px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    display: block !important;
}

.ai-input-wrapper textarea:focus {
    border-color: var(--ai-primary) !important;
}

#ai-send {
    background: var(--ai-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

#ai-send:hover {
    transform: scale(1.05) !important;
}

/* Button styles */
.ai-btn svg, 
.ai-header svg, 
.ai-action-btn svg,
.portal-btn svg,
#ai-send svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

.ai-amazon-btn svg {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.ai-amazon-btn {
    background: var(--ai-primary) !important;
    color: var(--ai-text) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    font-family: var(--ai-font-family) !important;
}

.ai-action-btn, .portal-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ai-action-btn:hover, .portal-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

.ai-end-chat-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(15, 23, 42, 0.2) !important;
    z-index: 1002 !important;
}

.ai-end-chat-overlay[hidden] {
    display: none !important;
}

.ai-end-chat-dialog {
    width: min(100%, 320px) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2) !important;
    padding: 22px !important;
    text-align: center !important;
}

.ai-end-chat-dialog h3 {
    margin: 0 0 8px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
}

.ai-end-chat-dialog p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.ai-end-chat-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 14px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(var(--ai-primary-rgb), 0.12) !important;
    color: var(--ai-primary) !important;
}

.ai-end-chat-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.ai-end-chat-btn {
    flex: 1 1 0 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.ai-end-chat-btn:hover {
    transform: translateY(-1px) !important;
}

.ai-end-chat-btn-secondary {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.ai-end-chat-btn-secondary:hover {
    background: #cbd5e1 !important;
}

.ai-end-chat-btn-primary {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.22) !important;
}

.ai-end-chat-btn-primary:hover {
    background: #b91c1c !important;
}

/* Message alignment */
.ai-msg { 
    display: flex; 
    width: 100%; 
}

.ai-msg.user {
    justify-content: flex-end;
}

/* Bot/agent avatar shown beside each assistant message (chat-base.css
   makes .ai-msg.assistant a row so this sits left of the column below).
   Colors live in chat-theme.css. */
.winalt-msg-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.winalt-msg-avatar::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
}
.winalt-msg-avatar-bot::before {
    -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M12 8V4'/%3E%3Ccircle cx='12' cy='3' r='1'/%3E%3Ccircle cx='8' cy='14' r='1.5'/%3E%3Ccircle cx='16' cy='14' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M12 8V4'/%3E%3Ccircle cx='12' cy='3' r='1'/%3E%3Ccircle cx='8' cy='14' r='1.5'/%3E%3Ccircle cx='16' cy='14' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.winalt-msg-avatar-agent::before {
    -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Column holding the bubble, any extracted product cards, and feedback
   buttons for one assistant message — sits beside the avatar. */
.winalt-msg-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 85%;
    min-width: 0;
}
.winalt-msg-col .ai-bubble.assistant {
    max-width: 100% !important;
}

/* ================================================ */
/* MOBILE RESPONSIVE */
/* ================================================ */
@media (max-width: 768px) {
    /* Fullscreen: flex column, JS controls height/top via CSS custom props */
    .ai-window.fullscreen {
        top: var(--_wac-t, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: var(--_wac-h, 100svh) !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .ai-window:not(.fullscreen) {
        bottom: 20px !important;
        right: 20px !important;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        left: 20px !important;
    }
    
    /* Header — in-flow flex child, always visible at top (not position:fixed) */
    .ai-window.fullscreen #ai-header-portal {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        display: flex !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    /* Hide desktop header in mobile fullscreen to prevent duplicate bars */
    .ai-window.fullscreen .ai-header {
        display: none !important;
    }

    /* Input area — in-flow flex child, always visible at bottom (not position:fixed) */
    .ai-window.fullscreen .ai-input-area {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        background: #ffffff !important;
        border-top: 1px solid var(--ai-border) !important;
        padding: 12px 16px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
        z-index: auto !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .portal-actions {
        gap: 6px !important;
    }

    .ai-end-chat-overlay {
        padding: 16px !important;
    }

    .ai-end-chat-actions {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    .ai-window:not(.fullscreen) {
        width: calc(100vw - 30px) !important;
        left: 15px !important;
        right: 15px !important;
    }
}

/*
 * iOS Safari extra: ensure no residual transform and use -webkit-fill-available
 * as a fallback for browsers that don't support 100dvh.
 */
@media (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {
        /* Stop input-focus auto-zoom */
        .ai-window.fullscreen #ai-input,
        .ai-window.fullscreen .ai-input-wrapper textarea {
            font-size: 16px !important;
            -webkit-text-size-adjust: 100%;
        }

        /* Ensure no transform on fullscreen window on iOS */
        .ai-window.fullscreen,
        .ai-window.fullscreen.open {
            transform: none !important;
        }

        /* iOS keyboard and body fixed-lock fight each other; keep overflow lock only */
        body.ai-chat-open {
            position: static !important;
            width: auto !important;
            height: auto !important;
            touch-action: auto !important;
        }

        /* On iOS, use only the portal header to avoid dual-header state */
        .ai-window.fullscreen #ai-header-portal {
            display: flex !important;
        }

        .ai-window.fullscreen .ai-header {
            display: none !important;
        }
    }
}
/* Remove <br> gaps between product cards.
   The JS newline-to-br converter adds <br> after each card.
   Card margin handles spacing — the <br> is visual noise. */
.ai-basic-product-card + br,
.ai-product-card + br {
    display: none !important;
}

/* Prevent product card content from overflowing the chat bubble on narrow screens. */
.ai-basic-product-card,
.ai-product-card {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
}

.ai-basic-product-card img,
.ai-product-card img {
    max-width: 100%;
    height: auto;
}

/* Redesigned product card structure — image block, price/rating row,
   description, action buttons. Colors/borders live in chat-theme.css. */
.winalt-pc {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.winalt-pc-media {
    position: relative;
    height: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.winalt-pc-img {
    /* !important needed: the pre-existing ".ai-basic-product-card img"
       descendant rule above (specificity 0,1,1) outranks this single
       class (0,1,0) and would silently win with height:auto, breaking
       the cover-fit image block otherwise. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.winalt-pc-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
/* CSS-mask icon instead of an inline <svg> — the sanitizer's
   ALLOWED_TAGS list (chat-config.js) doesn't include svg/path, so an
   inline fallback icon would be silently stripped from every card with
   no product photo. Same technique already used for the feedback
   "thanks" checkmark in chat-components.css. */
.winalt-pc-media-fallback::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Standalone card group rendered as a sibling of the text bubble
   (chat-core.js formatMessage extracts .ai-basic-product-card nodes
   out of the sanitized message content), not nested inside it. */
.winalt-pc-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.winalt-pc-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: .03em;
}
.winalt-pc-body {
    padding: 11px 12px;
}
.winalt-pc-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
    line-height: 1.3;
    overflow-wrap: break-word;
}
.winalt-pc-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}
.winalt-pc-price {
    font-size: 15px;
    font-weight: 700;
}
.winalt-pc-price-old {
    font-size: 12px;
    text-decoration: line-through;
}
.winalt-pc-stars {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}
/* The fill overlay's width is set via a bucketed class
   (winalt-pc-stars-0 .. winalt-pc-stars-100, step 10) computed
   server-side in class-winalt-response-formatter.php, not an inline
   custom-property style — the client sanitizer's style="" allowlist is
   a fixed property-name list that doesn't cover custom properties, so
   an inline "--winalt-pc-rating-pct:NN%" would be silently stripped
   and every rating would render empty. */
.winalt-pc-stars::before {
    content: '★★★★★';
    position: absolute;
    inset: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.winalt-pc-stars-0::before { width: 0%; }
.winalt-pc-stars-10::before { width: 10%; }
.winalt-pc-stars-20::before { width: 20%; }
.winalt-pc-stars-30::before { width: 30%; }
.winalt-pc-stars-40::before { width: 40%; }
.winalt-pc-stars-50::before { width: 50%; }
.winalt-pc-stars-60::before { width: 60%; }
.winalt-pc-stars-70::before { width: 70%; }
.winalt-pc-stars-80::before { width: 80%; }
.winalt-pc-stars-90::before { width: 90%; }
.winalt-pc-stars-100::before { width: 100%; }
.winalt-pc-reviews {
    font-size: 10px;
}
.winalt-pc-desc {
    font-size: 11.5px;
    margin: 0 0 10px;
    line-height: 1.4;
    overflow-wrap: break-word;
}
.winalt-pc-actions {
    display: flex;
    gap: 7px;
}
.winalt-pc-btn {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 6px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none !important;
}

/* Offline email capture — compact, modern styling for the inline lead form. */
.winalt-email-capture {
    margin: 8px 0;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.winalt-email-capture-label {
    margin-bottom: 8px;
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

.winalt-email-capture input[type="email"],
.winalt-email-input,
.winalt-lc-email-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 8px;
    outline: none;
}

.winalt-email-capture input[type="email"]:focus,
.winalt-email-input:focus,
.winalt-lc-email-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.winalt-email-capture-actions {
    display: flex;
    gap: 8px;
}

.winalt-email-submit {
    flex: 0 0 auto !important;
    display: inline-block !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #fff !important;
    background: #3b82f6 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease;
}

.winalt-email-submit:hover {
    background: #2563eb !important;
    color: #fff !important;
}

.winalt-email-dismiss {
    flex: 0 0 auto !important;
    display: inline-block !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #64748b !important;
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease;
}

.winalt-email-dismiss:hover {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

/* Time divider shown between messages with > 5min gap */
.winalt-time-divider {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    margin: 10px 0 6px;
    position: relative;
}
.winalt-time-divider::before,
.winalt-time-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #e2e8f0;
}
.winalt-time-divider::before { left: 0; }
.winalt-time-divider::after  { right: 0; }

/* WhatsApp-style timestamp inside live-admin bubbles — same spacer
   technique as outgoing messages: inline spacer reserves footer width,
   absolute footer sits at bottom-right aligned with the spacer. */
.ai-bubble.assistant.has-timestamp {
    position: relative;
}

.ai-bubble.assistant.has-timestamp .winalt-msg-time {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    line-height: 1;
}

/* ── Message ticks (live chat, WhatsApp style) ───────────── */

.ai-msg.user .ai-bubble {
    position: relative;
    line-height: 1.35;
}

/* Invisible spacer injected at the end of the bubble's text content.
   It is display:inline-block so it sits in the normal text flow and
   reserves horizontal space equal to the footer's width on the last
   line — exactly WhatsApp's technique. The footer remains absolute,
   but the spacer prevents text from overlapping it.
   Width = footer_width - (padding-right - right-offset) + 4px gap:
   • outgoing (time + tick ≈ 59px): 59 - 11 + 4 = 52px
   • incoming  (time only  ≈ 38px): 38 - 11 + 5 = 32px          */
.winalt-msg-spacer {
    display: inline-block;
    width: 52px;
    height: 10px;
    vertical-align: bottom;
}

.ai-bubble.assistant .winalt-msg-spacer {
    width: 32px;
}

.winalt-msg-footer-inline {
    position: absolute;
    bottom: 3px;
    right: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ai-bubble.user.has-timestamp .winalt-msg-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    line-height: 1;
}

.winalt-tick {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.winalt-tick-icon {
    width: 12px;
    height: 8px;
    display: block;
}

.winalt-tick-double {
    width: 18px;
    height: 8px;
}

/* Single white (dimmed) — sent */
.winalt-tick--sent path {
    stroke: rgba(255, 255, 255, 0.6);
}

/* Double white (dimmed) — delivered, same dim tone as sent so
   the only visually distinct state is "read" */
.winalt-tick--delivered path {
    stroke: rgba(255, 255, 255, 0.6);
}

/* Double bright white + subtle glow — read. Using full-opacity
   white instead of light blue guarantees contrast against ANY
   configurable bubble background color, not just blue. The
   drop-shadow adds a faint "lit up" effect so the read state is
   unmistakably different from the dimmed sent/delivered state
   even on lighter theme colors. */
.winalt-tick--read path {
    stroke: #ffffff;
}
.winalt-tick--read {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
}