/*
 * Design tokens. Promoted to :root (not scoped to a plugin wrapper) so a
 * site's own "Additional CSS" can restyle the overlay to match its theme
 * by overriding these custom properties — that is the supported
 * customization surface, instead of targeting internal class names.
 */
:root {
    --aips-accent: #7b8cff;
    --aips-accent-contrast: #fff;
    --aips-surface: #fff;
    --aips-surface-muted: #f5f5f6;
    --aips-border: rgba(0, 0, 0, 0.1);
    --aips-text: #1a1a1a;
    --aips-text-muted: #666;
    --aips-radius: 12px;
    --aips-radius-sm: 6px;
    --aips-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    --aips-backdrop: rgba(10, 10, 15, 0.55);
}

body.aips-scroll-lock {
    overflow: hidden;
}

.aips-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Search trigger — a real (readonly) search input, not a button, so
   focusing it feels like focusing an ordinary search box rather than a
   click-through step. Injected into a theme header, floating as a last
   resort, or rendered inline by the [ai_product_search] shortcode.
   Reuses .aips-input's own (already-hardened) box styling; only the
   wrapper's sizing/placement differs per context. The combined selector
   `.aips-input.aips-trigger-input` (rather than `.aips-trigger-input`
   alone) is deliberate: it needs strictly higher specificity than the
   plain `.aips-input` rule above to win, since both are !important. */
.aips-trigger-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 220px;
}

.aips-trigger-input-wrap .aips-search-icon {
    z-index: 1;
}

.aips-input.aips-trigger-input {
    cursor: pointer !important;
    padding: 0.45em 0.9em 0.45em 2.1em !important;
    font-size: 0.9em !important;
}

.aips-trigger-input-wrap--inline {
    max-width: 320px;
}

.aips-trigger-input-wrap--floating {
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 999990;
    max-width: 220px;
    border-radius: var(--aips-radius-sm);
    box-shadow: var(--aips-shadow);
}

/* Overlay */

.aips-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.aips-overlay[hidden] {
    display: none;
}

.aips-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: var(--aips-backdrop);
    opacity: 0;
    transition: opacity 160ms ease;
}

.aips-overlay.is-open .aips-overlay-backdrop {
    opacity: 1;
}

.aips-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 6em);
    margin: 3em 1em 0;
    background: var(--aips-surface);
    border-radius: var(--aips-radius);
    box-shadow: var(--aips-shadow);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.aips-overlay.is-open .aips-dialog {
    opacity: 1;
    transform: translateY(0);
}

.aips-dialog-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.9em 1em;
    border-bottom: 1px solid var(--aips-border);
}

.aips-search-form {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.aips-search-icon {
    position: absolute;
    left: 0.7em;
    color: var(--aips-text-muted);
    pointer-events: none;
}

/*
 * !important below on .aips-input/.aips-input-clear/.aips-dialog-close is
 * deliberate, not sloppy: this overlay is injected into arbitrary themes,
 * and generic theme rules like `input[type="text"]` or `button` outrank a
 * single class selector on specificity alone (an attribute selector is
 * worth as much as a class), regardless of source order. Confirmed live:
 * without it, a theme's own input[type="text"] padding silently won and
 * the search icon overlapped the placeholder text.
 */
.aips-input {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0.7em 2.2em !important;
    border: 1px solid var(--aips-border) !important;
    border-radius: var(--aips-radius-sm) !important;
    font-size: 1.05em !important;
    color: var(--aips-text) !important;
    background: var(--aips-surface-muted) !important;
    margin: 0 !important;
}

.aips-input:focus-visible {
    outline: 2px solid var(--aips-accent) !important;
    outline-offset: 1px;
}

.aips-input-clear {
    position: absolute;
    right: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--aips-text-muted) !important;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
}

.aips-input-clear[hidden] {
    display: none;
}

.aips-input-clear:hover,
.aips-input-clear:focus-visible {
    background: var(--aips-border) !important;
}

.aips-dialog-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--aips-text-muted) !important;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
}

.aips-dialog-close:hover,
.aips-dialog-close:focus-visible {
    background: var(--aips-surface-muted) !important;
    color: var(--aips-text) !important;
}

button.aips-dialog-close:focus-visible,
button.aips-input-clear:focus-visible {
    outline: 2px solid var(--aips-accent);
    outline-offset: 1px;
}

/* Thin indeterminate progress bar — the one loading affordance, replacing
   the old badge/banner/shimmer combination. */
.aips-progress {
    position: relative;
    height: 2px;
    background: transparent;
    overflow: hidden;
}

.aips-progress.is-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: var(--aips-accent);
    animation: aips-progress-slide 1.1s ease-in-out infinite;
}

@keyframes aips-progress-slide {
    0% {
        left: -30%;
    }
    60% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.aips-dialog-body {
    padding: 1.25em;
    overflow-y: auto;
}

/* Empty state */

.aips-hint {
    margin: 0 0 1.25em;
    color: var(--aips-text-muted);
}

.aips-chip-group {
    margin-bottom: 1.5em;
}

.aips-chip-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.aips-chip-heading {
    margin: 0 0 0.6em;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--aips-text-muted);
}

.aips-recent-clear {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--aips-text-muted) !important;
    font-size: 0.8em;
    text-decoration: underline;
    cursor: pointer;
}

.aips-recent-clear:hover,
.aips-recent-clear:focus-visible {
    background: transparent !important;
    color: var(--aips-accent) !important;
}

.aips-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.aips-chip {
    padding: 0.45em 0.9em !important;
    margin: 0 !important;
    border: 1px solid var(--aips-border) !important;
    border-radius: 999px !important;
    background: var(--aips-surface-muted) !important;
    color: var(--aips-text) !important;
    font-size: 0.9em;
    cursor: pointer;
    text-align: left;
}

.aips-chip:hover,
.aips-chip:focus-visible {
    background: var(--aips-surface-muted) !important;
    border-color: var(--aips-accent) !important;
    color: var(--aips-accent) !important;
}

/* Status / error */

.aips-status {
    padding: 0.75em 0;
    color: var(--aips-text-muted);
}

.aips-status--error {
    color: #b32d2e;
}

.aips-retry {
    padding: 0 !important;
    margin: 0 0 0 0.5em !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--aips-accent) !important;
    text-decoration: underline;
    cursor: pointer;
}

.aips-retry:hover,
.aips-retry:focus-visible {
    background: transparent !important;
}

/* AI-generated answer summary */

.aips-answer {
    display: flex;
    gap: 0.6em;
    align-items: flex-start;
    background: var(--aips-surface-muted);
    border: 1px solid var(--aips-border);
    border-radius: var(--aips-radius-sm);
    padding: 0.9em 1em;
    margin-bottom: 1.25em;
}

.aips-answer[hidden] {
    display: none;
}

.aips-answer-icon {
    flex: 0 0 auto;
    color: var(--aips-accent);
    margin-top: 0.1em;
    line-height: 0;
}

.aips-answer-body p {
    margin: 0;
    color: var(--aips-text);
}

.aips-answer-label {
    display: block;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--aips-accent);
    margin-bottom: 0.2em;
}

.aips-result-count {
    margin: 0 0 0.9em;
    font-size: 0.85em;
    color: var(--aips-text-muted);
}

.aips-result-count[hidden] {
    display: none;
}

/* Results grid — one shape for both the fast preview and the full result;
   upgrading a card in place never changes the grid's layout. */
.aips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.25em;
}

.aips-product {
    border: 1px solid var(--aips-border);
    border-radius: var(--aips-radius-sm);
    padding: 1em;
}

.aips-image {
    aspect-ratio: 1 / 1;
    background: var(--aips-surface-muted);
    border-radius: var(--aips-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.6em;
}

.aips-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.aips-product-brand {
    display: block;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--aips-text-muted);
    margin-bottom: 0.15em;
}

.aips-product-title {
    font-size: 1em;
    margin: 0 0 0.3em;
}

.aips-product-title a {
    color: inherit;
    text-decoration: none;
}

.aips-product-title a:hover,
.aips-product-title a:focus-visible {
    text-decoration: underline;
}

.aips-product-price {
    font-weight: 600;
    margin-bottom: 0.5em;
}

.aips-product-price del {
    font-weight: 400;
    color: var(--aips-text-muted);
    text-decoration: line-through;
    margin-right: 0.4em;
}

.aips-product-price ins {
    text-decoration: none;
    color: #b32d2e;
}

.aips-product-explanation {
    font-size: 0.9em;
    color: var(--aips-text-muted);
    margin: 0 0 0.75em;
}

.aips-product-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.5em;
}

.aips-stock-badge {
    font-size: 0.78em;
    padding: 0.2em 0.6em;
    border-radius: 999px;
}

.aips-stock-badge--out {
    background: #fbeaea;
    color: #b32d2e;
}

.aips-stock-badge--backorder {
    background: #fff4e0;
    color: #8a5a00;
}

.aips-add-to-cart {
    text-decoration: none;
}

.aips-product-actions .added_to_cart {
    font-size: 0.85em;
}

.aips-product-title a:focus-visible,
.aips-add-to-cart:focus-visible,
.aips-chip:focus-visible {
    outline: 2px solid var(--aips-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .aips-progress.is-active::after,
    .aips-overlay-backdrop,
    .aips-dialog {
        animation: none;
        transition: none;
    }
}

/* Responsive */

@media (max-width: 782px) {
    .aips-dialog {
        margin: 0;
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
    }

    .aips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .aips-dialog-head {
        padding: 0.75em;
    }

    .aips-dialog-body {
        padding: 1em;
    }

    .aips-grid {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .aips-trigger-input-wrap {
        max-width: 150px;
    }
}