/* Generate Image V2 Page Styles */
/* Modal-based selection pattern, mirrored from gen-video.css */
/* Uses Honeybot CSS variables from variables.css */

/* ===== Page Layout: Side-by-side on Desktop ===== */
.gi-page-layout {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    body:has(.gi-section) {
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
    }

    .gi-section {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--gv-header-offset, 56px));
        height: calc(100dvh - var(--gv-header-offset, 56px));
        overflow: hidden;
        padding-bottom: 0;
    }

    .gi-section > .container {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .gi-section .generate-image-tabs-list {
        flex-shrink: 0;
    }

    .gi-page-layout {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 2rem;
        flex: 1;
        min-height: 0;
    }

    .gi-content-container {
        flex: 1;
        min-width: 0;
        align-items: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gi-page-layout > .generate-right-side {
        flex: 1;
        min-width: 0;
        max-width: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8rem;
    }

    .gi-filter-section {
        flex: 1;
        min-width: 0;
        max-width: none;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8rem;
    }

    .gi-page-layout .gi-image-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
    }

    .gi-content-wrapper {
        max-width: none;
    }
}

@media (min-width: 1280px) {
    .gi-page-layout .gi-image-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== Mobile / tablet (<1024px): fix iOS Safari touch-scroll ===== */
/* ROOT CAUSE: the global `body { display:flex; flex-direction:column }`
   (base/typography.css) + a `min-height:100vh/100dvh` makes a long, overflowing
   page unscrollable by touch on iOS Safari. The page is geometrically scrollable
   (desktop + programmatic scroll reach the bottom) but finger-drag does nothing,
   and content can be clipped above the viewport so the top tabs / close icon are
   unreachable. This is the documented iOS flexbox + viewport-height scroll bug
   (see webkit / css-tricks). The gen-video page avoids it because `.gv-section`
   carries `min-h-screen`; the gi-section had no min-height.
   FIX: on this page, take the body OUT of the flex context and let it scroll as a
   normal block document. `!important` guarantees we beat the global `body{flex}`.
   `-webkit-fill-available` gives iOS a correct min-height without the 100vh
   toolbar bug. Targets the `gi-page` body class (set via {% block body_class %})
   so it also works on iOS < 15.4 (no `:has()` support); `:has()` kept as fallback.
   Scoped to <1024px so the desktop locked/internal-scroll layout above is untouched. */
@media (max-width: 1023px) {
    body.gi-page,
    body:has(.gi-section) {
        display: block !important;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: 100dvh;
        height: auto !important;
        overflow: visible !important;
        /* Kill sideways drift/slack: nothing on this page should ever pan
           horizontally. `clip` (unlike `hidden`) doesn't turn the body into a
           scroll container, so the native document scroller stays intact. */
        overflow-x: clip !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
    }

    /* The page section must not impose its own height/overflow on mobile so the
       document is the single, native scroller. */
    body.gi-page .gi-section,
    body:has(.gi-section) .gi-section {
        height: auto !important;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        overflow: visible !important;
    }

    /* Modal-open scroll lock. The `overflow: visible !important` above defeats
       both `body.gi-helper-open { overflow: hidden }` and the inline
       `body.style.overflow = 'hidden'` the modal JS sets, so without this the
       page keeps scrolling (and rubber-banding) underneath every modal on
       mobile — visible as drift through the translucent backdrop. iOS also
       ignores `overflow: hidden` for touch scroll, so the lock uses
       `position: fixed` + a JS-set negative `top` (scroll offset preserved and
       restored on unlock by `lockBodyScroll()`/`unlockBodyScroll()` in
       generate-image-script.js). Must out-specify the rule above. */
    body.gi-page.gi-scroll-lock,
    body:has(.gi-section).gi-scroll-lock {
        position: fixed !important;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden !important;
    }
}

/* Content Container */
.gi-content-container {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gi-content-wrapper {
    width: 100%;
    max-width: 50rem;
    padding: 0 0.5rem;
}

@media (max-height: 920px) {
    .gi-content-wrapper {
        max-width: 40rem;
    }
}

@media (max-height: 840px) {
    .gi-content-wrapper {
        max-width: 32rem;
    }
}

/* ===== Selection Grid ===== */
.gi-selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* ===== Select Box ===== */
.gi-select-box {
    position: relative;
    background: hsl(var(--white));
    border: 1px dashed var(--gray);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    aspect-ratio: 3/4;
}

.gi-select-box:hover {
    border-color: var(--graycolor);
    background: var(--light-bg);
}

.gi-select-box:focus {
    outline: none;
    border-color: var(--purple-light);
    box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
}

/* Purple outline = the only visual signal that the box has a selection */
.gi-select-box.has-selection {
    border-color: var(--purple-light);
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
}

/* ===== Box Close Button ===== */
.gi-box-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--dark-shadow);
    border: none;
    border-radius: 50%;
    color: hsl(var(--static-white));
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}

.gi-select-box.has-selection .gi-box-close {
    display: flex;
}

.gi-select-box.has-selection:hover .gi-box-close {
    opacity: 1;
}

.gi-box-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.gi-box-close svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* ===== Box Selection Checkmark ===== */
/* Shown only when the box has a selection — a large centered check signals
   that options for this part of the image are locked in. */
.gi-box-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.5rem;
    height: 3.5rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    color: hsl(var(--static-white));
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.gi-select-box.has-selection .gi-box-check {
    display: flex;
}

.gi-box-check svg {
    width: 2rem;
    height: 2rem;
}

/* ===== Box Placeholder ===== */
.gi-box-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
}

.gi-box-placeholder svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--gray);
    margin-bottom: 0.5rem;
}

.gi-box-placeholder .gi-gradient-icon {
    width: 3rem;
    height: 3rem;
    color: unset;
}

/* Placeholder image — fills the box; labels overlay on top */
.gi-box-placeholder {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    padding: 0;
    height: 100%;
    width: 100%;
}

.gi-box-placeholder-img,
.gi-box-placeholder-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.gi-box-placeholder-video {
    z-index: 1;
    pointer-events: none;
    /* iOS Safari lets accelerated video paint past a rounded `overflow:hidden`
       ancestor while scrolling (corner/edge bleed). Rounding the video itself
       and promoting it to its own layer keeps it inside the box. */
    border-radius: inherit;
    transform: translateZ(0);
}

/* Selected-bot portrait in the Appearance box — keep the face in frame. */
.gi-box-placeholder-bot {
    object-position: top;
}

.gi-box-placeholder-fallback {
    z-index: 0;
}

.gi-box-placeholder .gi-box-label,
.gi-box-placeholder .gi-box-sublabel {
    position: relative;
    z-index: 1;
    color: var(--staticWhite, #fff);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.gi-box-placeholder .gi-box-label {
    margin-top: auto;
    padding: 0.5rem 0.75rem 0;
    font-weight: 600;
}

.gi-box-placeholder .gi-box-sublabel {
    padding: 0 0.75rem 0.5rem;
    margin-bottom: 0.25rem;
}

/* Appearance box has solid purple border (primary/required) */
.gi-appearance-box {
    border-color: var(--purple-light);
    border-style: solid;
}

.gi-box-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--title);
}

.gi-box-sublabel {
    font-size: 0.75rem;
    color: var(--gray);
    margin-top: 0.125rem;
}

/* Placeholder stays visible even when something is selected — the only
   visual cue is the purple .has-selection border on .gi-select-box itself. */

/* ===== Box Summary (thumbnail grid inside box) ===== */
.gi-box-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 0.375rem;
    width: 100%;
    height: 100%;
    align-content: flex-start;
}

.gi-box-summary-item {
    position: relative;
    width: calc(33.333% - 2px);
    aspect-ratio: 1;
    border-radius: 0.25rem;
    overflow: hidden;
    background: var(--lightgray);
}

.gi-box-summary-item.gi-box-summary-portrait {
    aspect-ratio: 2/3;
}

.gi-box-summary-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gi-box-summary-label {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 8px);
    padding: 2px 4px;
    font-size: 0.75rem;
    font-weight: 400;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .gi-box-summary-label {
        display: none;
    }
}

/* Text-only summary items (for items with no images like emotions, scenes) */
.gi-box-summary-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.375rem;
    width: 100%;
    height: 100%;
    align-content: center;
    justify-content: center;
}

.gi-box-summary-tag {
    font-size: 0.625rem;
    background: var(--light-bg);
    border: 1px solid var(--lightgray);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    color: var(--body);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bot selected state (full image in box with name overlay) */
.gi-box-bot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.gi-box-bot-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, var(--dark-shadow));
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--static-white));
    text-align: center;
}

/* ===== Modal System ===== */
.gi-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
}

.gi-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gi-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.gi-modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    height: 80vh;
    background: hsl(var(--white));
    border: 1px solid var(--lightgray);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lightgray);
    flex-shrink: 0;
}

.gi-modal-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2.5rem;
    padding: 0 1rem;
    background: var(--transparent-light, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--lightgray, #2a2a2a);
    border-radius: 9999px;
    color: var(--body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.gi-modal-back:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--body);
}

.gi-modal-back svg {
    width: 1.1rem;
    height: 1.1rem;
}

.gi-modal-title,
.gi-subcategory-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--title);
    margin: 0;
    flex: 1;
    text-align: center;
}

.gi-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: var(--graycolor);
    cursor: pointer;
    transition: all 0.2s;
}

.gi-modal-close:hover {
    background: var(--transparent-light);
    color: var(--body);
}

.gi-modal-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Header actions group (Reset + close) on the right of Level 1 modal headers */
.gi-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gi-modal-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2rem;
    padding: 0 0.85rem;
    background: var(--transparent-light, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--lightgray);
    border-radius: 9999px;
    color: var(--body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.gi-modal-reset:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--body);
}

.gi-modal-reset svg {
    width: 1rem;
    height: 1rem;
}

/* Done button (Level 1 header + Level 2 multi-select) — explicit confirm
   affordance, shown when there is at least one selection. White-on-black like
   the Create CTA; the pink/primary tint is reserved for badges, checkmarks and
   negative actions. */
.gi-modal-done,
.gi-subcategory-done {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 1.1rem;
    background: hsl(var(--static-white));
    border: 1px solid hsl(var(--static-white));
    border-radius: 9999px;
    color: hsl(var(--static-black));
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

/* Light mode: the modal surface is white — invert the pill so it stays visible. */
:root:not(.dark) .gi-modal-done,
:root:not(.dark) .gi-subcategory-done {
    background: hsl(var(--static-black));
    border-color: hsl(var(--static-black));
    color: hsl(var(--static-white));
}

.gi-modal-done:hover,
.gi-subcategory-done:hover { opacity: 0.9; }
.gi-modal-done:active,
.gi-subcategory-done:active { transform: scale(0.97); }
.gi-modal-done[hidden],
.gi-subcategory-done[hidden] { display: none; }

/* Dice button (Level 1 header) — random selection for the whole model.
   Uses the dice image art ("Choose for me" icon), no chrome. */
.gi-modal-dice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.gi-modal-dice:hover {
    transform: rotate(-12deg) scale(1.08);
}

.gi-modal-dice:active {
    transform: rotate(-12deg) scale(0.96);
}

.gi-modal-dice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.4rem;
    pointer-events: none;
    /* The source dice art has a very dark maroon background; brighten it so the
       small header icon reads clearly. */
    filter: brightness(1.55) contrast(1.05);
}

.gi-modal-dice:hover img {
    filter: brightness(1.75) contrast(1.05);
}

/* Multi-select count badge ("n/MAX") next to the Level-2 title. */
.gi-subcategory-count {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--transparent-light, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--lightgray);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--body);
    vertical-align: middle;
}

/* Helper line under the Level-2 item grid for multi-select categories. */
.gi-multiselect-hint {
    flex-shrink: 0;
    margin: 0;
    padding: 0.5rem 1.25rem 0.85rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray);
}

.gi-modal-body {
    flex: 1;
    overflow-y: auto;
    /* Don't chain scroll to the page when the body hits its bounds. */
    overscroll-behavior: contain;
    padding: 0.75rem 1.25rem 1rem;
}

/* ===== Modal Tabs (Gallery / Honeybot / Create New) ===== */
.gi-modal-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 0.25rem;
    flex-shrink: 0;
}

/* "OR" separator between the two appearance tabs — signals the two are
   mutually exclusive paths, not both. */
.gi-modal-tabs-or {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: hsl(var(--static-white));
    text-transform: uppercase;
}

/* Light mode: the modal surface is white, so the fixed-white OR would vanish. */
:root:not(.dark) .gi-modal-tabs-or {
    color: hsl(var(--static-black));
}

.gi-modal-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--lightgray);
    border-radius: 0.375rem;
    color: var(--graycolor);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.gi-modal-tab:hover {
    border-color: var(--graycolor);
    color: var(--body);
}

.gi-modal-tab.active {
    background: var(--graycolor);
    color: white;
    border-color: transparent;
}

/* ===== Category Grid (Level 1 modal) ===== */
.gi-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.gi-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--light-bg);
    border: 1px solid var(--lightgray);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.gi-category-item:hover {
    border-color: var(--graycolor);
    transform: translateY(-1px);
}

.gi-category-item.selected {
    border-color: var(--purple-light);
    box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
    position: relative;
}

.gi-category-item.selected::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: var(--purple-light);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.gi-category-item-icon {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--lightgray);
}

.gi-category-item-icon {
    position: relative;
}

/* Two-selection crossfade slideshow: each pick shows for 4s, loops.
   Total cycle is 8s; each layer is visible 4s then fades over ~0.4s. */
.gi-category-item-icon--slideshow {
    overflow: hidden;
}

.gi-category-item-icon--slideshow .gi-category-item-icon-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0.375rem;
    animation: gi-category-icon-slide 8s ease-in-out infinite;
}

.gi-category-item-icon--slideshow .gi-category-item-icon-slide--a {
    animation-delay: 0s;
}

.gi-category-item-icon--slideshow .gi-category-item-icon-slide--b {
    animation-delay: -4s;
}

@keyframes gi-category-icon-slide {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

.gi-category-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0.375rem;
}

.gi-category-item-info {
    text-align: center;
    min-width: 0;
}

.gi-category-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--title);
}

/* Blocked category (mutual exclusion: position <-> fetish) */
.gi-category-item.gi-category-blocked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.gi-category-blocked-badge {
    font-size: 0.6875rem;
    color: #ef4444;
    font-weight: 500;
}

/* Premium-locked category (free user) */
.gi-category-item.gi-category-premium-locked {
    opacity: 0.5;
    cursor: not-allowed;
}

/* At selection limit — dim unselected items */
.gi-modal-item.gi-at-limit,
.gi-modal-btn-item.gi-at-limit {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.gi-category-item .gi-premium-badge {
    position: static;
    display: inline-block;
}

.gi-category-item-arrow {
    display: none;
}

/* ===== Subcategory Modal Grid (Level 2) ===== */
.gi-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .gi-modal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gi-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

.gi-modal-item {
    display: flex;
    flex-direction: column;
    background: var(--light-bg);
    border: 1px solid var(--lightgray);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.gi-modal-item:hover {
    border-color: var(--graycolor);
    transform: translateY(-2px);
}

.gi-modal-item.selected {
    border-color: var(--purple-light);
    box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
}

/* Checkmark overlay for selected items */
.gi-modal-item.selected::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: var(--purple-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.gi-modal-item-image {
    position: relative;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center top;
    background-color: var(--light-bg);
}

/* Portrait aspect ratio for categories with portrait images */
.gi-modal-grid-portrait .gi-modal-item-image {
    aspect-ratio: 2/3;
}

.gi-modal-item-name {
    padding: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--body);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bot items in modal */
.gi-modal-bot-item {
    position: relative;
}

.gi-modal-bot-item .gi-modal-item-image {
    aspect-ratio: 3/4;
}

.gi-modal-bot-item .gi-modal-item-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    padding: 1rem 0.5rem 0.5rem;
    color: hsl(var(--static-white));
}

/* Gallery image items in modal */
.gi-modal-gallery-item .gi-modal-item-image {
    aspect-ratio: 3/4;
}

/* ===== Button-style items (emotions, scenes, accessories) ===== */
.gi-modal-btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gi-modal-btn-item {
    padding: 0.5rem 1rem;
    background: var(--light-bg);
    border: 1px solid var(--lightgray);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    color: var(--body);
    white-space: nowrap;
}

.gi-modal-btn-item:hover {
    border-color: var(--graycolor);
}

.gi-modal-btn-item.selected {
    background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
    background-size: 300% 100%;
    color: hsl(var(--static-white));
    border-color: transparent;
}

/* ===== Color Picker (clothing colors) ===== */
.gi-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--lightgray);
}

.gi-color-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--lightgray);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.gi-color-swatch:hover {
    transform: scale(1.1);
}

.gi-color-swatch.selected {
    border-color: var(--purple-light);
    box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.3);
}

.gi-color-swatch.selected::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid hsl(var(--white));
}

/* ===== Premium Lock ===== */
.gi-modal-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.gi-modal-item.locked:hover {
    transform: none;
    border-color: var(--lightgray);
}

.gi-premium-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6rem;
    background: #ef4444;
    color: hsl(var(--static-white));
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* ===== Custom Prompt ===== */
.gi-custom-prompt {
    grid-column: 1 / -1;
    min-height: 0;
}

.gi-prompt-box {
    position: relative;
    display: flex;
    flex-direction: column;
    background: hsl(var(--white));
    border: 1px dashed var(--gray);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.gi-prompt-box:hover {
    background: var(--light-bg);
}

.gi-prompt-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gi-prompt-placeholder svg {
    width: 1rem;
    height: 1rem;
    color: var(--gray);
    margin-bottom: 0.5rem;
}

.gi-prompt-placeholder .title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--title);
}

.gi-prompt-sublabel {
    font-size: 0.75rem;
    color: var(--gray);
}

.gi-prompt-box.expanded {
    border-style: solid;
    border-color: var(--purple-light);
    background: var(--light-bg);
    /* Still a button — the whole box always opens the prompt-helper modal. */
    cursor: pointer;
}

.gi-prompt-box.expanded .gi-prompt-placeholder {
    display: none;
}

.gi-prompt-textarea {
    width: 100%;
    /* Read-only preview of the prompt: editing happens in the helper modal.
       Fixed height — long prompts scroll inside the box instead of growing it.
       Tap/click bubbles up to the box (which opens the modal); a scroll
       gesture just scrolls; readonly keeps the mobile keyboard closed. */
    height: 80px;
    resize: none;
    overflow-y: auto;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    /* Right padding leaves room for the reset (×) button in the top-right. */
    padding: 0.75rem 3rem 0.75rem 0.75rem;
    color: var(--body);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    box-sizing: border-box;
}

/* Explicit (higher-specificity) re-enable: an earlier iteration shipped
   `pointer-events: none` on the preview textarea; this guarantees scrolling
   works even against a stale compiled bundle. */
.gi-prompt-box .gi-prompt-textarea {
    pointer-events: auto;
}

.gi-prompt-textarea::placeholder {
    color: var(--gray);
}

.gi-prompt-error {
    font-size: 0.75rem;
    color: #ef4444;
    padding: 0.25rem 0.75rem 0.5rem;
}

.gi-prompt-box.invalid .gi-prompt-textarea {
    border-color: #ef4444;
}

/* Prompt blocked when position or fetish selected */
.gi-prompt-box.gi-prompt-blocked {
    opacity: 0.5;
    pointer-events: none;
}

.gi-prompt-blocked-msg {
    font-size: 0.75rem;
    color: var(--gray);
    text-align: center;
    padding: 0.375rem 0.75rem 0.5rem;
    margin: 0;
}

/* Prompt Info Button */
.gi-prompt-info-btn {
    position: absolute;
    top: -0.625rem;
    right: -0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--white));
    box-shadow: 0 0 0 2px hsl(var(--white));
    border: none;
    color: var(--gray);
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition: color 0.2s;
    border-radius: 50%;
}

.gi-prompt-info-btn:hover {
    color: var(--purple-light);
}

.gi-prompt-info-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Prompt Tooltip */
.gi-prompt-tooltip {
    display: none;
    position: absolute;
    top: 1rem;
    right: 0.25rem;
    width: 16rem;
    background: hsl(var(--white));
    border: 1px solid var(--lightgray);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 20;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--body);
}

.gi-prompt-tooltip.visible {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .gi-prompt-info-btn:hover + .gi-prompt-tooltip,
    .gi-prompt-tooltip:hover {
        display: block;
    }
}

.gi-prompt-tooltip-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--title);
}

.gi-prompt-tooltip ul {
    list-style: disc;
    padding-left: 1rem;
    margin: 0 0 0.5rem 0;
}

.gi-prompt-tooltip ul li {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.25rem;
}

.gi-prompt-tooltip-warning {
    margin: 0;
    padding-top: 0.375rem;
    border-top: 1px solid var(--lightgray);
    color: var(--gray);
    font-style: italic;
    font-size: 0.875rem;
}

/* ===== Bottom Controls ===== */
.gi-bottom-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.gi-generate-btn {
    flex: 1;
    padding: 0.625rem 1rem;
    background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
    border: none;
    border-radius: 0.375rem;
    color: hsl(var(--static-white));
    font-size: 0.875rem;
    font-weight: 500;
    cursor: not-allowed;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gi-wand-icon {
    margin-right: 0.625rem;
    flex-shrink: 0;
}

.gi-generate-btn:not(:disabled) {
    cursor: pointer;
    opacity: 1;
}

.gi-generate-btn:not(:disabled):hover {
    opacity: 0.9;
}

a.gi-generate-btn {
    text-decoration: none;
    gap: 0.5rem;
}

.gi-try-free-badge,
.gi-free-badge {
    border: 1px solid hsl(var(--static-white));
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ===== Progress Bar on Generate Button ===== */
.gi-generate-btn.gi-progress-active {
    position: relative;
    overflow: hidden;
    background: var(--purple-light) !important;
    background-image: none !important;
    opacity: 1 !important;
}

.gi-generate-btn.gi-progress-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
    border-radius: inherit;
    transition: width 0.3s ease-out;
    z-index: 0;
}

.gi-generate-btn.gi-progress-complete::before {
    transition: width 0.4s ease-in;
}

.gi-btn-content {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* The label must never wrap ("Generate / Image" on two lines next to the
       Try-for-free badge on mobile). */
    white-space: nowrap;
}

/* Small phones: drop the wand icon to save width so the Generate label
   (+ Try-for-free badge for anon) and the Start-over button always share
   one row. */
@media (max-width: 575px) {
    .gi-generate-btn .gi-wand-icon {
        display: none;
    }
    .gi-bottom-controls {
        flex-wrap: nowrap;
    }
    .gi-bottom-controls .gi-generate-btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    a.gi-generate-btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    a.gi-generate-btn .gi-free-badge {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
    }
}

/* ===== Start Over Button ===== */
.gi-start-over-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    background: hsl(var(--static-white));
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.gi-start-over-btn:hover {
    opacity: 0.8;
}

.gi-start-over-btn:active {
    transform: scale(0.95);
}

.gi-start-over-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.gi-start-over-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

/* ===== Start Over Popup ===== */
.gi-start-over-popup {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gi-start-over-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.gi-start-over-popup-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    padding: 1.75rem;
    background: hsl(var(--white));
    border: 1px solid var(--lightgray);
    border-radius: 0.75rem;
    text-align: center;
}

.gi-start-over-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: var(--graycolor);
    cursor: pointer;
    transition: all 0.2s;
}

.gi-start-over-popup-close:hover {
    background: var(--transparent-light);
    color: var(--body);
}

.gi-start-over-popup-close svg {
    width: 1rem;
    height: 1rem;
}

/* ===== Generate Anyway Popup ===== */
.gi-anyway-popup {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.gi-anyway-popup-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    padding: 1.75rem;
    background: hsl(var(--white));
    border: 1px solid var(--lightgray);
    border-radius: 0.75rem;
    text-align: center;
}

.gi-anyway-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: var(--graycolor);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s;
}

.gi-anyway-popup-close:hover {
    background: var(--transparent-light);
    color: var(--body);
}

/* ===== Disclaimer Popup ===== */
.gi-disclaimer-popup {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.gi-disclaimer-popup-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    padding: 1.75rem;
    background: hsl(var(--white));
    border: 1px solid var(--lightgray);
    border-radius: 0.75rem;
    text-align: center;
}

.gi-disclaimer-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: var(--graycolor);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s;
}

.gi-disclaimer-popup-close:hover {
    background: var(--transparent-light);
    color: var(--body);
}

/* ===== Disclaimer Trigger Button ===== */
.gi-disclaimer-btn {
    display: block;
    margin: 0.5rem auto 0;
    background: none;
    border: none;
    color: var(--graycolor);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.gi-disclaimer-btn:hover {
    color: var(--body);
}

/* ===== Filter/Gallery Section ===== */
.gi-filter-section {
    width: 100%;
    max-width: 80rem;
    margin-top: 0.5rem;
}

.gi-image-grid {
    width: 100%;
    max-width: 80rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    padding: 0 3px;
}

.gi-image-grid > div {
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    border-radius: 0.375rem;
}

@media (min-width: 640px) {
    .gi-image-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .gi-image-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .gi-image-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===== Notification Toast ===== */
.gi-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--lightgray);
    border-radius: 0.75rem;
    border: 1px solid var(--lightgray);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.3s ease;
}

.gi-notification.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Lightbox ===== */
.gi-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
}

.gi-lightbox.active {
    display: flex;
}

.gi-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    margin: -50px;
    padding: 50px;
}

.gi-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 210;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.gi-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gi-lightbox-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.gi-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.gi-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.gi-lightbox-nav svg {
    width: 1.5rem;
    height: 1.5rem;
}

.gi-lightbox-prev {
    left: 1rem;
}

.gi-lightbox-next {
    right: 1rem;
}

@media (max-width: 768px) {
    .gi-lightbox-nav {
        display: none;
    }
}

.gi-lightbox-content {
    position: relative;
    z-index: 205;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gi-lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 0.5rem;
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.gi-lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 210;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.gi-lightbox-download {
    position: absolute;
    bottom: 1.5rem;
    right: 1rem;
    z-index: 210;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.gi-lightbox-download:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ===== Delete Modal ===== */
.gi-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.gi-delete-modal-card {
    position: relative;
    width: 90%;
    max-width: 400px;
    padding: 1.75rem;
    background: hsl(var(--white));
    border: 1px solid var(--lightgray);
    border-radius: 0.75rem;
    text-align: center;
}

.gi-delete-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: var(--graycolor);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s;
}

.gi-delete-modal-close:hover {
    background: var(--transparent-light);
    color: var(--body);
}

/* ===== Gallery Item Controls ===== */
.gi-grid-item {
    aspect-ratio: 3/4;
    border-radius: 0.375rem;
    background: var(--lightgray);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.gi-grid-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-grid-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.gi-grid-delete-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.gi-grid-item:hover .gi-grid-delete-btn {
    opacity: 1;
}

.gi-grid-download-btn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 5;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.gi-grid-download-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}

.gi-grid-item:hover .gi-grid-download-btn {
    opacity: 1;
}

.gi-grid-download-btn svg {
    width: 16px;
    height: 16px;
}

/* Touch devices: always show controls */
@media (hover: none) {
    .gi-grid-delete-btn,
    .gi-grid-download-btn,
    .gi-select-box.has-selection .gi-box-close {
        opacity: 0.7;
    }
}

/* ===== Skeleton / Shimmer ===== */
.gi-gallery-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
    background: var(--lightgray);
}

.gi-gallery-skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: gi-shimmer 1.5s infinite;
}

@keyframes gi-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.gi-gallery-loaded .gi-gallery-skeleton:not(#gi-gallery-loading) {
    display: none;
}

/* ===== Spinner ===== */
.gi-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: hsl(var(--static-white));
    border-radius: 50%;
    animation: gi-spin 0.8s linear infinite;
    margin-right: 0.5rem;
}

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

/* ===== Generating Placeholder (single gallery slot) ===== */
.gi-generating-placeholder {
    pointer-events: none;
    overflow: hidden;
    background: var(--lightgray);
}

.gi-generating-placeholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.gi-generating-placeholder .gi-blur-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
}

.gi-generating-placeholder .gi-placeholder-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: gi-spin 0.8s linear infinite;
}

.gi-generating-placeholder .gi-placeholder-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

.gi-generating-placeholder .gi-placeholder-notify {
    font-size: 0.90rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 1.4;
    max-width: 85%;
    margin-top: 0.25rem;
}

/* ===== Mobile Adjustments ===== */
@media (max-width: 767px) {
    /* Hide Gallery/Honeybot top tabs on mobile (they live inside the modal) */
    .gi-desktop-tabs {
        display: none;
    }
}

@media (max-width: 480px) {
    .gi-box-placeholder {
        padding: 0.5rem;
    }

    .gi-box-placeholder svg {
        width: 1.25rem;
        height: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .gi-box-placeholder .gi-gradient-icon {
        width: 2rem;
        height: 2rem;
    }

    .gi-box-label {
        font-size: 0.8125rem;
    }

    .gi-bottom-controls {
        flex-wrap: wrap;
    }

    .gi-bottom-controls .gi-generate-btn {
        order: 1;
        flex: 1 1 calc(100% - 3rem);
    }

    .gi-bottom-controls .gi-start-over-btn {
        order: 2;
    }

    .gi-notification {
        left: 2rem;
        right: 2rem;
        bottom: 1rem;
    }
}

/* ===== Level 2 Modal (stacks on top of Level 1) ===== */
.gi-modal-level2 {
    z-index: 110;
}

/* ===== Empty state ===== */
.gi-modal-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--graycolor);
}

.gi-modal-empty p {
    margin-bottom: 0.5rem;
}

/* ===== Load More in modal ===== */
.gi-modal-load-more {
    grid-column: 1 / -1;
    padding: 0.75rem 1.5rem;
    background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
    background-size: 300% 100%;
    border: none;
    border-radius: 0.375rem;
    color: hsl(var(--static-white));
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    margin-top: 0.5rem;
}

.gi-modal-load-more:hover {
    background-position: 50% 0;
}

/* ===== Modal Skeleton ===== */
.gi-modal-skeleton {
    position: relative;
    background: var(--lightgray);
    border-radius: 0.5rem;
    min-height: 120px;
    aspect-ratio: 1;
}

.gi-modal-skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: gi-shimmer 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .gi-gallery-skeleton::before,
    .gi-modal-skeleton::before {
        animation: none;
        background: rgba(255, 255, 255, 0.04);
    }
}

/* ============================================================
   Prompt Helper modal (custom-prompt presets)
   The whole .gi-prompt-box is the open-modal button (data-gi-open-helper);
   there is no separate helper button anymore.
   ============================================================ */

.gi-prompt-reset-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--body);
    background: var(--light-bg);
    border: 1px solid var(--lightgray);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    z-index: 2;
}

.gi-prompt-reset-btn:hover { background: var(--lightgraycolor); }
.gi-prompt-reset-btn:active { transform: scale(0.92); }
.gi-prompt-reset-btn[hidden] { display: none; }

.gi-prompt-box { position: relative; }

body.gi-helper-open { overflow: hidden; }

.gi-helper-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.gi-helper-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

.gi-helper-content {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: auto;
    background: var(--bgbody);
    border: 1px solid var(--lightgray);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    height: 95vh;
}

.gi-helper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--lightgray);
    flex-shrink: 0;
}

.gi-helper-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--body);
}

.gi-helper-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--body);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gi-helper-close:hover { background: var(--transparent-light); }
.dark .gi-helper-close:hover { background: rgba(255, 255, 255, 0.08); }

.gi-helper-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gi-helper-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--body);
}

.gi-helper-hint {
    font-size: 0.75rem;
    color: var(--bodytext);
    margin: 0;
}

.gi-helper-textarea {
    width: 100%;
    min-height: 220px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--lightgray);
    background: var(--light-bg);
    color: var(--body);
    font-family: inherit;
    /* Never below 16px: iOS Safari auto-zooms the page when focusing any
       input with a smaller font, which leaves the layout zoomed/drifting. */
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
}

.gi-helper-textarea:focus {
    border-color: var(--purple-light);
}

.gi-helper-counter {
    text-align: right;
    font-size: 0.7rem;
    color: var(--bodytext);
    margin-top: -8px;
}

.gi-helper-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
}

.gi-helper-tab {
    /* Flex-center the label with line-height:1 — Satoshi's asymmetric
       ascent/descent + fractional default leading (0.8rem → 19.2px) made the
       text ride ~1px (2–3 device px on 3× phones) above the pill's center. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 9999px;
    font-size: 0.8rem;
    color: var(--bodytext);
    background: transparent;
    border: 1px solid var(--lightgray);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gi-helper-tab:hover { background: var(--light-bg); }

.gi-helper-tab.active {
    background: linear-gradient(135deg, #E118D9, #E19C11);
    color: hsl(var(--static-white));
    border-color: transparent;
}

.gi-helper-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gi-helper-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--body);
    background: transparent;
    border: 1px solid var(--lightgray);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gi-helper-preset:hover {
    background: rgba(225, 24, 217, 0.08);
    border-color: var(--purple-light);
    color: var(--body);
}

.gi-helper-preset.hidden { display: none; }

.gi-helper-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--lightgray);
    flex-shrink: 0;
}

.gi-helper-ok {
    min-width: 120px;
    padding: 10px 24px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--static-white));
    background: linear-gradient(135deg, #E118D9, #E19C11);
    border: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.gi-helper-ok:hover { opacity: 0.92; }
.gi-helper-ok:active { transform: scale(0.97); }

.gi-helper-reset {
    min-width: 120px;
    padding: 10px 24px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--body);
    background: var(--light-bg);
    border: 1px solid var(--lightgray);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.gi-helper-reset:hover { background: var(--lightgraycolor); }
.gi-helper-reset:active { transform: scale(0.97); }

@media (max-width: 768px) {
    .gi-helper-modal {
        /* Reserve a bit of breathing room top + bottom so iOS browser
           chrome / home-bar can't cover the header or footer. The modal
           content itself fills this padded area. Slightly more padding
           on top so the modal doesn't read as flush against the URL bar. */
        padding: 24px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        padding-top: calc(24px + env(safe-area-inset-top, 0px));
    }
    .gi-helper-content {
        max-width: 100%;
        margin: 0;
        border-radius: 14px;
        /* Use the dynamic viewport height so iOS Safari / Chrome shrink
           the modal when the URL bar / toolbar is shown. Subtract the
           top + bottom padding (24px combined plus safe-area insets) so
           the header / footer always stay inside the visible viewport. */
        height: auto;
        max-height: calc(100vh - 36px);
        max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    .gi-helper-header { padding: 12px 16px; }
    .gi-helper-body { padding: 16px; }
    .gi-helper-footer {
        /* Modal-level padding already accounts for the bottom safe-area
           inset, so the footer just gets normal padding. */
        padding: 12px 16px;
    }
    .gi-helper-ok,
    .gi-helper-reset { flex: 1; min-width: 0; padding: 10px 16px; }
    .gi-helper-textarea { min-height: 180px; }
    .gi-prompt-reset-btn { top: 10px; right: 10px; }
    .gi-prompt-textarea { padding-right: 3rem; }
}

/* Very small phones: tighten padding so the footer / reset / OK never get
   crowded out by the iOS toolbar. */
@media (max-width: 380px) {
    .gi-helper-header { padding: 10px 12px; }
    .gi-helper-header h3 { font-size: 1rem; }
    .gi-helper-body { padding: 12px; gap: 10px; }
    /* font-size stays 1rem (16px) — smaller triggers the iOS focus auto-zoom. */
    .gi-helper-textarea { min-height: 140px; padding: 10px 12px; }
    .gi-helper-footer { padding: 10px 12px; }
    .gi-helper-ok,
    .gi-helper-reset { font-size: 0.8rem; padding: 9px 12px; }
    .gi-helper-tab { padding: 7px 10px; font-size: 0.75rem; }
    .gi-helper-preset { padding: 8px 10px; font-size: 0.78rem; }
}

/* Mobile-only: tabs + presets become single horizontal scroll rows so the
   modal doesn't grow tall enough to push the textarea / footer off-screen.
   They also move ABOVE the textarea: when the iOS keyboard opens it covers
   the bottom half of the modal, so the preset propositions must sit at the
   top to stay visible. */
@media (max-width: 768px) {
    .gi-helper-tabs { order: 1; }
    .gi-helper-presets { order: 2; }
    .gi-helper-label { order: 3; }
    .gi-helper-textarea { order: 4; }
    .gi-helper-counter { order: 5; }

    .gi-helper-tabs,
    .gi-helper-presets {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-snap-type: x proximity;
    }
    .gi-helper-tabs { padding-top: 6px; padding-bottom: 2px; }
    .gi-helper-presets { padding-top: 2px; padding-bottom: 6px; }
    .gi-helper-tabs::-webkit-scrollbar,
    .gi-helper-presets::-webkit-scrollbar { display: none; }
    .gi-helper-tab,
    .gi-helper-preset {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* ===== Honeybot tab filter bar (Appearance modal) ===== */
/* Sticky to the modal-body's top edge: negative offsets cancel the body's
   0.75rem 1.25rem padding so the bar spans full modal width and fully
   covers bots scrolling underneath. Background matches `.gi-modal-content`. */
.gi-bot-filter-bar {
    position: sticky;
    top: -0.75rem;
    z-index: 3;
    background: hsl(var(--white));
    padding: 0.75rem 1.25rem;
    margin: -0.75rem -1.25rem 0.5rem;
    border-bottom: 1px solid var(--lightgray);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gi-bot-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lightgray);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--body);
    font-size: 0.875rem;
}

.gi-bot-search:focus {
    outline: none;
    border-color: var(--primary);
}

/* 16px floor on mobile — sub-16px inputs trigger the iOS focus auto-zoom. */
@media (max-width: 1023px) {
    .gi-bot-search {
        font-size: 1rem;
    }
}

.gi-bot-chip-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.375rem;
    padding-bottom: 0.25rem;
    /* Firefox: thin thumb, no track color (transparent) */
    scrollbar-width: thin;
    scrollbar-color: var(--lightgray) transparent;
}

/* WebKit: hide the track entirely, show only the thumb */
.gi-bot-chip-row::-webkit-scrollbar { height: 4px; background: transparent; }
.gi-bot-chip-row::-webkit-scrollbar-track { background: transparent; }
.gi-bot-chip-row::-webkit-scrollbar-thumb { background: var(--lightgray); border-radius: 2px; }

.gi-bot-chip {
    flex: 0 0 auto;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--lightgray);
    border-radius: 999px;
    background: transparent;
    color: var(--body);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gi-bot-chip:hover { border-color: var(--primary); }

.gi-bot-chip.active {
    background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
    border-color: transparent;
    color: hsl(var(--static-white));
}

/* IntersectionObserver sentinel — invisible, takes full grid row */
.gi-bot-sentinel {
    grid-column: 1 / -1;
    height: 1px;
}

/* Empty-state when filters return no bots */
.gi-bot-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--graycolor);
    font-size: 0.875rem;
}

/* ===== Mobile: keep the modal title visible (inline header row) ===== */
@media (max-width: 575px) {
    /* Tighten the header but keep it as a normal flex row so the title shows. */
    .gi-modal-header {
        padding: 0.75rem 0.85rem;
        gap: 0.5rem;
    }
    /* Title stays visible; truncate if it would overflow the row. */
    .gi-modal-header h3,
    .gi-modal-title,
    .gi-subcategory-title {
        font-size: 1rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Compact the action controls so the title keeps room on narrow screens. */
    .gi-modal-reset {
        padding: 0 0.6rem;
        font-size: 0.8rem;
    }
    .gi-modal-done {
        padding: 0 0.7rem;
        font-size: 0.8rem;
    }
    .gi-modal-header-actions {
        gap: 0.35rem;
    }
    .gi-modal-back {
        height: 2rem;
        padding: 0 0.6rem;
        font-size: 0.8rem;
    }
}