/**
 * AI Room Visualizer Styles
 * Inspiration gallery with slideshow and product hotspots
 */

/* Full Page Layout */
.ai-visualize-section {
    /* The site header is 111px on desktop - a 63px top bar plus a 48px nav
       bar - not the 80px this file assumed. Being 31px optimistic pushed the
       bottom of the panel below the fold, and `overflow: hidden` then cut it
       off: the thumbnail strip of generated images simply vanished.

       Declared once as a variable because two rules depended on this number
       and they had drifted apart; the hero's own cap derives from it below,
       so they cannot disagree again. */
    --ai-chrome-offset: 111px;
    /* Page header, hero gap and the thumbnail strip beneath the hero. */
    --ai-inpage-chrome: 200px;

    padding: 1rem 0 1.5rem;
    min-height: calc(100vh - var(--ai-chrome-offset));
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    /* No max-height and no hidden overflow. The panel still fills the screen
       when the content is short, but when it is not the page scrolls instead
       of silently swallowing whatever did not fit. A wrong offset is then a
       little extra scroll rather than content nobody can reach. */
    display: flex;
    flex-direction: column;
}

.ai-visualize-section .container-wide {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 1.5rem;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Page Header */
.ai-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.ai-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ai-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary, #6b7280);
    font-size: 1.3125rem; /* 50% larger */
    text-decoration: none;
    transition: color 0.2s;
}

.ai-back-link:hover {
    color: var(--primary-color, #332917);
}

.ai-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color, #332917);
    margin: 0;
}

.ai-project-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--color-primary-light, #F5F0EB);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--primary-color, #332917);
    margin: 0;
    width: fit-content;
}

.ai-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .ai-page-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .ai-header-left {
        flex-wrap: wrap;
    }

    .ai-header-right {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 1024px) {
    .ai-visualize-section {
        max-height: none;
        overflow: visible;
    }

    .ai-visualize-section .container-wide {
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .ai-page-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ai-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .ai-header-right {
        width: 100%;
        justify-content: flex-start;
    }

    .ai-page-title {
        font-size: 1.25rem;
    }

    .ai-visualize-section .container-wide {
        padding: 0 1rem;
    }

    .ai-credit-display {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .credit-dot {
        width: 8px;
        height: 8px;
    }
}

/* Credit Display */
.ai-credit-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary-light, #F5F0EB);
    border-radius: 24px;
    font-size: 0.875rem;
}

.credit-label {
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
}

.credit-dots {
    display: flex;
    gap: 4px;
}

.credit-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: background 0.2s;
}

.credit-dot-filled {
    background: var(--primary-color, #332917);
}

.credit-count {
    color: var(--primary-color, #332917);
    font-weight: 600;
}

/* Main Container - Two Panel Layout */
.ai-visualize-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .ai-visualize-container {
        grid-template-columns: 1fr 280px;
        gap: 1rem;
    }
}

@media (max-width: 1024px) {
    .ai-visualize-container {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}

/* Left Panel: Display */
.ai-display-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Hero Image Wrapper */
.ai-hero-wrapper {
    position: relative;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-height: 300px;
    /* Derived from the same offset as the section, so the hero can never
       claim more room than the panel actually has. Was a flat
       calc(100vh - 280px), which assumed the same wrong 80px header. */
    max-height: calc(100vh - var(--ai-chrome-offset) - var(--ai-inpage-chrome));
}

/* Empty State */
.ai-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-secondary, #6b7280);
}

.ai-empty-icon {
    margin-bottom: 1rem;
    opacity: 0.4;
}

.ai-empty-icon svg {
    stroke: var(--primary-color, #332917);
    width: 60px;
    height: 60px;
}

.ai-empty-state h3 {
    font-size: 1.875rem; /* 50% larger */
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 0.375rem;
}

.ai-empty-state p {
    max-width: 320px;
    line-height: 1.5;
    font-size: 1.3125rem; /* 50% larger */
}

/* Hero Image */
.ai-hero-image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}

.ai-hero-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Ensure perfect centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hotspots */
.ai-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ai-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    z-index: 10;
}

.ai-hotspot-dot {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid var(--primary-color, #332917);
    border-radius: 50%;
    cursor: pointer;
    animation: pulse 2s infinite;
    transition: transform 0.2s;
}

.ai-hotspot:hover .ai-hotspot-dot {
    transform: scale(1.2);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(51, 41, 23, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(51, 41, 23, 0); }
}

/* Hotspot Card */
.ai-hotspot-card {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 20;
}

.ai-hotspot:hover .ai-hotspot-card {
    opacity: 1;
    visibility: visible;
}

.ai-hotspot-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.ai-hotspot-info {
    padding: 1rem;
}

.ai-hotspot-info h5 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--color-text-primary, #1f2937);
}

.ai-hotspot-info p {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Loading Overlay */
.ai-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 30;
}

.ai-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--primary-color, #332917);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ai-loading-text {
    font-size: 1rem;
    color: var(--color-text-secondary, #6b7280);
}

/* Slideshow Navigation */
.ai-slideshow-nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 15;
}

.ai-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-nav-btn:hover {
    background: var(--primary-color, #332917);
    border-color: var(--primary-color, #332917);
    color: white;
}

.ai-nav-btn svg {
    stroke: currentColor;
}

.ai-nav-counter {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary, #6b7280);
    min-width: 50px;
    text-align: center;
}

/* Load Settings Button - shown when browsing images with arrows */
.ai-load-settings-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-color, #332917);
    z-index: 20;
    transition: all 0.2s ease;
}

.ai-load-settings-btn:hover {
    background: var(--primary-color, #332917);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ai-load-settings-btn svg {
    stroke: currentColor;
    flex-shrink: 0;
}

/* Gallery Strip */
.ai-gallery-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.375rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    background: #f8f9fa;
    border-radius: 8px;
    flex-shrink: 0;
}

.ai-gallery-strip::-webkit-scrollbar {
    height: 6px;
}

.ai-gallery-strip::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.ai-gallery-strip::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.ai-gallery-thumb {
    flex: 0 0 96px;
    height: 72px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.ai-gallery-thumb.active {
    border-color: var(--primary-color, #332917);
}

.ai-gallery-thumb:hover {
    transform: scale(1.05);
}

.ai-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.ai-gallery-thumb:hover .ai-thumb-overlay {
    opacity: 1;
}

.ai-thumb-overlay span {
    font-size: 0.7rem;
    color: white;
    font-weight: 500;
}

/* Right Panel: Controls */
.ai-controls-panel {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 100%;
}

@media (max-width: 1200px) {
    .ai-controls-panel {
        padding: 0.875rem;
    }
}

.ai-generate-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-generate-form .form-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ai-generate-form select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    height: 3.5rem;
}

.ai-generate-form textarea.form-input {
    resize: vertical;
    min-height: 60px;
}

.ai-control-section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary, #1f2937);
}

.ai-control-section label {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--color-text-secondary, #6b7280);
}

.ai-hint {
    font-size: 1.2rem;
    color: var(--color-text-secondary, #9ca3af);
    margin-top: 0.375rem;
    text-align: center;
}

.ai-no-credits {
    font-size: 0.85rem;
    color: #dc2626;
    margin-top: 0.5rem;
}

/* Request more credits - AGTAC064452. Sits directly under the
   "no credits remaining" line, which used to be the end of the road. */
.ai-request-credits-btn {
    margin-top: 0.5rem;
}

.ai-credit-request-msg {
    font-size: 0.85rem;
    color: #15803d;
    margin-top: 0.5rem;
}

.ai-credit-request-msg.is-error {
    color: #dc2626;
}

/* Product Grid */
.ai-product-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    max-width: 100%;
}

/* Selected Product Card with Usage Input */
.ai-selected-product-card {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.ai-selected-product-image {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
}

.ai-selected-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-selected-product-card .ai-remove-product {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: rgba(220, 38, 38, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.ai-selected-product-card:hover .ai-remove-product {
    opacity: 1;
}

.ai-selected-product-card .ai-remove-product svg {
    stroke: white;
}

.ai-selected-product-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-selected-product-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-product-usage-input {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    height: 3rem !important;
    font-size: 1.1rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 3px !important;
    background: white !important;
    color: var(--color-text-primary, #374151) !important;
    transition: border-color 0.2s;
    box-sizing: border-box !important;
}

.ai-product-usage-input:focus {
    outline: none !important;
    border-color: var(--primary-color, #332917) !important;
}

.ai-product-usage-input::placeholder {
    color: #9ca3af;
}

/* Frozen panel -- the controls describe a visualization that already exists.
   `.ai-generate-btn` carries display:flex, which outranks the UA rule for
   [hidden], so the hidden state has to be spelled out here. */
.ai-generate-btn[hidden],
.ai-start-new-btn[hidden],
.ai-frozen-notice[hidden] {
    display: none;
}

.ai-frozen-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    padding: 0.8rem 1rem;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--primary-color, #332917);
    border-radius: 3px;
    background: #fafafa;
}

.ai-frozen-notice svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--primary-color, #332917);
}

.ai-frozen-text {
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--color-text-secondary, #6b7280);
}

/* Frozen controls stay readable -- this is the record of what produced the
   image, not a disabled form the user is being kept out of. */
.ai-generate-form.is-frozen {
    opacity: 0.75;
}

.ai-generate-form.is-frozen .ai-add-product-btn,
.ai-generate-form.is-frozen .ai-remove-product {
    display: none;
}

.ai-generate-form.is-frozen .ai-placement-area-header,
.ai-generate-form.is-frozen .ai-placement-option,
.ai-generate-form.is-frozen .ai-placement-area-leaf {
    cursor: default;
}

.ai-start-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
}

/* Placement picker -- an accordion of the spaces a product is mapped to, in
   place of the free-text usage box. One space opens at a time; the whole list
   scrolls so one heavily-mapped product can never push the form off screen. */
.ai-placement-accordion {
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    background: white;
}

.ai-placement-area + .ai-placement-area {
    border-top: 1px solid #f1f1f1;
}

/* Section header -- the space name, the chosen sub-space when collapsed, and
   the chevron. A button so it is keyboard reachable on its own. */
.ai-placement-area-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-placement-area-header:hover {
    background: #f9fafb;
}

.ai-placement-area-name {
    flex: 1;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary, #374151);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The pick, shown on the header so a collapsed space still reports its state. */
.ai-placement-area-chosen {
    flex-shrink: 0;
    max-width: 45%;
    font-size: 1rem;
    color: var(--primary-color, #332917);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-placement-area.is-open > .ai-placement-area-header .ai-placement-area-chosen {
    display: none;
}

.ai-placement-chevron {
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform 0.2s;
}

.ai-placement-area.is-open > .ai-placement-area-header .ai-placement-chevron {
    transform: rotate(180deg);
}

/* Body -- the selectable sub-spaces. */
.ai-placement-area-body {
    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
    background: #fcfcfd;
}

.ai-placement-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.4rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-placement-option:hover {
    background: #f3f4f6;
}

.ai-placement-option input[type="radio"],
.ai-placement-area-leaf input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--primary-color, #332917);
    cursor: pointer;
}

.ai-placement-label {
    font-size: 1.1rem;
    color: var(--color-text-primary, #374151);
    line-height: 1.3;
}

/* A space with no sub-spaces is the choice itself -- same row rhythm as a
   header, but selectable rather than expandable. */
.ai-placement-area-leaf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-placement-area-leaf:hover {
    background: #f9fafb;
}

.ai-placement-loading {
    margin: 0;
    font-size: 1.1rem;
    color: #9ca3af;
}

/* Legacy styles for backwards compatibility */
.ai-selected-product {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.ai-selected-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-remove-product {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(220, 38, 38, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.ai-selected-product:hover .ai-remove-product {
    opacity: 1;
}

.ai-remove-product svg {
    stroke: white;
}

.ai-product-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.6rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Add Product Button */
.ai-add-product-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem;
    background: var(--color-primary-light, #F5F0EB);
    border: 1.5px dashed var(--primary-color, #332917);
    border-radius: 6px;
    color: var(--primary-color, #332917);
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-add-product-btn:hover {
    background: var(--primary-color, #332917);
    color: white;
    border-style: solid;
}

/* Generate Button */
.ai-generate-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 1.2rem;
}

.ai-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Product Modal */
.modal.ai-product-modal,
.modal.ai-image-modal {
    display: none;
}

.modal.ai-product-modal.active,
.modal.ai-image-modal.active {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-container {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.modal-container.modal-lg {
    max-width: 700px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-secondary, #6b7280);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Product Tabs */
.ai-product-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ai-product-tab {
    flex: 1;
    padding: 0.75rem;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-product-tab.active {
    background: var(--primary-color, #332917);
    color: white;
}

.ai-product-tab-content {
    display: none;
}

.ai-product-tab-content.active {
    display: block;
}

/* Room Select */
.ai-room-select {
    margin-bottom: 1rem;
}

.ai-room-select label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Search Input */
.ai-search-input {
    margin-bottom: 1rem;
}

/* Product List */
.ai-room-products,
.ai-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.ai-product-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-product-item:hover {
    background: #f3f4f6;
}

.ai-product-item.selected {
    border-color: var(--primary-color, #332917);
    background: var(--color-primary-light, #F5F0EB);
}

.ai-product-checkbox {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-product-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    accent-color: var(--primary-color, #332917);
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.ai-product-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

.ai-product-details {
    flex: 1;
    min-width: 0;
}

.ai-product-details h5 {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-product-sku {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #9ca3af);
}

.ai-product-price {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
    margin-top: 0.15rem;
}

/* Browse tab: filter bar */
.ai-browse-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.ai-browse-filters .ai-browse-category {
    flex: 1 1 160px;
    min-width: 140px;
}

.ai-browse-filters .ai-browse-price {
    flex: 0 1 90px;
    width: 90px;
}

.ai-browse-filters .ai-browse-search {
    flex: 1 1 140px;
    min-width: 120px;
}

/* Browse tab: product-card grid (reuses .ai-product-item markup) */
.ai-browse-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    max-height: 340px;
    overflow-y: auto;
}

.ai-browse-results .ai-product-item {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.5rem;
    position: relative;
}

.ai-browse-results .ai-product-item img {
    width: 100%;
    height: 110px;
}

.ai-browse-results .ai-product-checkbox {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 2px;
}

.ai-browse-results .ai-product-details h5 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-loading,
.ai-error {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-secondary, #6b7280);
}

.ai-error {
    color: #dc2626;
}

/* History Page */
.ai-history-section {
    padding: 2rem 0 4rem;
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.ai-history-section .container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

.ai-empty-history {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ai-empty-history .ai-empty-icon {
    margin-bottom: 1.5rem;
    color: #9ca3af;
}

.ai-empty-history h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #374151;
}

.ai-empty-history p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.ai-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.ai-history-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ai-history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ai-history-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: pointer;
}

.ai-history-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ai-history-card:hover .ai-history-image img {
    transform: scale(1.05);
}

.ai-history-image .ai-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 5;
}

.ai-history-card:hover .ai-delete-btn {
    opacity: 1;
}

.ai-history-image .ai-delete-btn:hover {
    background: rgba(185, 28, 28, 1);
}

.ai-history-image .ai-delete-btn svg {
    stroke: white;
}

.ai-history-info {
    padding: 1rem;
}

.ai-history-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ai-history-theme {
    font-weight: 500;
    color: #374151;
}

.ai-history-date {
    font-size: 0.75rem;
    color: #9ca3af;
}

.ai-history-products {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ai-product-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: #f3f4f6;
    border-radius: 4px;
    color: #6b7280;
}

/* Image Modal */
.ai-image-modal .modal-container {
    max-width: 90vw;
    max-height: 90vh;
    background: transparent;
}

.ai-image-modal .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ai-image-modal .modal-body img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.ai-image-modal .ai-slideshow-nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.5rem 1rem;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.ai-image-modal .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-visualize-container {
        gap: 1rem;
    }

    .ai-controls-panel {
        position: static;
        padding: 1rem;
    }

    .ai-hero-wrapper {
        min-height: 300px;
    }

    .ai-hotspot-card {
        width: 200px;
    }

    .ai-history-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }

    .ai-history-section .container-wide {
        padding: 0 1rem;
    }
}

/* ===========================
   Slideshow Button
   =========================== */
.btn-slideshow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    background: var(--grey-900, #1f2937);
    color: #FFF;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-slideshow:hover {
    background: var(--primary-color, #332917);
    transform: scale(1.02);
}

.btn-slideshow svg {
    flex-shrink: 0;
}

/* ===========================
   Fullscreen Slideshow Modal
   =========================== */
.ai-slideshow-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-slideshow-modal.active {
    display: block;
    opacity: 1;
}

.ai-slideshow-modal-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Header */
.ai-slideshow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ai-slideshow-header h2 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.ai-slideshow-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.ai-slideshow-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Main Content Area */
.ai-slideshow-main {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* Image Area */
.ai-slideshow-image-area {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ai-slideshow-image-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-slideshow-image-wrapper img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 220px);
    object-fit: contain;
    border-radius: 8px;
}

/* Navigation Arrows for Fullscreen Slideshow */
.ai-slideshow-modal .ai-slideshow-nav {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    box-shadow: none;
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: background 0.3s ease;
    z-index: 5;
}

.ai-slideshow-modal .ai-slideshow-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ai-slideshow-modal .ai-slideshow-prev {
    left: 20px;
    right: auto;
}

.ai-slideshow-modal .ai-slideshow-next {
    right: 20px;
    left: auto;
}

/* Products Sidebar */
.ai-slideshow-sidebar {
    flex: 0 0 350px;
    width: 350px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-slideshow-sidebar-title {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-slideshow-products {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ai-no-products {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 2rem;
    font-size: 0.875rem;
}

/* Product Card in Slideshow */
.ai-slideshow-product-card {
    background: #FFF;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: box-shadow 0.3s ease;
}

.ai-slideshow-product-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ai-slideshow-product-image {
    flex: 0 0 30%;
    width: 30%;
    aspect-ratio: 1;
    overflow: hidden;
}

.ai-slideshow-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-slideshow-product-info {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-slideshow-product-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-heading, #1f2937);
    margin: 0 0 4px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-slideshow-product-usage {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.ai-slideshow-product-actions {
    display: flex;
    gap: 6px;
}

.ai-slideshow-product-actions .btn {
    font-size: 11px;
    padding: 6px 10px;
}

/* Thumbnails Strip */
.ai-slideshow-thumbnails {
    height: 100px;
    min-height: 80px;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    overflow-x: auto;
}

.ai-slideshow-thumbnails-inner {
    display: flex;
    gap: 10px;
    height: 100%;
    align-items: center;
}

.ai-slideshow-thumbnail {
    flex-shrink: 0;
    width: 100px;
    height: 75px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.ai-slideshow-thumbnail:hover {
    opacity: 0.8;
}

.ai-slideshow-thumbnail.active {
    opacity: 1;
    border-color: #FFF;
}

.ai-slideshow-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slideshow Mobile Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    .ai-slideshow-sidebar {
        flex: 0 0 280px;
        width: 280px;
    }

    .ai-slideshow-product-name {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .ai-slideshow-sidebar {
        display: none;
    }

    .ai-slideshow-image-area {
        width: 100%;
        padding: 10px;
    }

    .ai-slideshow-modal .ai-slideshow-nav {
        width: 40px;
        height: 40px;
    }

    .ai-slideshow-modal .ai-slideshow-prev {
        left: 10px;
    }

    .ai-slideshow-modal .ai-slideshow-next {
        right: 10px;
    }

    .ai-slideshow-thumbnail {
        width: 70px;
        height: 52px;
    }

    .ai-slideshow-image-wrapper img {
        max-height: calc(100vh - 180px);
    }

    .ai-slideshow-header {
        padding: 10px 15px;
    }

    .ai-slideshow-header h2 {
        font-size: 1rem;
    }
}

/* ===========================
   Toast Notifications
   =========================== */
.ai-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #1f2937;
    color: white;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 10000;
    max-width: 400px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ai-toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.ai-toast-hiding {
    transform: translateX(120%);
    opacity: 0;
}

.ai-toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-toast-icon svg {
    width: 22px;
    height: 22px;
}

.ai-toast-message {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.ai-toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-toast-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Toast Types */
.ai-toast-error {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.ai-toast-error .ai-toast-icon svg {
    stroke: white;
}

.ai-toast-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.ai-toast-success .ai-toast-icon svg {
    stroke: white;
}

.ai-toast-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.ai-toast-warning .ai-toast-icon svg {
    stroke: white;
}

.ai-toast-info {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.ai-toast-info .ai-toast-icon svg {
    stroke: white;
}

/* Toast Mobile */
@media (max-width: 480px) {
    .ai-toast {
        left: 15px;
        right: 15px;
        max-width: none;
        transform: translateY(-120%);
    }

    .ai-toast-visible {
        transform: translateY(0);
    }

    .ai-toast-hiding {
        transform: translateY(-120%);
    }
}

/* ===========================
   Confirmation Dialog
   =========================== */
.ai-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(4px);
}

.ai-confirm-overlay.ai-confirm-visible {
    opacity: 1;
}

.ai-confirm-dialog {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 420px;
    width: 90%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.2s ease;
    overflow: hidden;
}

.ai-confirm-visible .ai-confirm-dialog {
    transform: scale(1) translateY(0);
}

.ai-confirm-header {
    padding: 20px 24px 0;
}

.ai-confirm-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.ai-confirm-body {
    padding: 16px 24px;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ai-confirm-body p {
    margin: 0 0 12px;
}

.ai-confirm-body strong {
    color: #1f2937;
}

.ai-confirm-details {
    margin-top: 16px;
}

.ai-confirm-products-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    max-height: 150px;
    overflow-y: auto;
}

.ai-confirm-product {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: #f3f4f6;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #374151;
}

.ai-confirm-product img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.ai-confirm-credit-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #92400e;
}

.ai-confirm-credit-info svg {
    flex-shrink: 0;
    stroke: #d97706;
}

.ai-confirm-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    justify-content: flex-end;
}

.ai-confirm-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.ai-confirm-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.ai-confirm-cancel:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.ai-confirm-ok {
    background: var(--primary-color, #332917);
    color: white;
}

.ai-confirm-ok:hover {
    background: #1f1a0f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(51, 41, 23, 0.3);
}

/* Confirm Dialog Mobile */
@media (max-width: 480px) {
    .ai-confirm-dialog {
        width: 95%;
        max-width: none;
    }

    .ai-confirm-footer {
        flex-direction: column-reverse;
    }

    .ai-confirm-btn {
        width: 100%;
        text-align: center;
    }
}


/* ==================================================================
   Phase 1 — dropdown text visibility. Same fix as AVM. Scoped to the
   Visualize section so other .form-input selects on the site are
   untouched. */
.ai-visualize-section select.form-input,
.ai-product-modal select.form-input {
    height: auto;
    min-height: 40px;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.ai-visualize-section select.form-input option {
    font-size: 14px;
    padding: 6px 8px;
    white-space: normal;
}


/* Phase 5 — Full-screen visualizer mode. See AVM for rationale. */
body.ai-viz-fullscreen .header,
body.ai-viz-fullscreen .site-footer,
body.ai-viz-fullscreen footer.footer,
body.ai-viz-fullscreen .sticky-section-heading,
body.ai-viz-fullscreen .mega-menu {
    display: none !important;
}
body.ai-viz-fullscreen .ai-visualize-section {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: #fff;
    padding: 16px 16px 24px;
    overflow: auto;
}
body.ai-viz-fullscreen .ai-visualize-section .container,
body.ai-viz-fullscreen .ai-visualize-section .container-wide {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
#aiFullscreenToggle { cursor: pointer; }
#aiFullscreenToggle[aria-pressed="true"] .ai-fs-icon-expand { display: none; }
#aiFullscreenToggle[aria-pressed="true"] .ai-fs-icon-collapse { display: inline-block !important; }

/* ==================================================================
   Phase 6 — Configurable history-gallery layout.
   Theme.json → `ai_visualize.history_layout` = "horizontal" | "vertical"
   Controller passes to template; template emits data-history-layout on
   .ai-visualize-container. UVW template restructures so .ai-gallery-sidebar
   is a direct child of the container, letting CSS control layout.
   ================================================================== */

/* Horizontal (UVW default): strip spans the bottom, thumbs flow as a row. */
.ai-visualize-container[data-history-layout="horizontal"] {
    grid-template-columns: 1fr 320px;
    grid-template-rows: 1fr auto;
}
.ai-visualize-container[data-history-layout="horizontal"] .ai-display-panel {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.ai-visualize-container[data-history-layout="horizontal"] .ai-controls-panel {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}
.ai-visualize-container[data-history-layout="horizontal"] .ai-gallery-sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    max-height: 96px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px;
}
.ai-visualize-container[data-history-layout="horizontal"] .ai-gallery-sidebar .ai-gallery-strip {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

/* Vertical variant: gallery becomes a left rail, display + controls shift right. */
.ai-visualize-container[data-history-layout="vertical"] {
    grid-template-columns: 120px 1fr 320px;
    grid-template-rows: 1fr;
}
.ai-visualize-container[data-history-layout="vertical"] .ai-gallery-sidebar {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}
.ai-visualize-container[data-history-layout="vertical"] .ai-gallery-sidebar .ai-gallery-strip {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ai-visualize-container[data-history-layout="vertical"] .ai-display-panel {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.ai-visualize-container[data-history-layout="vertical"] .ai-controls-panel {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
@media (max-width: 1200px) {
    .ai-visualize-container[data-history-layout="horizontal"] {
        grid-template-columns: 1fr 280px;
    }
    .ai-visualize-container[data-history-layout="vertical"] {
        grid-template-columns: 100px 1fr 280px;
    }
}
@media (max-width: 1024px) {
    .ai-visualize-container[data-history-layout="horizontal"],
    .ai-visualize-container[data-history-layout="vertical"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .ai-visualize-container[data-history-layout="horizontal"] .ai-display-panel,
    .ai-visualize-container[data-history-layout="vertical"] .ai-display-panel,
    .ai-visualize-container[data-history-layout="horizontal"] .ai-controls-panel,
    .ai-visualize-container[data-history-layout="vertical"] .ai-controls-panel,
    .ai-visualize-container[data-history-layout="horizontal"] .ai-gallery-sidebar,
    .ai-visualize-container[data-history-layout="vertical"] .ai-gallery-sidebar {
        grid-column: auto;
        grid-row: auto;
    }
    .ai-visualize-container[data-history-layout="vertical"] .ai-gallery-sidebar .ai-gallery-strip {
        flex-direction: row;
    }
}

/* ==================================================================
   Icon-based aspect-ratio selector (replaces the old <select>).
   3 native radio buttons visually presented as pill-cards with a
   proportional rectangle icon. Uses `:has(input:checked)` to style
   the selected card without any JS.
   ================================================================== */
.ai-ratio-group {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.ai-ratio-option {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 16px 8px 14px;
    background: var(--color-white, #fff);
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    cursor: pointer;
    color: var(--color-text-light, #6b6d85);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease;
}
.ai-ratio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.ai-ratio-option:hover {
    border-color: var(--color-primary, #332817);
    background: rgba(var(--color-primary-rgb, 51, 40, 23), 0.04);
    transform: translateY(-1px);
}
.ai-ratio-option:has(input:checked) {
    border-color: var(--color-primary, #332817);
    background: rgba(var(--color-primary-rgb, 51, 40, 23), 0.07);
    color: var(--color-primary, #332817);
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb, 51, 40, 23), 0.10);
}
.ai-ratio-option:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 51, 40, 23), 0.15);
}

/* Fixed-height slot so the three proportional icons share one optical centre line */
.ai-ratio-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}
.ai-ratio-icon {
    display: block;
    background: currentColor;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.18s ease;
}
.ai-ratio-option:hover .ai-ratio-icon,
.ai-ratio-option:has(input:checked) .ai-ratio-icon {
    opacity: 1;
}
.ai-ratio-icon-square    { width: 26px; height: 26px; }
.ai-ratio-icon-landscape { width: 30px; height: 20px; }
.ai-ratio-icon-portrait  { width: 20px; height: 28px; }
.ai-ratio-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
}

/* "Specify other" text input styling — squarer border-radius to
   visually distinguish it from the softened dropdowns above, hinting
   that this is a manual/custom entry rather than a selection. */
.ai-visualize-section .ai-other-input,
.ai-product-modal .ai-other-input {
    border-radius: 3px !important;
}

/* Edit an existing render - AGTAC064577.
   Sits in the thumbnail overlay next to the theme name. Only rendered when
   the configured provider can take a reference image. */
.ai-thumb-edit {
    margin-left: auto;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.ai-thumb-edit:hover {
    background: #fff;
}

/* Shown instead of the buttons when the model cannot edit an image. */
.ai-gallery-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}