/* 
 * recreateme.ai - AI Image Generator
 * Kive.ai-inspired Studio Layout
 */

:root {
    /* Light Mode */
    --bg: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-elevated: #FFFFFF;
    --bg-hover: #F5F5F5;
    --bg-active: #EBEBEB;
    
    --text: #111111;
    --text-secondary: #666666;
    --text-muted: #999999;
    
    --border: #E5E5E5;
    --border-light: #F0F0F0;
    --scrollbar: #C0C0C0;
    
    --accent: #111111;
    --accent-rgb: 17, 17, 17;
    --accent-hover: #333333;
    --accent-subtle: rgba(0, 0, 0, 0.05);
    
    --error: #E53935;
    --success: #43A047;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.16);
    
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --header-height: 56px;
    --sidebar-width: 360px;
    --sidebar-left-width: var(--sidebar-width);
    --sidebar-right-width: var(--sidebar-width);
    --mobile-nav-height: 60px;

    /* Frosted-glass nav (matches marketing pages, slightly more opaque
       so tab text stays legible over image-heavy scroll content). */
    --header-glass-bg: rgba(255, 255, 255, 0.72);
    --header-glass-border: rgba(0, 0, 0, 0.06);
}

/* Dark Mode */
[data-theme="dark"] {
    --bg: #0A0A0A;
    --bg-secondary: #111111;
    --bg-elevated: #161616;
    --bg-hover: #1A1A1A;
    --bg-active: #242424;
    
    --text: #FAFAFA;
    --text-secondary: #A0A0A0;
    --text-muted: #666666;
    
    --border: #262626;
    --border-light: #1A1A1A;
    --scrollbar: #444444;
    
    --accent: #FFFFFF;
    --accent-rgb: 255, 255, 255;
    --accent-hover: #E0E0E0;
    --accent-subtle: rgba(255, 255, 255, 0.05);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6);

    --header-glass-bg: rgba(10, 10, 10, 0.65);
    --header-glass-border: rgba(255, 255, 255, 0.05);
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    overflow: hidden;
    transition: background-color var(--transition), color var(--transition);
}

/* Typography */
h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* Inputs */
input, textarea, select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--text-muted);
    background: var(--bg);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

textarea {
    resize: none;
    min-height: 44px;
    max-height: 120px;
    line-height: 1.4;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.875rem;
    padding-right: 2rem;
}

/* Buttons */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all var(--transition);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bg);
    background: var(--accent);
    border-radius: var(--radius-md);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.btn-icon:hover {
    color: var(--text);
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background: var(--error);
    border-radius: var(--radius-md);
}

.btn-danger:hover {
    background: #c62828;
}

/* Theme Toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
}

.theme-toggle:hover {
    color: var(--text);
    background: var(--bg-hover);
}

/* Icon shows the mode you'll switch TO: moon in light mode (tap for dark),
   sun in dark mode (tap for light). */
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }
[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }

/* ===== APP LAYOUT ===== */
.app {
    height: 100vh;
    /* 100dvh shrinks with the iOS soft keyboard so .app doesn't overflow
       body.in-collection (which already uses 100dvh) when the keyboard is
       up. Without this, mobile Safari auto-scrolls the body to bring the
       focused prompt into view (partially ignoring overflow:hidden during
       keyboard transitions), and on keyboard-close the page is left in a
       scrolled state with the header pushed off the top of the viewport.
       Older browsers without dvh support fall back to the 100vh above —
       on desktop dvh and vh are equal anyway, so this is a no-op there. */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header — frosted glass, matches marketing nav.
   Content flows under the header via:
   - desktop: position:fixed (see @media min-width:769px rule below)
   - mobile: position:sticky (see @media max-width:768px rule, further down)
   Studio-app (/app) keeps header as a flex child since its layout is
   a multi-panel workspace without a dedicated scroll container. */
.header {
    display: flex;
    align-items: center;
    height: var(--header-height);
    /* Transparent; the frosted backdrop is painted via ::before. If we put
       backdrop-filter on .header itself, it creates an offscreen buffer
       that blocks DESCENDANT backdrop-filters from sampling page content —
       making the .user-dropdown and .notification-dropdown blur invisible.
       Pseudo-element keeps the frosted-nav look without that side effect. */
    background: transparent;
    border-bottom: 1px solid var(--header-glass-border);
    flex-shrink: 0;
    z-index: 100;
    width: 100%;
    position: relative;
}

.header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--header-glass-bg);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    pointer-events: none;
    z-index: -1;
}

/* Desktop: frosted-glass scroll-under. Header pins to viewport, scroll
   containers get header-height padding so initial content clears the nav.
   Applies to all main views, including /app's home view (#home-view).
   When inside a collection (body.in-collection), studio-app reverts to
   a flex-child header so the 3-panel workspace fills the space below. */
@media (min-width: 769px) {
    .app > .header,
    .collection-page > .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    body.in-collection .studio-app > .header,
    html[data-init-collection="true"] .studio-app > .header {
        /* `relative` (not `static`) so the .header::before pseudo-element
           with `position: absolute; inset: 0` stays bounded to the header.
           Static would make the pseudo fall back to the viewport and cover
           the entire screen. Layout behaviour is otherwise identical. */
        position: relative;
    }

    [class$="-scroll-container"],
    #home-view {
        padding-top: var(--header-height);
    }

    body.in-collection #home-view,
    html[data-init-collection="true"] #home-view {
        padding-top: 0;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    margin: 0;
    /* Matches .discover-main / .profile-main / .generations-main padding so
       the logo on the left and user controls on the right sit aligned with
       the outermost cards/content in the view below. Applies globally to
       every app-shell page. */
    padding: 0 clamp(16px, 1.25vw, 32px);
    height: 100%;
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
    /* No extra padding-left — header-inner's padding is the only left gap,
       which keeps the logo's left edge aligned with the content grid. */
}

.in-collection .header-left {
    justify-content: flex-start;
    gap: 0.5rem;
    padding-left: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
    z-index: 2;
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-actions .auth-btn {
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.auth-actions .auth-btn.secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.auth-actions .auth-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.auth-actions .auth-btn.primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: white;
}

.auth-actions .auth-btn.primary:hover {
    background: var(--accent-hover);
}

[data-theme="dark"] .auth-actions .auth-btn.primary {
    color: #1a1a1a;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 1;
}

.header-center .main-nav-tabs {
    margin: 0;
}

/* Main Nav Tabs */
.main-nav-tabs {
    display: inline-flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 4px;
    gap: 4px;
}

.main-nav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: 'Alata', sans-serif;
    font-synthesis-weight: none;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}

.main-nav-tab:hover {
    color: var(--text);
    background: var(--bg-active);
}

.main-nav-tab.active {
    background: var(--bg-active);
    color: var(--text);
    font-weight: 600;
}

[data-theme="dark"] .main-nav-tab:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .main-nav-tab.active {
    background: var(--bg-hover);
}

.main-nav-tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

.logo {
    font-family: 'Alata', sans-serif;
    font-synthesis-weight: none;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.025em;
    cursor: pointer;
    white-space: nowrap;
}

/* Logo centered when inside collection view */
.header.collection-view .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Collection view: back button + title flush-left to the SAME left column
   the recreateme logo uses on /discover, /creations, etc. — that column is
   clamp(16px, 1.25vw, 32px) (set on .header-inner above), so we mirror it
   here instead of hard-coding a fixed value that drifts at most viewports.
   Only apply at desktop widths — mobile keeps its own compact rules below. */
@media (min-width: 769px) {
    .header.collection-view .header-inner {
        padding-left: clamp(16px, 1.25vw, 32px);
    }
    .header.collection-view .header-left {
        padding-left: 0;
        gap: 0.375rem;
    }
    .header.collection-view .back-btn {
        /* Cancel the 36x36 button's internal centering so the visual arrow
           sits flush against the logo column (the SVG's leftmost stroke is
           ~8px inside the icon, which is itself centered in the 36x36 box). */
        margin-left: -8px;
        padding: 0;
    }
    .header.collection-view .collection-title {
        margin-left: 0;
    }
}

/* Views */
.view {
    display: none;
    flex: 1;
    overflow: hidden;
}

.view.active {
    display: flex;
    flex-direction: column;
}

/* ===== HOME VIEW ===== */
#home-view {
    overflow-y: auto;
}

#home-view.active {
    display: block;
}

.home-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.view-header h1 {
    flex: 1;
}

/* Collections Toolbar */
.collections-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.collections-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 320px;
    flex: 1;
}

.collections-search svg {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.collections-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 38px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 19px;
    color: var(--text);
    font-size: 0.875rem;
    outline: none;
    min-width: 0;
    transition: all 0.2s;
}

.collections-search input:focus {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.collections-search input::placeholder {
    color: var(--text-muted);
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
}

.back-btn:hover {
    color: var(--text);
    background: var(--bg-hover);
}

/* Folders Grid */
.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    will-change: transform;
}

.folder-card {
    position: relative;
    display: block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    contain: layout style paint;
    text-decoration: none;
    color: inherit;
}

.folder-card:hover {
    border-color: var(--text-muted);
    box-shadow: var(--shadow-lg);
}

.folder-preview {
    position: relative;
    height: 180px;
    margin: 1rem;
    border-radius: var(--radius-lg);
    overflow: visible;
}

.folder-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}

.folder-preview-stack {
    visibility: hidden;
}

.folder-preview-stack.loaded {
    visibility: visible;
}

.folder-preview-stack .stack-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    /* Remove shadow from individual images */
    will-change: transform;
}

.folder-preview-stack .stack-image[style*="--index: 0"] {
    transform: rotate(var(--top-angle, -4deg)) translate(-6px, 4px);
    z-index: 3;
    box-shadow: var(--shadow-md);
}

.folder-preview-stack .stack-image[style*="--index: 1"] {
    transform: rotate(2deg) translate(4px, -2px);
    z-index: 2;
}

.folder-preview-stack .stack-image[style*="--index: 2"] {
    transform: rotate(0deg);
    z-index: 1;
}

.folder-info {
    padding: 0 1.25rem 1.25rem;
}

.folder-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.folder-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.folder-count {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    background: transparent;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: all var(--transition);
}

.folder-card:hover .folder-delete {
    opacity: 1;
}

.folder-delete:hover {
    color: var(--error);
    background: rgba(229, 57, 53, 0.1);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 2rem;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-xl);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* ===== COLLECTION VIEW - STUDIO LAYOUT ===== */
#collection-view {
    display: none;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

#collection-view.active {
    display: flex;
}

/* Collection title in header */
.collection-title {
    font-size: 0.9375rem;
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    max-width: 200px;
    text-overflow: ellipsis;
}

.collection-title:hover {
    background: var(--bg-hover);
}

.collection-title:focus {
    outline: none;
    background: var(--bg-secondary);
}

/* ===== STUDIO LAYOUT - 3 COLUMN ===== */
.studio-layout {
    display: grid;
    grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
    flex: 1;
    overflow: hidden;
    background: var(--bg-secondary);
    position: relative;
}

/* Sidebars */
.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

.sidebar-left {
    border-right: 1px solid var(--border);
    position: relative;
}

.sidebar-right {
    border-left: 1px solid var(--border);
    position: relative;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15px;
    cursor: col-resize;
    /* Higher than `.sidebar-footer` (z-index: 10) so the hover line paints
       over the footer's background — without this, the footer (rendered
       later in DOM) wins on equal z-index and clips the bottom ~26px of
       the line on the left sidebar. The right sidebar has no footer so
       the line went full-height there, making the two look different. */
    z-index: 11;
}

.resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    background: transparent;
    transition: background 0.15s ease;
}

.resize-handle:hover::after,
.resize-handle.active::after {
    background: var(--accent);
}

.resize-handle-left {
    right: -7px;
}

.resize-handle-right {
    left: -7px;
}

body.resizing {
    cursor: col-resize !important;
    user-select: none;
}

body.resizing * {
    cursor: col-resize !important;
    pointer-events: none;
}

body.resizing .resize-handle {
    pointer-events: auto;
}

/* Sidebar Tabs */
.sidebar-tabs {
    display: flex;
    padding: 0.75rem 0.75rem calc(0.75rem - 2px);
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    /* Keep "My Images" on one line — at narrow sidebar widths the tab cell
       (`flex: 1` of ~85px) was too small to fit the icon + label so the
       label wrapped to two lines, breaking row alignment with the
       MUSES/AESTHETICS/PRESETS header on the right. nowrap + min-width: 0
       lets flexbox shrink the cell below content size if needed; the
       resize handle's own min-width (280px) keeps things from collapsing
       far enough to actually clip the labels. */
    white-space: nowrap;
    min-width: 0;
}

.sidebar-tab:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.sidebar-tab.active {
    color: var(--text);
    background: var(--bg-secondary);
}

.sidebar-tab svg {
    width: 14px;
    height: 14px;
}

/* Sidebar Footer for Image Counter */
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.25rem 0.75rem;
    background: var(--bg);
    z-index: 10;
}

.image-counter {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.image-counter.over-limit {
    color: #fff;
    background: var(--error);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* Tab Content */
.tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 0.75rem;
}

.tab-content.active {
    display: flex;
}

/* Sidebar Prompt Wrapper */
.sidebar-prompt-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

/* Prompt Toolbar (Save / Browse / Clear) */
.prompt-toolbar {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    align-items: center;
    position: relative;
}

.prompt-tool-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.prompt-tool-btn:hover:not(:disabled) {
    color: var(--text);
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.prompt-tool-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.prompt-char-counter {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.prompt-char-counter.warning {
    color: #e6a817;
}

.prompt-char-counter.critical {
    color: var(--error);
    font-weight: 600;
}

.prompt-clear-btn {
    padding: 5px;
    color: var(--text-muted);
}

.prompt-clear-btn:hover {
    color: var(--error);
}

.prompts-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.prompts-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.prompts-dropdown-item:last-child {
    border-bottom: none;
}

.prompts-dropdown-item:hover {
    background: var(--bg-secondary);
}

.prompts-dropdown-item .prompt-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prompts-dropdown-item .prompt-delete {
    flex-shrink: 0;
    padding: 2px;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition);
}

.prompts-dropdown-item:hover .prompt-delete {
    opacity: 1;
}

.prompts-dropdown-item .prompt-delete:hover {
    color: var(--error);
    background: var(--bg-tertiary);
}

.prompts-dropdown-empty {
    padding: 20px 12px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.sidebar-prompt-wrapper textarea {
    flex: 1;
    width: 100%;
    padding: 0.875rem;
    font-size: 0.9375rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    resize: none;
    line-height: 1.5;
    min-height: 120px;
    max-height: none;
}

.sidebar-prompt-wrapper textarea:focus {
    border-color: var(--text-muted);
    background: var(--bg);
}

/* Prompt Tab Controls (Settings + Generate) */
.prompt-tab-controls {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.75rem;
}

.prompt-tab-controls .settings-dropdown-wrapper {
    flex: 1;
}

.prompt-tab-controls .settings-btn {
    width: 100%;
    justify-content: center;
}

.prompt-tab-controls .btn-generate {
    flex: 1;
}

/* Drop Zone */
.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    margin: 0 0.25rem 0.75rem;
    flex-shrink: 0;
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

.drop-zone.drag-over {
    border-color: var(--accent);
}

.drop-zone svg {
    width: 24px;
    height: 24px;
    margin-bottom: 0.375rem;
    color: var(--text-muted);
}

.drop-zone p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.125rem;
}

.drop-zone .link {
    color: var(--text);
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.drop-zone .hint {
    font-size: 0.625rem;
    color: var(--text-muted);
}

/* Reference Grid */
.reference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
    gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding: 0.25rem;
}

.image-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition);
    will-change: transform;
}

.image-card:hover {
    transform: scale(1.02);
}

/* Upload placeholder - uses same style as generation loading */
.image-card.upload-placeholder {
    pointer-events: none;
    aspect-ratio: 1;
    min-height: 80px;
    position: relative;
}

.image-card.upload-placeholder .loading-skeleton {
    position: absolute;
    inset: 0;
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

/* .image-card:hover img {
    transform: scale(1.05);
} */

/* .image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition);
    padding: 0.5rem;
} */

.image-card:hover .image-overlay {
    opacity: 1;
}

.image-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

.image-card:hover .image-overlay {
    opacity: 1;
}

/* Flex actions row in top-right — mirrors .generation-thumb-actions for
   visual parity between My Images and Creations. */
.image-overlay-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    pointer-events: auto;
}

.image-overlay-actions .save-muse-btn,
.image-overlay-actions .remove-btn {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* Frosted-glass recipe — mirrors /creations .generation-card-actions
       button so My Images / Creations / All-Creations all share one look. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    outline: none;
    border-radius: 4px; /* /app keeps tight 4px rounding (vs --radius-sm on /creations) */
    cursor: pointer;
    pointer-events: auto;
    /* No transform on hover — composes with parent scale and triggers
       sub-pixel snapping; bg+color shift alone is a stable affordance. */
    transition: background var(--transition), color var(--transition);
    opacity: 1;
    will-change: backdrop-filter;
}

.image-overlay-actions .save-muse-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Trash (destructive) — red hover, matches .delete-gen-btn:hover */
.image-overlay-actions .remove-btn:hover {
    background: rgba(220, 38, 38, 0.9);
}

/* Creations row: pin the @ save button to the same 4px rounding + frosted
   recipe so all three buttons are visually identical with the /creations look. */
.generation-thumb-actions .save-muse-btn {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background var(--transition), color var(--transition);
    will-change: backdrop-filter;
}
.generation-thumb-actions .save-muse-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Discover Placeholder */
/* ===== DISCOVER TAB CONTENT ===== */
#tab-discover.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Discover Search Bar */
.discover-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    flex-shrink: 0;
    max-width: 100%;
    height: 32px;
    box-sizing: border-box;
}

.discover-search-bar svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.discover-search-bar input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.8125rem;
    outline: none;
    min-width: 0;
}

.discover-search-bar input::placeholder {
    color: var(--text-muted);
}

.discover-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--bg-hover);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.discover-search-clear:hover {
    background: var(--border);
    color: var(--text);
}

/* Discover Sub-tabs Grid (2 rows) */
.discover-subtabs-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.discover-subtabs-row {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

/* Legacy single row (keep for compatibility) */
.discover-subtabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.discover-subtab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    justify-content: center;
}

.discover-subtab:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.discover-subtab.active {
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.discover-subtab svg {
    flex-shrink: 0;
}

/* Discover Posts Grid */
.discover-posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto;
    padding: 0.25rem;
}

.discover-post-card {
    position: relative;
    width: calc(50% - 4px);
    padding-bottom: calc(50% - 4px); /* Square */
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: transform 0.2s;
}

.discover-post-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discover-post-card:hover {
    transform: scale(1.02);
}

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

.discover-post-card:hover .discover-post-overlay {
    opacity: 1;
}

/* Touch devices: stats are permanently visible (no hover-reveal) and the
   image zoom is killed (iOS simulates :hover on tap, which would otherwise
   scale the image up on every card touch). Drop the dark gradient — the
   user wanted them visible without the shadow effect. */
@media (hover: none) {
    .discover-post-card:hover {
        transform: none;
    }
    .discover-post-overlay {
        opacity: 1;
        background: transparent;
    }
}

.discover-post-stats {
    display: flex;
    gap: 10px;
}

.discover-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.9);
}

.discover-stat.active {
    color: #fff;
}

.discover-stat svg {
    opacity: 0.9;
}

/* Discover Loading */
.discover-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    min-height: 120px;
}

/* Skeleton placeholder cards rendered into the grid while initial posts
   load. Reuses the @keyframes shimmer defined for .loading-skeleton above
   in this file. */
.discover-post-card.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-hover) 25%,
        var(--bg-active) 50%,
        var(--bg-hover) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    pointer-events: none;
}

/* Discover Empty State */
.discover-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 2rem;
    color: var(--text-muted);
}

.discover-empty-state .empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.discover-empty-state h4 {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.discover-empty-state p {
    font-size: 0.75rem;
}

/* Discover Load More */
.discover-load-more {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.discover-load-more:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--text-muted);
}

/* Legacy placeholder (kept for reference) */
.discover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 2rem;
    color: var(--text-muted);
}

.discover-placeholder svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.discover-placeholder h4 {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
}

.discover-placeholder p {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.coming-soon {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    padding: 0.375rem 0.75rem;
    background: var(--accent-subtle);
    border-radius: 100px;
}

/* ===== CENTER - OUTPUT DISPLAY ===== */
.studio-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.output-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.output-display {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.output-display img {
    /* Explicit fitted width/height are set in JS (sizeOutputImage) so the
       element box always equals the photo's aspect ratio. That keeps BOTH:
       (1) rounded corners -- border-radius rounds the real photo because the
       box hugs it (a container-sized box + object-fit:contain would letterbox
       and leave the visible photo corners square); and (2) no size jump -- the
       progressive thumb and full-res share the same aspect, so they render at
       the same fitted box. object-fit:contain is a safety for the brief moment
       before JS sizes the element (and for items missing aspect metadata). */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

.output-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.output-placeholder svg {
    margin-bottom: 1rem;
    opacity: 0.3;
}

.output-placeholder p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.output-placeholder .hint {
    font-size: 0.8125rem;
}

/* Output Actions */
.output-actions {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}

.output-actions .btn-icon {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    backdrop-filter: blur(8px);
}

.output-actions .btn-icon:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* ===== RIGHT SIDEBAR - GENERATIONS ===== */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 53px;
    max-height: 53px;
    overflow: hidden;
}

.sidebar-header h3 {
    margin: 0;
}

.generations-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.generations-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
}

.gen-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.2rem 0.4rem;
    background: var(--bg-secondary);
    border-radius: 100px;
}

.btn-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.btn-icon-sm:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.generations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-y: auto;
    flex: 1;
}

.generation-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
}

.generation-thumb:hover {
    transform: scale(1.02);
}

/* Touch devices: skip the hover scale. iOS simulates :hover on tap, which
   would make the selected card visibly grow — distracting since action
   buttons already animate in via the :hover/.active opacity rules. */
@media (hover: none) {
    .generation-thumb:hover {
        transform: none;
    }
}

.generation-thumb.active {
    border-color: var(--accent);
}

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

/* Delete button on generation thumbnails — frosted recipe (matches /creations) */
.delete-gen-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    outline: none;
    border-radius: 4px;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition), color var(--transition);
    will-change: backdrop-filter, opacity;
}

.generation-thumb:hover .delete-gen-btn,
.generation-thumb.active .delete-gen-btn {
    opacity: 1;
}

.delete-gen-btn:hover {
    background: rgba(220, 38, 38, 0.9);
}

/* Settings badge on generation thumbnails */
.generation-settings {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 0.5625rem;
    font-weight: 600;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 5px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.generations-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* ===== BOTTOM PROMPT BAR ===== */
.prompt-bar {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 0.75rem 0;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
}

.prompt-spacer-left {
    border-right: 1px solid var(--border);
}

.prompt-spacer-right {
    border-left: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.prompt-input-wrapper {
    padding: 0.375rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-input-wrapper textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    resize: none;
    line-height: 1.4;
    height: 100%;
    min-height: 48px;
}

.prompt-input-wrapper textarea:focus {
    border-color: var(--text-muted);
    background: var(--bg);
}

.prompt-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.control-group label {
    font-size: 0.6875rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.control-group select {
    width: 70px;
    padding: 0.375rem 1.5rem 0.375rem 0.5rem;
    font-size: 0.75rem;
}

/* Settings Dropdown Wrapper */
.settings-dropdown-wrapper {
    position: relative;
}

/* Settings Button - Combined Ratio & Resolution */
.settings-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    white-space: nowrap;
}

.settings-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.settings-btn svg {
    opacity: 0.5;
    transition: transform var(--transition);
}

.settings-dropdown-wrapper.open .settings-btn {
    position: relative;
    z-index: 1002;
}

.settings-dropdown-wrapper.open .settings-btn svg {
    transform: rotate(180deg);
}

/* Settings Dropdown Popout */
.settings-dropdown {
    position: fixed;
    bottom: 70px;
    left: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    min-width: 320px;
    max-width: 400px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    z-index: 1001;
    animation: dropdownSlideUp 0.2s ease;
    will-change: transform, opacity;
}

.settings-dropdown.hidden {
    display: none;
}

@keyframes dropdownSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-section {
    margin-bottom: 1rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* Defend the generation-settings dropdown against settings.css.
   The upgrade/checkout modal lazy-loads settings.css onto this page (it owns
   the .modal styles) the first time it opens. That settings-PAGE stylesheet
   reuses the same generic class names this dropdown uses — notably
   `.settings-section`, which it hides with `display:none` (a tab-panel rule)
   above 900px and restyles with dividers below it. settings.css stays loaded
   after the modal closes, so the dropdown would otherwise render as an empty
   popover. Re-assert the dropdown's own styling with higher specificity
   (`.settings-dropdown .settings-section` = 0,2,0 beats the bare `.settings-section`
   = 0,1,0) so it renders identically whether or not settings.css is present. */
.settings-dropdown .settings-section { display: block; }
.settings-dropdown .settings-section + .settings-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.settings-dropdown .settings-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Aspect Ratio Grid */
.aspect-ratio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.aspect-ratio-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    min-width: 56px;
}

.aspect-ratio-option:hover {
    background: var(--bg-hover);
}

.aspect-ratio-option.active {
    background: var(--bg-active);
}

.aspect-ratio-option.active .ratio-box {
    border-color: var(--text);
    border-width: 2px;
}

.ratio-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    background: transparent;
    transition: all var(--transition);
}

/* Different aspect ratio box sizes */
.ratio-box[data-ratio="9:16"] { width: 26px; height: 46px; }
.ratio-box[data-ratio="2:3"] { width: 30px; height: 46px; }
.ratio-box[data-ratio="4:5"] { width: 37px; height: 46px; }
.ratio-box[data-ratio="1:1"] { width: 40px; height: 40px; }
.ratio-box[data-ratio="5:4"] { width: 46px; height: 37px; }
.ratio-box[data-ratio="3:2"] { width: 46px; height: 30px; }
.ratio-box[data-ratio="16:9"] { width: 46px; height: 26px; }
.ratio-box[data-ratio="21:9"] { width: 54px; height: 23px; }
.ratio-box[data-ratio="3:4"] { width: 34px; height: 46px; }
.ratio-box[data-ratio="4:3"] { width: 46px; height: 34px; }

.ratio-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.ratio-sublabel {
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-top: -2px;
}

.aspect-ratio-option.active .ratio-label {
    color: var(--text);
    font-weight: 600;
}

/* Resolution Options */
.resolution-options {
    display: flex;
    gap: 0.5rem;
}

.resolution-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.resolution-option:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.resolution-option.active {
    border-color: var(--text);
    color: var(--text);
    background: var(--bg-hover);
    font-weight: 600;
}

/* Engine Options */
.engine-options {
    display: flex;
    gap: 0.5rem;
}

.engine-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    flex: 1;
    text-align: center;
    transition: all var(--transition);
}

.engine-option:hover {
    border-color: var(--text-muted);
}

.engine-option.active {
    border-color: var(--text);
    background: var(--bg-hover);
}

.engine-option.locked,
.resolution-option.locked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
}

.engine-option.locked:hover,
.resolution-option.locked:hover {
    border-color: var(--border);
}

.engine-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
}

.engine-sublabel {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Batch Options — mirrors Resolution layout (3-button row) */
.batch-options {
    display: flex;
    gap: 0.5rem;
}

.batch-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.batch-option:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.batch-option.active {
    border-color: var(--text);
    color: var(--text);
    background: var(--bg-hover);
    font-weight: 600;
}

/* Generate Button - Prominent */
.btn-generate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--bg);
    background: var(--accent);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.btn-generate:hover:not(:disabled) {
    background: var(--accent-hover);
}

.btn-generate:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-generate .btn-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-generate .btn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-generate .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--bg) 30%, transparent);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.credit-cost-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: var(--accent);
    color: var(--bg);
    border: 2px solid var(--bg);
    pointer-events: none;
    line-height: 1;
}

.credit-cost-badge.visible {
    display: flex;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ===== GENERATING INDICATOR ===== */
.generating-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    color: var(--text-muted);
    padding: 2rem 1rem;
}

.generating-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.generating-status {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.generating-timer {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-top: -0.5rem;
}

.generating-tip {
    max-width: 320px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    min-height: 2.5em;
    animation: tipFadeIn 0.4s ease;
}

.generating-tip strong {
    color: var(--text-secondary);
}

@keyframes tipFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== RECREATE MODAL ===== */
.modal-content.recreate-modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 0;
    max-width: 420px;
    width: 90vw;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.recreate-modal-content h3 {
    margin: 0;
    padding: 1.25rem 1.5rem 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    letter-spacing: -0.01em;
}

img.recreate-preview {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    max-height: 240px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
}

.recreate-prompt-preview {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0.75rem 1.5rem;
    padding: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.recreate-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
}

.recreate-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.recreate-option span {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
}

.recreate-actions .btn {
    width: 100%;
    background: var(--bg-secondary);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    transition: all var(--transition);
}

.recreate-option:hover .btn {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* ===== MODAL ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* On modals containing the tall (90vh) detail-modal-content, reserve the
   navbar-height worth of space at the top so vertical centering happens
   below the navbar. Without this the modal's flex-centered content is
   pushed up enough to clip into the navbar on shorter laptop viewports
   (15.6"/768px) where 90vh nearly fills the viewport. Bigger screens have
   enough leftover vh that centering naturally clears the navbar. Scoped
   via `:has()` so small dialogs (login/share/confirm) — which are well
   under 90vh and never overlap the navbar — aren't shifted down. */
.modal:has(.detail-modal-content) {
    padding-top: var(--header-height);
}

.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2.5px);
    will-change: opacity;
}

.modal-content {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-xl);
}

.modal-content h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.modal-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all var(--transition);
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

#sensitive-prompt-modal .modal-content {
    max-width: 520px;
}

/* ===== STUDIO SELECTION MODAL ===== */
.studio-selection {
    max-width: 720px;
    padding: 2rem;
}

.studio-selection h2 {
    text-align: center;
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
}

.studio-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.studio-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.studio-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.studio-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Studio card loading state */
.studio-card-loading {
    position: relative;
    border-color: var(--accent);
    pointer-events: none;
}

.studio-card-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bg-rgb, 0, 0, 0), 0.7);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-card-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: studio-spin 0.8s linear infinite;
    z-index: 1;
}

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

/* Studio card disabled state */
.studio-card-disabled {
    opacity: 0.4;
    pointer-events: none;
    transform: none !important;
}

.studio-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.studio-icon.production {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.studio-icon.creative {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.studio-card h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.studio-description {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.studio-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.studio-features li {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
    padding-left: 1.25rem;
    position: relative;
}

.studio-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 600;
}

.studio-tag {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    font-weight: 600;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.studio-cancel-btn {
    display: none;
}

/* Header Pills — shared sizing for studio badge, demo btn, credits pill */
.studio-badge,
.demo-btn,
.header-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 30px;
    padding: 0 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition);
    box-sizing: border-box;
}

.studio-badge {
    position: relative;
}

.studio-badge-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.7;
    white-space: nowrap;
    color: var(--text-secondary);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    pointer-events: none;
    text-align: left;
    flex-direction: column;
    gap: 0.125rem;
}

.studio-badge-tooltip strong {
    margin-top: 0.375rem;
    color: var(--text);
    font-weight: 600;
}

.studio-badge:hover .studio-badge-tooltip {
    display: flex;
}

.studio-badge.production {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    color: #667eea;
}

.studio-badge.creative {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.15) 0%, rgba(245, 87, 108, 0.15) 100%);
    color: #f5576c;
}

/* ===== TOAST ===== */
.toast {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 90vw;
    animation: toastIn 0.3s ease;
    will-change: opacity, transform;
}

.toast.hidden {
    display: none;
}

.toast.success {
    border-color: #22c55e;
}

.toast.error {
    border-color: #ef4444;
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: #22c55e;
}

.toast.error .toast-icon {
    color: #ef4444;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== LOADING STATES ===== */
.loading-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-hover) 25%,
        var(--bg-active) 50%,
        var(--bg-hover) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

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

.folder-card.skeleton {
    pointer-events: none;
}

.folder-card.skeleton .folder-preview .loading-skeleton {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
}

/* ===== USER MENU ===== */
.user-menu {
    position: relative;
    margin-right: 0.5rem;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}

.user-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar svg {
    width: 100%;
    height: 100%;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chevron {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.user-menu.open .user-chevron {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem + 2.5px);
    right: 0;
    min-width: 180px;
    /* Matches the navigation bar's frosted glass recipe. Theme-adaptive via
       the same CSS vars the header uses, so dark mode gets a dark frost and
       light mode gets a white frost — consistent with the nav above it. */
    background: var(--header-glass-bg);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid var(--header-glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    will-change: backdrop-filter;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-info {
    padding: 0.625rem 0.875rem;
}

.user-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.dropdown-item svg {
    color: rgba(255, 255, 255, 0.7);
}

.login-btn {
    margin-right: 0.5rem;
    text-decoration: none;
}

/* ===== NOTIFICATIONS ===== */
.notification-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

@media (max-width: 640px) {
    .notification-backdrop.open {
        display: block;
    }
}

.notification-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.notification-bell:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-badge:empty,
.notification-badge[data-count="0"] {
    display: none;
}

[data-theme="dark"] .notification-badge {
    color: #1a1a1a;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem + 1px);
    right: 0;
    width: 360px;
    max-height: 480px;
    /* Matches the navigation bar's frosted glass recipe. Theme-adaptive. */
    background: var(--header-glass-bg);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid var(--header-glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    will-change: backdrop-filter;
}

.notification-wrapper.open .notification-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.notification-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.notification-mark-read {
    font-size: 0.75rem;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.notification-mark-read:hover {
    background: var(--bg-hover);
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
    /* No padding/gap so notification items fill edge-to-edge (matches the
       date-dropdown pattern: full-width hover cells, clipped by the parent's
       rounded corners). */
    display: flex;
    flex-direction: column;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text);
    /* No border-radius: edge-to-edge hover fill, clipped by parent's rounded
       corners via overflow:hidden. */
    transition: background var(--transition);
    cursor: pointer;
    position: relative;
}

.notification-item:hover {
    background: var(--bg-hover);
}

.notification-item.unread {
    background: rgba(var(--accent-rgb), 0.08);
}

.notification-item.unread:hover {
    background: rgba(var(--accent-rgb), 0.12);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
}

.notification-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    overflow: hidden;
    /* When rendered as an <a> (linked to actor's profile) — no link styling. */
    text-decoration: none;
    cursor: pointer;
}

/* Username link inside the notification text — same color as surrounding
   text, no underline. The wrapping <strong> keeps the visual emphasis. */
.notification-username-link {
    color: inherit;
    text-decoration: none;
}
.notification-username-link:hover {
    text-decoration: underline;
}

.notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-text {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text);
    margin: 0;
}

.notification-text strong {
    font-weight: 600;
}

.notification-time {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.notification-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

/* Dropdowns now use theme-adaptive --header-glass-bg, so children can use
   theme vars naturally — no forced white text. Hover uses var(--bg-hover)
   for consistency with nav-bar items (same theme-adaptive highlight). */
.user-dropdown .user-info,
.notification-dropdown .notification-header {
    border-bottom: 1px solid var(--header-glass-border);
}

.notification-collection-badge {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.notification-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.notification-empty svg {
    width: 32px;
    height: 32px;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.notification-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    flex-shrink: 0;
}

.notification-footer a {
    font-size: 0.8125rem;
    color: var(--accent);
    text-decoration: none;
}

.notification-footer a:hover {
    text-decoration: underline;
}

/* Mobile notifications */
@media (max-width: 640px) {
    .notification-wrapper.open {
        z-index: 1000;
    }

    .notification-dropdown {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - var(--header-height));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

::-webkit-scrollbar-button {
    display: none;
}

/* Firefox fallback */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar) transparent;
    }
}

/* ===== HAMBURGER MENU ===== */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text);
    background: transparent;
    border-radius: var(--radius-md);
}

.hamburger-btn:hover {
    background: var(--bg-hover);
}

/* Mobile/Desktop visibility helpers */
.mobile-only {
    display: none;
}

.desktop-only {
    display: flex;
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.mobile-menu.hidden {
    display: none;
}

.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2.5px);
    will-change: opacity;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85%;
    background: var(--bg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.25s ease;
    will-change: transform;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.mobile-menu-logo {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
}

.mobile-menu-close:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.mobile-menu-nav {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    background: transparent;
    border: none;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.mobile-menu-item:hover {
    background: var(--bg-hover);
}

.mobile-menu-item svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Match the header toggle: moon in light mode, sun in dark mode. */
.mobile-menu-item .sun-icon {
    display: none;
}

.mobile-menu-item .moon-icon {
    display: block;
}

[data-theme="dark"] .mobile-menu-item .sun-icon {
    display: block;
}

[data-theme="dark"] .mobile-menu-item .moon-icon {
    display: none;
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 1rem;
}

.mobile-menu-section {
    padding: 0.5rem 0;
}

.mobile-menu-footer {
    border-top: 1px solid var(--border);
    margin-top: auto;
    padding: 0;
}

.mobile-menu-item.active {
    color: var(--accent);
    background: var(--bg-hover);
    font-weight: 500;
}

/* Mobile menu — user profile card */
.mm-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

/* When .mm-profile sits inside .mobile-menu-header, the header owns the
   padding — drop the profile's own padding to avoid double-padding. */
.mobile-menu-header .mm-profile {
    padding: 0;
}

.mm-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    overflow: hidden;
    color: var(--text-secondary);
}

.mm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mm-profile-info {
    flex: 1;
    min-width: 0;
}

.mm-profile-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-profile-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.mm-profile-links {
    padding: 0.25rem 0 0.5rem;
    border-top: 1px solid var(--border);
}

.mm-signout {
    color: var(--text-secondary);
}
.mm-signout:hover {
    color: var(--error);
    background: rgba(229, 57, 53, 0.08);
}

/* Mobile menu — logged-out footer */
.mobile-menu-signin {
    display: block;
    width: calc(100% - 2rem);
    margin: 1rem auto 0;
    padding: 0.75rem;
    text-align: center;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--transition);
}
.mobile-menu-signin:hover {
    opacity: 0.9;
}

.mobile-menu-signup {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
}
.mobile-menu-signup:hover {
    color: var(--text);
}

/* ===== MOBILE NAVIGATION ===== */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    z-index: 500;
    gap: 0.25rem;
}

/* Mobile counter badge */
.mobile-counter {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: 100px;
    margin-left: 0.5rem;
}

/* Settings backdrop for mobile */
.settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(2.5px);
}

.settings-backdrop.hidden {
    display: none;
}

.mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.mobile-nav-btn:hover,
.mobile-nav-btn.active {
    color: var(--text);
    background: var(--bg-secondary);
}

.mobile-nav-btn svg {
    width: 20px;
    height: 20px;
}

/* Mobile Panel Overlays */
.mobile-panel {
    display: none;
    position: fixed;
    bottom: var(--mobile-nav-height);
    left: 0;
    right: 0;
    max-height: 50vh;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: 400;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.mobile-panel.active {
    display: flex;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.mobile-panel-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.mobile-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-sm);
}

.mobile-panel-close:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.mobile-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

/* SMOOTH IMAGE LOADING */

/* Smooth image loading */
.image-card img,
.generation-thumb img,
.stack-image {
    opacity: 0;
    transition: opacity 0.3s ease;
    background: var(--bg-tertiary);
}

.image-card img.loaded,
.generation-thumb img.loaded,
.stack-image.loaded {
    opacity: 1;
}

/* Skeleton pulse while loading */
.image-card,
.generation-thumb {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.image-card:has(img.loaded),
.generation-thumb:has(img.loaded) {
    animation: none;
    background: none;
}

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

/* ===== RESPONSIVE - DESKTOP LARGE ===== */
@media (max-width: 1400px) {
    :root {
        --sidebar-width: 320px;
    }
}

/* ===== RESPONSIVE - DESKTOP MEDIUM ===== */
@media (max-width: 1200px) {
    :root {
        --sidebar-width: 280px;
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 1024px) {
    .studio-layout {
        grid-template-columns: var(--sidebar-left-width) 1fr;
    }

    .sidebar-right {
        display: none;
    }

    .resize-handle {
        display: none;
    }

    .prompt-bar {
        grid-template-columns: var(--sidebar-left-width) 1fr;
    }
    
    .prompt-spacer-right {
        border-left: none;
        padding: 0.375rem 1rem;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
    /* Mobile: body scrolls naturally (browser navbar minimizes) */
    body {
        overflow: visible !important;
        height: auto !important;
    }

    .app {
        height: auto;
        overflow: visible;
    }

    .header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .view {
        overflow: visible;
    }

    #home-view {
        overflow: visible;
    }

    /* Show/hide mobile vs desktop elements */
    .mobile-only {
        display: flex;
    }
    
    .desktop-only {
        display: none;
    }
    
    /* Header fixes - logo left, hamburger right */
    .header {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }
    
    .logo {
        position: static;
        transform: none;
        font-size: 1rem;
        flex-shrink: 0;
    }
    
    .header-left {
        flex: 1;
        min-width: 0;
        gap: 0.5rem;
        padding-left: 0;
    }
    
    .header-right {
        flex: 0 0 auto;
        gap: 0.25rem;
    }

    .header-right .auth-actions {
        display: none;
    }

    /* Collections toolbar responsive */
    .view-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .collections-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .collections-search {
        max-width: none;
    }
    
    #new-collection-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Hide logo in collection view on mobile */
    .in-collection .logo {
        display: none;
    }
    
    /* Collection title left-aligned, prominent */
    .in-collection .header-left {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .in-collection .back-btn {
        position: relative;
        left: auto;
        flex-shrink: 0;
        /* z-index: 1; */
    }

    .in-collection .collection-title {
        flex: 1;
        text-align: left;
        max-width: none;
        font-size: 1.125rem;
        font-weight: 600;
        padding: 0;
        background: transparent;
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .collection-title {
        font-size: 0.9375rem;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        background: transparent;
        border: none;
    }
    
    /* Hide user menu on mobile (it's in hamburger menu) */
    .user-menu {
        display: none;
    }

    .user-name {
        display: none;
    }

    .user-btn {
        padding: 0.25rem 0.375rem;
    }
    
    /* Studio badge - in header-right, next to hamburger */
    .studio-badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
        gap: 0.375rem;
    }

    .studio-badge svg {
        width: 16px;
        height: 16px;
    }

    /* Inside a collection on mobile: show only back arrow + title + hamburger.
       The tier pill (#credits-pill) is hidden site-wide on mobile by the
       rule below; its content moves into the hamburger menu footer (see
       updateMobileMenuUser). */
    body.in-collection #studio-badge-container,
    body.in-collection #user-menu-container {
        display: none !important;
    }

    /* Hide the desktop tier pill on mobile site-wide — its content lives
       in the mobile menu now. */
    #credits-pill {
        display: none !important;
    }

    /* Tier slot inside the mobile menu — same colours as the desktop pill
       (rendered inline via PLAN_COLORS). Border + tinted background mirror
       the original pill so brand reads identically across surfaces.
       width:auto + box-sizing:border-box override the parent
       .mobile-menu-item's width:100% so the side margins inset the slot
       cleanly instead of pushing the box past the menu edge. */
    .mobile-tier-item {
        width: auto;
        box-sizing: border-box;
        margin: 8px 12px 6px;
        padding: 10px 14px;
        border-radius: 8px;
        border: 1px solid var(--border);
        gap: 0;
        justify-content: space-between;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .mobile-tier-item:hover {
        background: inherit;
        opacity: 0.9;
    }

    .mobile-tier-item .mobile-tier-label {
        font-weight: 700;
    }

    .mobile-tier-item .mobile-tier-credits {
        font-weight: 500;
        opacity: 0.85;
        font-size: 0.8125rem;
    }

    /* Hug the left edge: back arrow + title align flush with the viewport edge */
    body.in-collection .header {
        padding: 0;
    }

    body.in-collection .header-inner {
        padding: 0 0.5rem 0 0.25rem;
    }

    body.in-collection .header-left {
        padding-left: 0;
        gap: 0.25rem;
    }

    body.in-collection .back-btn {
        margin-left: 0;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Compact credits/tier pill on mobile inside a collection */
    body.in-collection #credits-pill {
        font-size: 0.75rem;
        padding: 0.3125rem 0.5rem;
        gap: 0.25rem;
        white-space: nowrap;
    }

    /* Show mobile nav only in collection view */
    #collection-view.active ~ .mobile-nav {
        display: flex;
    }
    
    .mobile-nav {
        display: none;
    }
    
    body.in-collection .mobile-nav {
        display: flex;
    }
    
    /* Adjust collection view for mobile nav */
    #collection-view {
        height: calc(100vh - var(--header-height));
    }
    
    /* Studio layout - single column */
    .studio-layout {
        grid-template-columns: 1fr;
    }
    
    .sidebar-left,
    .sidebar-right {
        display: none;
    }
    
    /* Studio center - full height minus prompt bar and nav */
    .studio-center {
        padding: 1rem;
        min-height: 0;
        flex: 1;
    }
    
    .output-container {
        max-width: 100%;
    }
    
    .output-placeholder {
        padding: 2rem 1rem;
    }
    
    .output-placeholder svg {
        width: 48px;
        height: 48px;
    }
    
    .output-placeholder p {
        font-size: 0.875rem;
    }
    
    .output-placeholder .hint {
        font-size: 0.75rem;
    }
    
    /* Prompt bar - vertical layout */
    .prompt-bar {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
        padding-bottom: calc(0.75rem + 60px + env(safe-area-inset-bottom));
    }
    
    .prompt-spacer-left {
        display: none;
    }
    
    .prompt-spacer-right {
        display: flex;
        border-left: none;
        padding: 0;
    }
    
    .prompt-input-wrapper {
        padding: 0;
        width: 100%;
    }
    
    .prompt-input-wrapper textarea {
        min-height: 50px;
        max-height: 80px;
        font-size: 0.9375rem;
    }
    
    /* Prompt controls - full width row */
    .prompt-controls {
        display: flex;
        width: 100%;
        gap: 0.5rem;
    }
    
    .settings-dropdown-wrapper {
        flex: 1;
    }
    
    .settings-btn {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .btn-generate {
        flex: 1;
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    /* Settings dropdown - bottom sheet on mobile */
    .settings-dropdown {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 1001;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: none;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        animation: sheetSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Drag handle at the top of the sheet */
    .settings-dropdown::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 0.75rem;
        background: var(--border);
        border-radius: 100px;
    }

    @keyframes sheetSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Home view - ensure last item visible */
    .home-container {
        padding: 1rem;
        padding-bottom: calc(2rem + var(--mobile-nav-height) + env(safe-area-inset-bottom));
    }
    
    #home-view {
        padding-bottom: 0;
    }
    
    .view-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .view-header h1 {
        font-size: 1.25rem;
        flex: 1;
    }

    .view-header .btn-secondary {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .view-header .btn-secondary svg {
        width: 14px;
        height: 14px;
    }

    .folders-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding-bottom: 1rem;
    }
    
    .folder-card {
        border-radius: var(--radius-lg);
    }
    
    .folder-preview {
        height: 250px;
        margin: 0.75rem;
    }

    .folder-info {
        padding: 0 0.75rem 0.75rem;
    }
    
    .folder-name {
        font-size: 16px;
    }

    .folder-count {
        font-size: 0.6875rem;
    }
    
    .folder-delete {
        opacity: 1;
        width: 28px;
        height: 28px;
    }
    
    /* Empty state */
    .empty-state {
        padding: 3rem 1.5rem;
        margin-bottom: 1rem;
    }
    
    .empty-icon {
        font-size: 2.5rem;
    }
    
    .empty-state h3 {
        font-size: 1.125rem;
    }
    
    /* Studio selection modal — compact cards on mobile */
    .studio-selection {
        max-width: 100%;
        margin: 0.5rem;
        padding: 1rem 1.25rem;
    }

    .studio-selection h2 {
        font-size: 1.125rem;
        margin-bottom: 0.125rem;
    }

    .studio-subtitle {
        font-size: 0.8125rem;
        margin-bottom: 0.75rem;
    }

    .studio-options {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .studio-card {
        padding: 0.75rem 1rem;
    }

    .studio-card:active {
        transform: scale(0.98);
    }

    .studio-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 0.5rem;
    }

    .studio-icon svg {
        width: 18px;
        height: 18px;
    }

    .studio-card h3 {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    .studio-description {
        display: none;
    }

    .studio-features {
        margin-bottom: 0.5rem;
    }

    .studio-features li {
        font-size: 0.6875rem;
        padding: 0.0625rem 0;
        padding-left: 1rem;
    }

    .studio-features li::before {
        font-size: 0.625rem;
    }

    .studio-tag {
        font-size: 0.625rem;
        padding-top: 0.5rem;
    }

    .studio-cancel-btn {
        display: block;
        width: 100%;
        margin-top: 0.625rem;
        padding: 0.625rem;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        font-size: 0.875rem;
        cursor: pointer;
        transition: all var(--transition);
    }

    .studio-cancel-btn:active {
        background: var(--bg-secondary);
    }
    
    /* User dropdown */
    .user-dropdown {
        right: 0;
        min-width: 180px;
    }
    
    /* Toast positioning - top on mobile too, sized to content */
    .toast {
        top: calc(var(--header-height) + 0.5rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100vw - 2rem);
        text-align: center;
    }
    
    @keyframes toastIn {
        from {
            opacity: 0;
            transform: translate(-50%, -10px);
        }
        to {
            opacity: 1;
            transform: translate(-50%, 0);
        }
    }
    
    /* Lightbox */
    .lightbox {
        padding: 1rem;
    }
    
    .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
    
    /* Modal */
    .modal-content {
        margin: 1rem;
        max-width: calc(100% - 2rem);
        padding: 1.25rem;
    }
    
    .modal-content h2 {
        font-size: 1rem;
    }
    
    .modal-content p {
        font-size: 0.8125rem;
    }
    
    .modal-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .recreate-modal-content h3 {
        padding: 0.75rem 1rem 0.5rem;
        font-size: 1rem;
    }
    
    .modal-actions button {
        width: 100%;
    }
    
    /* Aspect ratio grid on mobile */
    .aspect-ratio-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        justify-items: center;
    }
    
    .aspect-ratio-option {
        min-width: unset;
        width: 100%;
        padding: 0.5rem 0.25rem;
    }
    
    .ratio-sublabel {
        display: none;
    }

    .ratio-box {
        transform: scale(0.85);
    }

    /* Mobile panels */
    .mobile-panel {
        bottom: calc(60px + env(safe-area-inset-bottom));
        max-height: 45vh;
        box-shadow: var(--shadow-xl);
    }
    
    .mobile-panel-content {
        padding: 0.75rem;
    }
    
    .mobile-panel .drop-zone {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .mobile-panel .drop-zone svg {
        width: 20px;
        height: 20px;
        margin-bottom: 0.25rem;
    }
    
    .mobile-panel .drop-zone p {
        font-size: 0.75rem;
    }
    
    /* Reference grid in mobile panel */
    .mobile-panel .reference-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: min-content;
        gap: 0.5rem;
    }
    
    /* Generations grid in mobile panel */
    .mobile-panel .generations-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: min-content;
        padding: 0;
        gap: 0.5rem;
    }
    
    .mobile-panel .generations-empty {
        padding: 1.5rem 1rem;
        font-size: 0.75rem;
    }
    
    /* Loading skeletons on mobile */
    .folder-card.skeleton .folder-preview .loading-skeleton {
        border-radius: var(--radius-md);
    }
}

/* ===== RESPONSIVE - SMALL MOBILE ===== */
@media (max-width: 480px) {
    .header {
        padding: 0 0.5rem;
    }
    
    .logo {
        font-size: 0.875rem;
    }
    
    .collection-title {
        max-width: 120px;
        font-size: 0.75rem;
    }
    
    .studio-badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
        gap: 0.375rem;
    }

    .studio-badge svg {
        width: 16px;
        height: 16px;
    }

    .folders-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .folder-preview {
        height: 230px;
        margin: 0.5rem;
    }
    
    .folder-info {
        padding: 0 0.5rem 0.5rem;
    }
    
    .folder-name {
        font-size: 16px;
    }
    
    .folder-count {
        font-size: 0.625rem;
    }
    
    .prompt-controls {
        flex-direction: column;
    }
    
    .settings-dropdown-wrapper,
    .btn-generate {
        width: 100%;
        flex: none;
    }
    
    .settings-btn,
    .btn-generate {
        justify-content: center;
    }
    
    .settings-dropdown {
        width: calc(100% - 1rem);
        padding: 0.75rem;
        max-height: 85vh;
    }
    
    .aspect-ratio-option {
        min-width: 36px;
        padding: 0.25rem 0.125rem;
    }
    
    .ratio-box[data-ratio="9:16"] { width: 14px; height: 24px; }
    .ratio-box[data-ratio="2:3"] { width: 16px; height: 24px; }
    .ratio-box[data-ratio="4:5"] { width: 19px; height: 24px; }
    .ratio-box[data-ratio="1:1"] { width: 22px; height: 22px; }
    .ratio-box[data-ratio="5:4"] { width: 24px; height: 19px; }
    .ratio-box[data-ratio="3:2"] { width: 24px; height: 16px; }
    .ratio-box[data-ratio="16:9"] { width: 24px; height: 14px; }
    .ratio-box[data-ratio="21:9"] { width: 28px; height: 12px; }
    .ratio-box[data-ratio="3:4"] { width: 18px; height: 24px; }
    .ratio-box[data-ratio="4:3"] { width: 24px; height: 18px; }
    
    .ratio-label {
        font-size: 0.6875rem;
    }
    
    /* Resolution options on mobile */
    .resolution-options {
        gap: 0.75rem;
    }
    
    .resolution-option {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    .mobile-panel .reference-grid,
    .mobile-panel .generations-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: min-content;
    }
    
    .mobile-nav-btn {
        font-size: 0.5625rem;
        padding: 0.375rem 0.125rem;
    }
    
    .mobile-nav-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .view-header .btn-secondary span:not(.btn-icon) {
        display: none;
    }
}

/* ===== SAFE AREA INSETS FOR NOTCHED DEVICES ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-nav {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 768px) {
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .prompt-bar {
            padding-bottom: calc(0.75rem + var(--mobile-nav-height) + env(safe-area-inset-bottom));
        }
    }
}


/* ===== HOME TABS (Simple Text Style) ===== */
.home-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.home-tab {
    padding: 0.5rem 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition);
}

.home-tab:hover {
    color: var(--text-secondary);
}

.home-tab.active {
    color: var(--text);
}

.home-tab-content {
    display: none;
}

.home-tab-content.active {
    display: block;
}

/* ===== GENERATIONS TOOLBAR ===== */
.generations-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.generations-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 320px;
}

.generations-search svg {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.generations-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 38px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 19px;
    color: var(--text);
    font-size: 0.875rem;
    outline: none;
    transition: all 0.2s;
}

.generations-search input:focus {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.generations-search input::placeholder {
    color: var(--text-muted);
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.view-toggle-btn:hover {
    color: var(--text-secondary);
}

.view-toggle-btn.active {
    color: var(--text);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

/* All Generations Grid */
.all-generations-grid {
    display: grid;
    gap: 1rem;
    will-change: transform;
}

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

.all-generations-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.all-generations-grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Generation Card */
.generation-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid var(--border);
    contain: layout style paint;
}

.generation-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--text-muted);
}

.generation-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.generation-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
}

.generation-card:hover .generation-card-overlay {
    opacity: 1;
}

.generation-card-prompt {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.generation-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.6);
}

.generation-card-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity var(--transition);
}

.generation-card:hover .generation-card-actions {
    opacity: 1;
}

.generation-card-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all var(--transition);
}

.generation-card-actions button:hover {
    background: rgba(0, 0, 0, 0.8);
}

.generation-card-actions button.delete-btn:hover {
    background: var(--error);
}

/* Hide New Collection button on Generations tab */
.home-tab-content#generations-tab ~ #new-collection-btn,
body.generations-active #new-collection-btn {
    display: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .all-generations-grid.cols-5 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .home-tab {
        font-size: 1.25rem;
    }
    
    .generations-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .generations-search {
        max-width: none;
    }
    
    .view-toggle {
        align-self: flex-end;
    }
    
    .all-generations-grid.cols-3,
    .all-generations-grid.cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .all-generations-grid.cols-2,
    .all-generations-grid.cols-3,
    .all-generations-grid.cols-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

.generations-sentinel {
    height: 1px;
    grid-column: 1 / -1;
}

.generation-thumb.generating-placeholder {
    cursor: pointer;
    position: relative;
    aspect-ratio: 1;
}

.generation-thumb.generating-placeholder .loading-skeleton {
    position: absolute;
    inset: 0;
}

.generation-thumb.generating-placeholder .generation-settings {
    opacity: 0.5;
}

/* ===== HIDDEN UTILITY ===== */
.hidden {
    display: none !important;
}


/* ===== DISCOVER PAGE ===== */

/* Generation thumbnail action buttons container */
.generation-thumb-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}

.generation-thumb:hover .generation-thumb-actions,
.generation-thumb.active .generation-thumb-actions {
    opacity: 1;
}

/* Share button in generation thumbnail — frosted recipe (matches /creations) */
.share-gen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    outline: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    will-change: backdrop-filter;
}

.share-gen-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Adjust delete button positioning (it's now in the actions container) */
.generation-thumb .delete-gen-btn {
    position: static;
    opacity: 1;
}

/* Generation card actions (All Generations tab) */


/* ============ DISCOVER LINK IN HEADER ============ */

.discover-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all var(--transition);
    text-decoration: none;
}

.discover-link:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Main nav tabs — iconless, pill container matches marketing's treatment.
   Pattern: subtle-bg container holds inactive tabs; active tab "sinks" to the
   body bg with a tiny shadow so it reads as pressed-in, not elevated. */
.main-nav-tabs {
    display: inline-flex;
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
    padding: 3px;
    gap: 2px;
}

.main-nav-tab {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.main-nav-tab:hover {
    color: var(--text);
    background: var(--accent-subtle);
}

.main-nav-tab.active {
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* Dark-mode: bump pill bg and active-tab bg to marketing-matching values
   (body bg is #0A0A0A here but marketing uses #000000 for the active-tab
   contrast to pop). */
[data-theme="dark"] .main-nav-tabs {
    background: #1d1d1f;
}

[data-theme="dark"] .main-nav-tab.active {
    background: #000000;
}

/* Icons hidden — text-only tabs for a more luxury feel. */
.main-nav-tab svg {
    display: none;
}

@media (max-width: 768px) {
    .main-nav-tabs {
        width: 100%;
    }

    .main-nav-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }
}


/* ===== SHARE MODAL ===== */
.share-modal-content {
    max-width: 400px;
    padding: 1.25rem 1.75rem 1.75rem;
}

.share-modal-content h2 {
    text-align: center;
    margin-bottom: 0.25rem;
}

.share-modal-content > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.share-section h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.share-identity-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.share-option-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-option-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.share-option-btn small {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

.social-share-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.social-btn:hover {
    transform: translateY(-1px);
}

.social-btn.twitter:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.social-btn.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.social-btn.pinterest:hover {
    background: #e60023;
    border-color: #e60023;
    color: #fff;
}

.social-btn.copy-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.social-btn.download:hover {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.social-btn.native-share {
    background: var(--bg-secondary);
}

.social-btn.native-share:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.share-close-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (max-width: 480px) {
    .social-share-buttons {
        grid-template-columns: 1fr;
    }
}


.share-modal-content {
    max-width: 400px;
    padding: 1.25rem 1.75rem 1.75rem;
}

.share-modal-content h2 {
    text-align: center;
    margin-bottom: 0.25rem;
}

.share-modal-content > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.share-section h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* Main Share Button */
.share-discover-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    background: #222;
    border: none;
    border-radius: var(--radius-lg);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-discover-btn:hover:not(:disabled) {
    background: #333;
}

.share-discover-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.share-discover-btn .btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Shared success state */
.share-discover-btn.shared {
    background: var(--success, #22c55e);
    cursor: default;
}

.share-discover-btn.shared:hover {
    background: var(--success, #22c55e);
}

/* DISABLED 2026-04-30: styled the inline "promotion notice" in the share modal
   for the "Promote to Public" UX. Reverted as clutter — restore alongside the
   commented HTML element in templates/index.html and the JS lookup in app.js
   to re-enable.

.share-promotion-notice {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.share-promotion-notice.hidden {
    display: none;
}
*/

/* Share link preview */
.share-link-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.share-link-preview .share-link-url {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
}

/* Social Buttons */
.social-share-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.social-btn:hover {
    transform: translateY(-1px);
}

.social-btn.twitter:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.social-btn.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.social-btn.pinterest:hover {
    background: #e60023;
    border-color: #e60023;
    color: #fff;
}

.social-btn.copy-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.share-close-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (max-width: 480px) {
    .social-share-buttons {
        grid-template-columns: 1fr;
    }
}


/* ===== GENERATION SHARE MODAL (collections page) ===== */

.gen-share-modal {
    display: flex;
    flex-direction: row;
    transition: max-width 0.3s ease;
}

.gen-share-modal .detail-layout {
    flex: 1;
    min-width: 0;
}

.gen-share-modal:has(.detail-share-panel.open) {
    max-width: min(95vw, 1400px);
}

/* /app share panel: back-arrow only shows on mobile (X is the desktop default) */
.gen-share-modal .share-panel-close .share-close-back {
    display: none;
}

@media (max-width: 768px) {
    /* Swap X for left-pointing back arrow on mobile */
    .gen-share-modal .share-panel-close .share-close-x {
        display: none;
    }
    .gen-share-modal .share-panel-close .share-close-back {
        display: block;
    }
    /* Move the back button to the left of the "Share" title (mobile back-nav pattern) */
    .gen-share-modal .share-panel-header {
        justify-content: flex-start;
        gap: 12px;
    }
    .gen-share-modal .share-panel-close {
        order: -1;
        width: 40px;
        height: 40px;
    }

    /* Slide up from bottom on mobile (matches /generations bottom-sheet
       pattern). position: fixed escapes the modal flow so the panel pins
       to the viewport bottom; transform replaces the desktop width animation. */
    .gen-share-modal .detail-share-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 60vh;
        overflow-y: auto;
        background: var(--bg-elevated);
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s ease, visibility 0s 0.3s;
        visibility: hidden;
        z-index: 20;
    }

    .gen-share-modal .detail-share-panel.open {
        width: 100%;
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s 0s;
    }
}

/* ===== SHARE DROPDOWN (global) ===== */

.share-btn-wrapper {
    position: relative;
}

.detail-cta .share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}

.detail-cta .share-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.share-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    /* Frosted recipe — unified popup language. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    min-width: 150px;
    /* Edge-to-edge items (date-dropdown pattern). */
    overflow: hidden;
    z-index: 100;
    /* Opacity-based show/hide to keep backdrop-filter warm. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s, transform 0.15s ease;
    will-change: backdrop-filter;
}

.share-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.detail-cta .share-dropdown {
    left: auto;
    right: 0;
    transform: none;
    animation: shareDropInRight 0.15s ease;
}

@keyframes shareDropInRight {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.share-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    /* No border-radius: hover fills the full cell edge-to-edge, clipped by
       the parent .share-dropdown's overflow:hidden + rounded corners. */
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.share-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.25);
}

@keyframes shareDropIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== GENERATION DETAIL MODAL ===== */
.detail-modal-content {
    width: fit-content;
    max-width: min(95vw, 1100px);
    max-height: 90vh;
    padding: 0;
    overflow: hidden auto;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.detail-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    max-height: 90vh;
}

.detail-layout.wide-layout {
    grid-template-columns: 1fr;
    /* Cap the wide layout at 90vh and split it into image-row + info-row.
       Without these limits the layout grew past 90vh whenever the prompt
       was long, modal-content's overflow:auto kicked in, and the absolutely-
       positioned `.detail-collection-panel` (top:0;bottom:0) ended up
       shorter than the visible modal — leaving empty space below the
       panel before the bottom Recreate row. With the layout bounded, the
       prompt's own `overflow-y:auto` is the only scrollable region; the
       modal stops scrolling and the collection panel fills the full
       height cleanly. minmax(0, 1fr) lets the info row shrink below its
       content size so flex children inside (prompt-section with
       `flex:1`) actually distribute the remaining space. */
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 90vh;
    align-self: flex-start;
}

.detail-layout.wide-layout .detail-image-container img {
    max-height: 60vh;
}

/* Cap the prompt itself so long prompts scroll internally regardless of
   whether the layout is bounded (big screens have layout max-height: 90vh
   + info overflow:hidden; laptops release those constraints to give the
   info room to breathe — but the prompt's own max-height kicks in either
   way to keep the prompt scroll affordance and prevent a wall of text). */
.detail-layout.wide-layout .detail-prompt {
    max-height: 200px;
}

/* Short viewports (≤850px tall — typical 15.6" laptop): the 90vh layout
   cap + ~270px of fixed info content (header + tags + meta + cta) leaves
   no room for `.detail-prompt-section` (`flex: 1 1 0` collapses to 0 →
   prompt invisible). Release the layout cap and the info `overflow:hidden`
   so info shows naturally; modal-content's own overflow:auto handles any
   tiny overflow. The prompt rule above still gives an internal scroll
   when the prompt is long. Trade-off: the collection panel may not span
   the full modal height on these screens. */
@media (max-height: 850px) {
    .detail-layout.wide-layout {
        max-height: none;
        grid-template-rows: auto auto;
    }
    .detail-layout.wide-layout .detail-info {
        overflow: visible;
    }
}

/* On taller viewports, force modal-content to hide overflow when the wide
   layout is active. Image (60vh) + info (~30vh) + container padding fit
   within 90vh by design, but content-box on modal-content (1px border each
   side) puts the wrapping box at 90vh+2px which would otherwise trigger
   a useless ~2-pixel scrollbar via modal-content's default overflow:auto. */
@media (min-height: 851px) {
    .detail-modal-content:has(.detail-layout.wide-layout) {
        overflow: hidden;
    }
}

.detail-layout.wide-layout .detail-info {
    border-left: none;
    border-top: 1px solid var(--border);
    contain: none;
    /* Hide info-level overflow so the inner `.detail-prompt` (which has its
       own `overflow-y:auto`) is the single scrollable region — avoids a
       double-scrollbar (info-level + prompt-level) when the prompt is long. */
    overflow: hidden;
    min-height: 0;
}

.detail-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.detail-image-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    transition: filter 0.2s ease-out;
}

/* Desktop only: size the detail image by its container (which the JS open
   flow pre-sizes to the FULL image's display box) instead of the image's
   intrinsic pixels, so the 800px progressive thumb and the full-res image
   render at the SAME size -- no "minimised then grow" jump. Mirrors the
   studio .output-display img fix. Scoped to :not(.wide-layout) because only
   the normal layout sets a fixed px grid column; wide-layout keeps its own
   max-height rule and mobile (<=768px) keeps intrinsic sizing. Shared by
   profile, /p (collection_post), /app generation-modal, and gen-share-modal. */
@media (min-width: 769px) {
    .detail-layout:not(.wide-layout) .detail-image-container img {
        width: 100%;
        height: 100%;
    }
}

/* Blur-up: while showing the 800px thumb, softly blur it. Cleared the
   instant the full-resolution image replaces it. Kept subtle since the
   thumb is already high quality. */
.detail-image-container img.is-thumb {
    filter: blur(4px);
}

.detail-info {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid var(--border);
    overflow-y: auto;
    min-height: 0;
    background: var(--bg-elevated);
    contain: size;
}

.detail-header {
    flex-shrink: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.detail-user {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.detail-user .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
    overflow: hidden;
}

.detail-user .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-user .user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: none;
    padding: 0;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-user .user-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.detail-user .post-time {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.detail-user-link {
    text-decoration: none;
}

.detail-user-link:hover .user-name {
    color: var(--accent);
}

.follow-btn-pill {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.follow-btn-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.follow-btn-pill.following {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-muted);
}

.follow-btn-pill.following:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.follow-btn-pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.detail-prompt-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.detail-prompt-section label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.detail-prompt {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text);
    min-height: 40px;
    flex: 1 1 auto;
    overflow-y: auto;
}

.detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex-shrink: 0;
}

.detail-meta .meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.detail-meta .meta-item label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.detail-meta .meta-item span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
}

.detail-meta .meta-collection-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.detail-meta .meta-collection-link:hover {
    border-color: var(--accent);
}

.detail-meta .meta-collection-link span {
    color: var(--accent);
}

.detail-meta:has(.meta-collection-link:not(.hidden)) {
    grid-template-columns: 1fr 1fr 1fr;
}

.detail-tags-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.detail-tags-section.hidden {
    display: none;
}

.detail-tags-section label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition);
}

.detail-tag:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text);
}

.detail-cta {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: auto;
    flex-shrink: 0;
}

.detail-cta .btn-secondary,
.detail-cta .btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 600;
}

.detail-cta .like-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.detail-cta .like-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.detail-cta .like-btn.liked {
    color: #e53935;
    border-color: rgba(229, 57, 53, 0.3);
    background: rgba(229, 57, 53, 0.1);
}

.detail-cta .like-btn.liked svg {
    fill: #e53935;
}

.detail-cta .bookmark-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.detail-cta .bookmark-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.detail-cta .bookmark-btn.bookmarked {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.detail-cta .bookmark-btn.bookmarked svg {
    fill: var(--accent);
}

.detail-cta .recreate-btn {
    flex: 1;
}

.recreate-divider {
    opacity: 0.5;
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Fullscreen fixed overlay — minimizes browser chrome */
    .detail-modal-content {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .detail-layout {
        grid-template-columns: 1fr;
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .detail-image-container {
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    .detail-image-container img {
        max-height: 50vh;
        border-radius: 0;
    }

    .detail-info {
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 16px;
        overflow: visible !important;
        contain: none;
    }

    .detail-prompt-section {
        overflow: visible !important;
        flex: 0 0 auto;
    }

    .detail-prompt {
        max-height: 200px;
        overflow-y: auto;
    }

    /* CTA: horizontal row, icon-only compact buttons */
    .detail-cta {
        flex-direction: row;
        gap: 6px;
        padding-bottom: 16px;
    }

    .detail-cta .btn-primary,
    .detail-cta .btn-secondary {
        padding: 10px;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .detail-cta .btn-primary svg,
    .detail-cta .btn-secondary svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Hide button text, keep icons */
    .detail-cta .btn-primary span,
    .detail-cta .btn-secondary span {
        display: none;
    }

    /* Open Collection button keeps text since it's the primary action */
    .detail-cta .btn-primary {
        width: auto;
        flex: 1;
        padding: 10px 16px;
        font-size: 0.8125rem;
        gap: 6px;
    }

    .detail-cta .btn-primary span {
        display: inline;
    }
}


.folder-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.folder-action-btn {
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

.folder-card:hover .folder-action-btn {
    opacity: 1;
}

.folder-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.folder-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.folder-name-input {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    width: 100%;
    outline: none;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}

@media (max-width: 768px) {
    .folder-name-input {
        font-size: 16px;
    }
    .collections-search input {
        font-size: 16px;
    }
}

/* ============ TAG INPUT ============ */
.tags-input-container {
    margin-bottom: 16px;
}

.tags-input-container label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    min-height: 44px;
    align-items: center;
    transition: border-color 0.2s;
}

.tags-input-wrapper:focus-within {
    border-color: var(--accent);
}

.tags-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-hover);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.tag-pill-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    color: white;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}

.tag-pill-remove:hover {
    color: var(--text);
}

#share-tags-input,
#batch-share-tags-input {
    flex: 1;
    min-width: 80px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

#share-tags-input::placeholder,
#batch-share-tags-input::placeholder {
    color: var(--text-muted);
}

.tags-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    transition: color 0.2s;
}

.tags-hint.tags-error {
    color: #e53935;
}

.tags-limit-reached input {
    display: none;
}

/* ============ IMAGE VIEWER (Fullscreen Zoom/Pan) ============ */

.detail-image-container img {
    cursor: zoom-in;
}

/* ============ IMAGE RIGHT-CLICK MENU ============ */
.img-context-menu {
    position: fixed;
    z-index: 10100;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    padding: 4px;
    min-width: 180px;
    display: none;
    user-select: none;
}
.img-context-menu.open { display: block; }
.img-context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    color: #fafafa;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    font-family: inherit;
}
.img-context-item:hover { background: rgba(255, 255, 255, 0.06); }
.img-context-item.danger { color: #ef4444; }
.img-context-item svg { width: 14px; height: 14px; flex-shrink: 0; }
html[data-theme="light"] .img-context-menu {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .img-context-item { color: #0a0a0a; }
html[data-theme="light"] .img-context-item:hover { background: rgba(0, 0, 0, 0.05); }

.image-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.image-viewer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.image-viewer-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-viewer-img {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.image-viewer-img.zoomed {
    cursor: grab;
}

.image-viewer-img.zoomed.dragging {
    cursor: grabbing;
    transition: none;
}

.image-viewer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

.image-viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.image-viewer-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.image-viewer-overlay.zoomed .image-viewer-hint {
    opacity: 0;
}

.image-viewer-zoom-level {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-viewer-overlay.zoomed .image-viewer-zoom-level {
    opacity: 1;
}

/* ============ SELECTION MODE ============ */

.btn-select-mode {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-select-mode:hover {
    color: var(--text);
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.selection-header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.btn-selection-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-selection-action:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.btn-selection-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Selection checkbox on thumbnails */
.selection-checkbox {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 2;
}

.selection-checkbox.checked {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.selection-checkbox:hover {
    transform: scale(1.1);
}

.generation-thumb.selected {
    border-color: var(--accent);
}

.generation-thumb.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(99, 102, 241, 0.1);
    pointer-events: none;
    border-radius: inherit;
}

/* ============ SAVE COLLECTION MODAL ============ */

/* Save collection modal inherits from batch-share-modal-content */

/* ============ BATCH SHARE MODAL ============ */

.batch-share-modal-content {
    max-width: 720px;
    width: 90vw;
    max-height: 90vh;
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}

.batch-share-modal-content h2 {
    text-align: center;
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.batch-share-modal-content > p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    text-align: center;
}

.share-collection-toggle,
.share-anonymous-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.875rem;
}

.share-anonymous-toggle .toggle-label {
    order: -1;
}

.share-anonymous-toggle .toggle-track {
    margin-left: auto;
}

.share-collection-toggle input[type="checkbox"],
.share-anonymous-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

input[type="checkbox"]:checked + .toggle-track {
    background: var(--accent);
}

input[type="checkbox"]:checked + .toggle-track .toggle-knob {
    transform: translateX(18px);
    background: var(--bg);
}

.share-collection-toggle .toggle-label,
.share-anonymous-toggle .toggle-label {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.collection-already-hint {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.share-collection-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collection-title-inline {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    font-size: 0.8125rem;
    transition: border-color var(--transition);
}

.collection-title-inline:focus {
    outline: none;
    border-color: var(--accent);
}

.collection-title-inline::placeholder {
    color: var(--text-muted);
}

.collection-min-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: #e6a817;
}

.batch-share-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 1rem;
}

.batch-share-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
}

.batch-share-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-share-thumb:hover {
    border-color: var(--text-muted);
}

.batch-share-thumb.active {
    border-color: var(--accent);
}

.batch-share-tagged-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.batch-share-preview {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
}

.batch-share-preview img {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    cursor: zoom-in;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    display: block;
}

/* Collection name input (above thumbs) */
.batch-share-name-row {
    margin-bottom: 1rem;
}

.batch-share-name-row:empty {
    display: none;
}

.batch-share-name-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.collection-title-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9375rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition), opacity var(--transition);
    box-sizing: border-box;
}

.collection-title-input:focus {
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .collection-title-input {
        font-size: 16px;
    }
}

.collection-title-input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Editable collection title on /c/ and /saved/ pages */
.page-collection-title.editable {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    cursor: text;
    transition: background 0.15s;
}

.page-collection-title.editable:hover {
    background: var(--bg-hover);
}

.page-collection-title.editable:focus {
    outline: none;
    background: var(--bg-secondary);
}

/* Toggles row: collection + anonymous, always flat */
.batch-share-toggles-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.batch-share-toggles-row .share-anonymous-toggle {
    position: relative;
    top: -3px;
}

.share-anonymous-toggle.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.batch-share-editor .tags-input-container {
    margin-bottom: 12px;
}

.batch-share-editor .collection-already-hint {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Footer */
.batch-share-footer {
    padding-top: 4px;
    flex-shrink: 0;
}

.batch-share-footer .share-discover-btn {
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.875rem;
    border-radius: var(--radius-lg);
    letter-spacing: -0.01em;
}


/* ===== DEMO TOUR ===== */
.demo-btn {
    background: var(--accent-subtle);
    color: var(--text-secondary);
    border-color: var(--border);
}

.demo-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--text-muted);
}

.demo-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

.demo-tour-overlay.hidden {
    display: none;
}

.demo-tour-spotlight {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    z-index: 3001;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

.demo-tour-tooltip {
    position: absolute;
    z-index: 3002;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    max-width: 300px;
    width: max-content;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    pointer-events: auto;
    animation: tourTooltipIn 0.3s ease;
}

@keyframes tourTooltipIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.demo-tour-step-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0.75rem;
}

.demo-tour-counter {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-right: 4px;
    white-space: nowrap;
}

.demo-tour-step-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s ease;
}

.demo-tour-step-indicator .dot.done {
    background: var(--text-muted);
}

.demo-tour-step-indicator .dot.active {
    background: var(--accent);
    width: 18px;
    border-radius: 3px;
}

.demo-tour-tooltip h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.375rem;
}

.demo-tour-tooltip p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.demo-tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-tour-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}

.demo-tour-skip:hover {
    color: var(--text);
}

.demo-tour-next {
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all var(--transition);
}

.demo-tour-next:hover {
    opacity: 0.85;
}

/* ===== PROMPT TEMPLATES ===== */
.template-category {
    width: 100%;
    margin-bottom: 1rem;
}

.template-category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 2px;
    margin-bottom: 6px;
}

.template-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    color: var(--text);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.template-card:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

.template-text {
    flex: 1;
}

.template-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.template-card:hover .template-arrow {
    opacity: 1;
}

/* ===== TOUCH DEVICE FIXES ===== */

/* Show overlays on touch devices (no hover available). Action clusters
   themselves are NOT forced visible here — that produced "persistent"
   buttons cluttering the card. Instead we let iOS Safari's :hover
   simulation reveal them on tap, fade them out on tap-elsewhere. The
   parent's opacity transition keeps the reveal smooth and in sync with
   the (sibling) report button's transition. */
@media (hover: none) {
    .generation-card-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%);
    }

    .folder-card .folder-action-btn {
        opacity: 1;
    }
}

/* Larger touch targets on coarse pointer devices */
@media (pointer: coarse) {
    .mobile-panel-close {
        width: 36px;
        height: 36px;
    }

    .share-gen-btn {
        width: 36px;
        height: 36px;
    }

    .generation-thumb .delete-gen-btn {
        width: 36px;
        height: 36px;
    }

    /* Match the share/delete sizing on touch — without these the @ (save-muse)
       and report (thumbs-down) buttons stayed at their 26px desktop size while
       their siblings bumped to 36px, leaving a visibly mismatched action row. */
    .generation-thumb-actions .save-muse-btn {
        width: 36px;
        height: 36px;
    }

    .generation-thumb .report-gen-btn {
        width: 36px;
        height: 36px;
    }

    .generation-thumb .download-gen-btn {
        width: 36px;
        height: 36px;
    }

    .tag-pill-remove {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .selection-checkbox {
        width: 28px;
        height: 28px;
    }

    .generation-card .selection-checkbox {
        width: 32px;
        height: 32px;
    }
}

/* Batch share thumbs responsive grid */
@media (max-width: 768px) {
    .batch-share-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }

    .batch-share-modal-content {
        width: 95vw;
        padding: 1.25rem 1rem 1.5rem;
    }
}

/* ======================================================================
   MOBILE COLLECTIONS REDESIGN (v3.4.4)
   4-tab bottom nav + full-screen Discover overlay + settings sheet +
   fixed prompt bar (promotes #tab-prompt from hidden sidebar)
   ====================================================================== */

/* Mobile discover header is only visible when promoted as overlay */
.mobile-discover-header {
    display: none;
}

@media (max-width: 768px) {
    /* ---- Hide notification bell on mobile only inside the studio (index.html).
       Other pages (discover, generations, profile, settings, /c/, /p/) show it. ---- */
    .studio-app .notification-wrapper {
        display: none !important;
    }

    /* ---- Prevent iOS auto-zoom when focusing inputs (needs >= 16px) ---- */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* ---- Bottom nav: Canvas pops as the primary action ---- */
    .mobile-nav-btn.mobile-nav-canvas {
        color: var(--accent);
    }

    .mobile-nav-btn.mobile-nav-canvas.active {
        color: var(--bg);
        background: var(--accent);
    }

    .mobile-nav-btn.mobile-nav-canvas.active svg {
        color: var(--bg);
    }

    /* Larger tap targets across the bottom nav */
    .mobile-nav-btn {
        min-height: 52px;
        padding: 0.5rem 0.25rem;
    }

    /* ---- Let the body own the scroll, kill nested scrollbars ----
       Collection view + studio layout flow naturally on mobile so there's
       only one scroll axis (document). Prompt bar is pinned via fixed
       positioning (below), and the image area scrolls inside the body. */
    body.in-collection #collection-view {
        height: auto !important;
        overflow: visible !important;
    }

    body.in-collection .studio-layout {
        display: flex !important;
        flex-direction: column;
        overflow: hidden !important;
        min-height: 0;
        height: 0;
    }

    /* Lock body scroll while inside a collection on mobile — the fixed
       sidebar-left (canvas) or discover overlay already fills the viewport,
       and the mobile nav is fixed. Nothing outside those should scroll.
       overscroll-behavior: none here (not on html/body globally) prevents
       the iOS rubber-band-bounce → URL-bar wobble while letting normal
       pull-to-refresh keep working on every other page on the site. */
    body.in-collection,
    html:has(body.in-collection) {
        overflow: hidden !important;
        height: 100vh;
        height: 100dvh;
        touch-action: none;
        overscroll-behavior: none;
    }

    /* Re-enable touch scroll on legitimate scroll regions inside the app.
       Includes the contenteditable .prompt-editor — without it, typed
       content that exceeds the editor's min-height triggers an
       overflow-y: auto scroll that touch-action: none blocks, and iOS
       Safari falls back to scrolling the body instead, which paints an
       extra scrollbar and shifts the viewport mid-typing. */
    body.in-collection .mobile-panel,
    body.in-collection .mobile-panel-content,
    body.in-collection #tab-prompt textarea,
    body.in-collection #tab-prompt .prompt-editor,
    body.in-collection #discover-posts-grid,
    body.in-collection .modal,
    body.in-collection .modal-content {
        touch-action: auto;
    }

    /* studio-center is hidden on mobile canvas; no layout needed */

    /* ---- Canvas mode: hide the generated-image canvas, use full screen
       for the prompt + settings. The output/history lives in "Creations". */
    body.in-collection .studio-center {
        display: none !important;
    }

    body.in-collection .sidebar-left {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--mobile-nav-height);
        top: var(--header-height);
        width: auto !important;
        max-width: none;
        max-height: none;
        z-index: 400;
        background: var(--bg);
        border-top: none;
        border-right: none;
        padding: 0;
        overflow: hidden;
    }

    body.in-collection .sidebar-left .sidebar-tabs,
    body.in-collection .sidebar-left .resize-handle,
    body.in-collection .sidebar-left #tab-references,
    body.in-collection .sidebar-left #tab-discover {
        display: none !important;
    }

    /* Canvas tab: ONLY the textarea has a scrollbar. Every ancestor is
       overflow:hidden and its webkit scrollbar is suppressed. We deliberately
       keep .prompt-tab-controls as overflow:visible so the credit-cost badge
       ("X left") on the Generate button isn't clipped. */
    body.in-collection .sidebar-left,
    body.in-collection .sidebar-left #tab-prompt,
    body.in-collection .sidebar-left #tab-prompt .sidebar-prompt-wrapper,
    body.in-collection .sidebar-left #tab-prompt .prompt-toolbar {
        overflow: hidden !important;
        scrollbar-width: none;
    }

    body.in-collection .sidebar-left::-webkit-scrollbar,
    body.in-collection .sidebar-left #tab-prompt::-webkit-scrollbar,
    body.in-collection .sidebar-left #tab-prompt .sidebar-prompt-wrapper::-webkit-scrollbar,
    body.in-collection .sidebar-left #tab-prompt .prompt-toolbar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.in-collection .sidebar-left #tab-prompt .prompt-tab-controls {
        overflow: visible;
    }

    /* Same allowance for the toolbar AND its wrapper so the saved-prompts
       dropdown can render below the Browse Prompts button without being
       clipped. The scrollbar suppression above doesn't matter here — these
       containers aren't supposed to scroll. The only side effect of
       overflow:hidden was clipping the absolutely-positioned dropdown
       (max-height 280px, position:absolute child of .prompt-toolbar).
       The dropdown's z-index already lifts it above the composer. */
    body.in-collection .sidebar-left #tab-prompt .prompt-toolbar,
    body.in-collection .sidebar-left #tab-prompt .sidebar-prompt-wrapper {
        overflow: visible !important;
    }

    /* Drop the toolbar's bottom margin on mobile; the prompt-wrapper's
       gap below already separates it from the composer. Without this,
       margin and gap stack to ~20px of empty space. */
    body.in-collection .sidebar-left #tab-prompt .prompt-toolbar {
        margin-bottom: 0;
    }

    /* Tighter buttons in the prompt toolbar (Save / Browse Prompts /
       clear-X). Default 5px 10px padding plus 0.75rem font-size on the
       16px-bumped mobile rule visually padded them more than they need
       on a phone. */
    body.in-collection .sidebar-left #tab-prompt .prompt-tool-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* The Library trigger label alone is plenty on a phone — drop the
       icon SVG to keep all three controls (Settings · Library · Create)
       reading as a clean horizontal row. Same treatment for the Settings
       button's chevron — the "1:1 / 1K / S" label is the meaningful
       content; the chevron only adds visual noise at this size. */
    .mobile-library-btn > svg,
    body.in-collection .settings-btn > svg {
        display: none;
    }

    body.in-collection .sidebar-left #tab-prompt {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding: 1rem;
        gap: 0.75rem;
    }

    body.in-collection .sidebar-left #tab-prompt .sidebar-prompt-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        gap: 0.25rem;
    }

    body.in-collection .sidebar-left #tab-prompt textarea {
        flex: 1;
        min-height: 120px;
        max-height: none;
        resize: none;
        overflow-y: auto !important;
    }

    /* ---- Discover overlay mode (covers the entire viewport) ---- */
    body.in-collection.mobile-discover-open .sidebar-left {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: none;
        z-index: 1100;
    }

    /* Hide the bottom nav while Discover is open — only X closes it */
    body.mobile-discover-open .mobile-nav {
        display: none !important;
    }

    /* When a modal opens from inside the Discover overlay, it must stack on
       top of it (Discover is z-index:1100; base modal is z-index:1000). */
    body.mobile-discover-open .modal:not(.hidden),
    body.mobile-discover-open #discover-detail-modal,
    body.mobile-discover-open #detail-modal {
        z-index: 1200 !important;
    }

    body.in-collection.mobile-discover-open .sidebar-left #tab-prompt {
        display: none !important;
    }

    body.in-collection.mobile-discover-open .sidebar-left #tab-discover {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    body.in-collection.mobile-discover-open .mobile-discover-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(0.25rem + env(safe-area-inset-top)) 0.75rem 0.25rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }

    body.in-collection.mobile-discover-open .mobile-discover-header h3 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
        margin: 0;
    }

    .mobile-discover-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -0.5rem;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
    }

    .mobile-discover-close:active {
        background: var(--bg-hover);
    }

    body.in-collection.mobile-discover-open .sidebar-left .discover-search-bar,
    body.in-collection.mobile-discover-open .sidebar-left .discover-subtabs-grid {
        flex-shrink: 0;
    }

    /* Mobile discover panel: bigger search bar that matches other pages
       (~40px tall vs the cramped 32px desktop sidebar size), plus breathing
       room between the panel header and the search input. */
    body.in-collection.mobile-discover-open .sidebar-left .discover-search-bar {
        height: 40px;
        padding: 8px 14px;
        margin: 12px 12px 12px;
        border-radius: 100px;
    }
    body.in-collection.mobile-discover-open .sidebar-left .discover-search-bar input {
        font-size: 16px;
    }

    /* Mobile overlay: force a proper 2-col CSS grid (desktop uses the original
       flex-wrap layout from the base rule). The base flex-wrap + calc(50% - 4px)
       math is brittle at mobile widths due to subpixel rounding. */
    body.in-collection.mobile-discover-open #discover-posts-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 0.75rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        align-content: start;
    }

    body.in-collection.mobile-discover-open #discover-posts-grid .discover-post-card {
        width: 100%;
        padding-bottom: 100%;
    }

    /* Lock page scroll while the Discover overlay is open.
       JS pins the body (position:fixed with saved scrollY) for iOS reliability. */
    body.mobile-discover-open {
        overflow: hidden !important;
        touch-action: none;
    }

    html.mobile-discover-open-html {
        overflow: hidden !important;
    }

    /* ---- Creations (generations) as 2x2 grid on mobile ---- */
    .mobile-panel .generations-grid,
    #mobile-generations-grid.generations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ---- Image viewer on mobile ----
       Uses the same Pointer Events code path as desktop: single-finger tap
       to toggle zoom, single-finger drag to pan while zoomed, two-finger
       pinch for free zoom. Transitions are disabled so pinch/drag feels
       1:1 with finger movement. */
    .image-viewer-img {
        cursor: default;
        transition: none;
    }

    .image-viewer-hint,
    .image-viewer-zoom-level {
        display: none !important;
    }

    /* ---- Bigger tap targets on close buttons ---- */
    .modal-close,
    .mobile-panel-close {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (max-width: 480px) {
    .batch-share-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Light-red selection while cycling flagged words in the prompt */
.highlight-flagged::selection {
    background: rgba(239, 68, 68, 0.35);
    color: inherit;
}

/* ============ CATEGORIZED PRESETS ============ */

/* Prompt composer: one bordered container that holds chips + textarea.
   Chips appear at the top, textarea fills the rest. Feels like a unified
   prompt input rather than two stacked elements. */
.prompt-composer {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;                     /* fill remaining sidebar height */
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease;
    overflow: hidden;
    min-height: 120px;
}

.prompt-composer:focus-within {
    border-color: var(--text-muted);
}

/* Textarea inside the composer loses its own border/bg; composer owns them. */
.prompt-composer textarea,
.sidebar-prompt-wrapper .prompt-composer textarea {
    flex: 1;
    width: 100%;
    padding: 0.625rem 0.875rem 0.875rem;
    font-size: 0.9375rem;
    background: transparent;
    border: none;
    border-radius: 0;
    resize: none;
    line-height: 1.5;
    min-height: 96px;
    max-height: none;
    outline: none;
}

.prompt-composer textarea:focus {
    border: none;
    outline: none;
}

/* Preset chips: sit above the textarea inside the composer */
.preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0.625rem 0.625rem 0;
}

.preset-chips:empty {
    display: none;
}

.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* Clickable label body — desktop click opens the Presets panel.
   Mobile tap is ignored via isMobileChipTap() so the press doesn't conflict
   with chip preview / drag affordances. */
.preset-chip-body {
    cursor: pointer;
}
@media (max-width: 768px) {
    .preset-chip-body {
        cursor: default;
    }
}

.preset-chip .chip-remove {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
    color: currentColor;
}

.preset-chip .chip-remove:hover {
    opacity: 1;
    background: rgba(127, 127, 127, 0.15);
}

/* 2x2 button grid. Top row: Muses / Aesthetics. Bottom row: Settings / Create.
   4-col grid, every cell spans 2 — both rows stay edge-to-edge. Presets has
   no dedicated trigger; it lives as a tab inside the library panel (opened
   via Muses or Aesthetics) so the toolbar stays tidy as we add Models etc.
   Hidden inputs inside this container are display:none by default and don't
   consume grid cells. */
.prompt-tab-controls.prompt-controls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 48px;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

/* Row 1: two library triggers each span 2 of 4 columns */
.prompt-controls-grid > .presets-trigger-btn {
    grid-column: span 2;
}

/* Row 2: two controls each span 2 of 4 columns */
.prompt-controls-grid > .settings-dropdown-wrapper,
.prompt-controls-grid > .create-wrapper {
    grid-column: span 2;
}

/* The mobile-only Library trigger is hidden on desktop — the two full
   triggers (Muses / Aesthetics) stay visible there. */
.prompt-controls-grid > .mobile-library-btn {
    display: none;
}

/* Mobile: collapse to a single row [Settings | Library | Create]. The
   desktop-only triggers (Muses / Aesthetics) hide; the single Library
   button takes their place visually and opens the same unified panel
   where tabs switch between Muses / Aesthetics / Presets. */
@media (max-width: 768px) {
    .prompt-tab-controls.prompt-controls-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .prompt-controls-grid > .presets-trigger-btn:not(.mobile-library-btn) {
        display: none;
    }
    .prompt-controls-grid > .mobile-library-btn {
        display: flex;
        grid-column: span 1;
    }
    .prompt-controls-grid > .settings-dropdown-wrapper,
    .prompt-controls-grid > .create-wrapper {
        grid-column: span 1;
    }
}

.prompt-controls-grid .settings-dropdown-wrapper,
.prompt-controls-grid .create-wrapper,
.prompt-controls-grid > button,
.prompt-controls-grid > .prompt-controls-empty {
    min-width: 0;
    width: 100%;
}

.prompt-controls-grid .presets-trigger-btn,
.prompt-controls-grid .settings-btn,
.prompt-controls-grid .btn-generate {
    width: 100%;
    height: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

/* Create button's inner span also needs the bumped size so "Create" label
   reads at the same weight as Settings / Presets labels. */
.prompt-controls-grid .btn-generate .btn-text {
    font-size: 1rem;
}

.prompt-controls-empty {
    pointer-events: none;
}

/* Presets trigger — matches .settings-btn visual treatment. */
.presets-trigger-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

.presets-trigger-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.presets-trigger-count {
    display: none;
    min-width: 18px;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    margin-left: 2px;
}

.presets-trigger-count:not(:empty) {
    display: inline-block;
}

/* Slide-in panel: emerges from the sidebar/canvas seam via clip-path so the
   reveal animates column-by-column from the sidebar's right edge. Starts
   BELOW the app header so the header (Collection title, recreateme.ai brand)
   stays visible and untouched when the panel opens. No backdrop dim. */
.presets-panel {
    position: fixed;
    top: var(--header-height);
    left: var(--sidebar-left-width);
    width: min(480px, calc(100vw - var(--sidebar-left-width)));
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    background: var(--bg);
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 24px -8px rgba(0, 0, 0, 0.18);
    z-index: 90;
    display: flex;
    flex-direction: column;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    transition: clip-path 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-clip-path 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    will-change: clip-path;
}

.presets-panel.open {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    pointer-events: auto;
}


.presets-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Top padding 11 (was 14 originally) lifts the MUSES · AESTHETICS ·
       PRESETS row up so it aligns with the My Images / Discover / Prompt
       row on the left sidebar. Bottom padding reduced 14→6.5 keeps the
       bottom border tight to the row. Background switched from
       --bg-secondary to --bg to match the left sidebar's tab-row background. */
    padding: 11px 16px 7.5px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
}

.presets-panel-header h3 {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.presets-close-btn {
    color: var(--text-secondary);
}

.presets-close-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.2s ease, color 0.2s ease;
}

.presets-close-btn:hover {
    background: var(--surface);
    color: var(--text);
}

.presets-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 28px;
}

.preset-category {
    margin-bottom: 26px;
}

.preset-category:last-child {
    margin-bottom: 0;
}

.preset-category-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.preset-category-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    margin: 0;
}

.preset-category-hint {
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.preset-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1.75px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.15s ease, background 0.18s ease;
    overflow: hidden;
    text-align: center;
    font-family: inherit;
}

.preset-card:hover {
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

.preset-card.active {
    border-color: var(--text);
    background: var(--surface);
}

.preset-card-thumb {
    aspect-ratio: 1 / 1;
    background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 26px;
    position: relative;
    letter-spacing: 0;
    overflow: hidden;
}
.preset-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Fallback glyph when the conventional file (static/presets/{cat}-{val}.jpg)
   returns 404 — the onerror handler removes the <img> and adds .no-thumb. */
.preset-card-thumb.no-thumb::before {
    content: '✦';
    font-size: 26px;
    color: var(--text-muted);
}

/* Selection checkmark badge — same visual as the creations selection checkbox
   (`.selection-checkbox.checked`): accent-colored circle, white/black check
   based on theme. Reused on `.aesthetic-card.active` below for consistency. */
.preset-card.active .preset-card-thumb::after,
.aesthetic-card.active .aesthetic-card-thumb::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--text);
    /* Default (light mode): --text is dark so the circle is dark; checkmark is white. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark mode: --text is light so the circle is light; checkmark must be black. */
[data-theme="dark"] .preset-card.active .preset-card-thumb::after,
[data-theme="dark"] .aesthetic-card.active .aesthetic-card-thumb::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000000' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

.preset-card-label {
    padding: 7px 8px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
}

.presets-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

.presets-clear-btn {
    padding: 7px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.2s ease, background 0.2s ease;
}

.presets-clear-btn:hover {
    color: var(--text);
    background: var(--surface);
}

.presets-count {
    font-size: 12px;
    color: var(--text-muted);
}

/* Mobile: bottom sheet panel, slides up from above the mobile nav — matches
   the .mobile-panel pattern used by Images and Creations so all three side
   panels (Muses · Aesthetics · Presets) feel native on mobile. Desktop keeps
   the left-edge clip-path animation untouched. z-index sits above the
   in-collection sidebar (400) so the panel layers correctly over the canvas. */
@media (max-width: 768px) {
    .presets-panel {
        top: auto;
        bottom: var(--mobile-nav-height);
        left: 0;
        width: 100vw;
        height: auto;
        max-height: 50vh;
        border-right: none;
        border-top: 1px solid var(--border);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.18);
        clip-path: none;
        -webkit-clip-path: none;
        transform: translateY(calc(100% + var(--mobile-nav-height)));
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 410;
    }
    .presets-panel.open {
        clip-path: none;
        -webkit-clip-path: none;
        transform: translateY(0);
    }
    .preset-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============ MASONRY (shared across /discover, /profile, /creations) ============
   Any grid opts in by adding the .masonry-grid class. The JS packer in
   common.js reads --masonry-columns + --masonry-gap from the computed style
   and positions each direct-child .discover-card absolutely.
   Two-class selector keeps specificity above .discover-grid / .profile-grid
   / .gen-grid, so display: block wins over their CSS grid default. */
.masonry-grid {
    --masonry-columns: 7;
    --masonry-gap: 12px;
    position: relative;
}

@media (max-width: 2200px) { .masonry-grid { --masonry-columns: 6; } }
@media (max-width: 1700px) { .masonry-grid { --masonry-columns: 5; } }
@media (max-width: 1280px) { .masonry-grid { --masonry-columns: 4; } }
@media (max-width: 960px)  { .masonry-grid { --masonry-columns: 3; } }
@media (max-width: 768px)  { .masonry-grid { --masonry-columns: 1; } }

.masonry-grid.masonry-active {
    display: block;
}

.masonry-grid.masonry-active > .discover-card,
.masonry-grid.masonry-active > .generation-card {
    position: absolute;
}

/* ============================================================================
   @-MUSES (Kive-style reference library)
   ========================================================================= */

/* Save-as-Muse "@" icon — un-bold, centered via flex, matches sibling buttons.
   Styling for the button itself is provided by the flex-actions containers
   (.generation-thumb-actions and .image-overlay-actions) so the three buttons
   stay visually identical in each row. */
/* The button itself centers the glyph via display:flex + align/justify-center.
   The span just carries type styling. No width/height (lets flex center a
   natural inline-box cleanly — avoids the off-center look the user flagged). */
.save-muse-btn .at-icon {
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    font-family: inherit;
    display: inline-block;
    /* The '@' glyph sits slightly below the line-box center in most system
       fonts. Use position offset instead of transform — a transform here
       composes with the parent .generation-thumb:hover scale(1.02), which
       triggers a sub-pixel re-rasterize that reads as a 1px jump on hover. */
    position: relative;
    top: -2px;
}

/* Discover big "My Muses" button (third row under the standard pills) */
.discover-subtab-big {
    flex: 1;
    padding: 12px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(78, 168, 255, 0.12), rgba(78, 168, 255, 0.04));
    color: var(--text);
    border: 1px solid rgba(78, 168, 255, 0.35);
    border-radius: var(--radius-md);
}
.discover-subtab-big:hover {
    background: linear-gradient(135deg, rgba(78, 168, 255, 0.22), rgba(78, 168, 255, 0.08));
    color: var(--text);
}
.discover-subtab-big svg {
    color: #4ea8ff;
}

/* The @ glyph used as an icon inside the Muses trigger button */
.muses-trigger-at {
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: #4ea8ff;
    /* Optical-center the '@' — line-box center sits ~1px below glyph center
       in most fonts. Position offset (not transform) so it doesn't compose
       with any parent scale on hover. */
    position: relative;
    top: -1px;
}

/* Aesthetics trigger flower — same per-library brand-color pattern as the
   blue @ on Muses. Uses the existing Aesthetics green (#22c55e) already
   on the chip border and active-card outline. */
.aesthetics-trigger-btn svg {
    color: #22c55e;
}

/* Library panel header tabs: Muses · Presets */
.library-panel-header {
    /* inherits .presets-panel-header layout */
}
.library-tabs {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
}
.library-tab {
    padding: 6px 2px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.15s ease;
    text-transform: uppercase;
}
.library-tab:hover { color: var(--text-secondary); }
.library-tab.active {
    color: var(--text);
}
.library-tab-sep {
    color: var(--text-muted);
    font-size: 0.95rem;
    user-select: none;
}

/* Muses side panel — flex column so header is fixed, body fills, footer compact */
.muses-panel {
    display: flex;
    flex-direction: column;
}
.muses-panel.open { display: flex; }
.muses-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}
/* All three sub-views live in the DOM so their content (and image cache)
   persist across tab switches. Only the active one is displayed. */
.library-view { display: none; }

/* Muses view = search bar (fixed) + card grid (auto-fill) stacked vertically */
.muses-panel-body[data-view="muses"] .library-muses-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.muses-panel-body[data-view="muses"] .library-muses-view .muses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    align-content: start;
}

/* Aesthetics view = search bar + 2-column card grid. 2-col (not 3) because
   aesthetic tiles are 3-panel horizontal collages and need more width to read. */
.muses-panel-body[data-view="aesthetics"] .library-aesthetics-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.muses-panel-body[data-view="aesthetics"] .library-aesthetics-view .aesthetics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-content: start;
}

.muses-panel-body[data-view="presets"] .library-presets-view {
    display: block;
}
/* Muses footer inherits .presets-panel-footer sizing for parity with Presets view. */
.muses-empty {
    grid-column: 1 / -1;
    padding: 20px 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
}
.muses-empty code {
    background: var(--bg-secondary);
    padding: 1px 5px;
    border-radius: 3px;
    color: #4ea8ff;
    font-weight: 600;
}
.muse-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1.75px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.muse-card.pick { cursor: pointer; }
.muse-card.pick:hover {
    border-color: #4ea8ff;
    transform: translateY(-1px);
}
.muse-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bg-elevated);
    overflow: hidden;
}
.muse-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.muse-card-label {
    padding: 6px 8px 8px;
    color: #4ea8ff;
    font-size: 0.78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* Muse card hover-action row — mirrors .generation-thumb-actions exactly so
   Library panel cards and Creation cards feel like the same object. */
.muse-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: auto;
}
.muse-card:hover .muse-card-actions { opacity: 1; }

.muse-card-actions button {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    padding: 0;
}
.muse-card-actions button:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}
/* Destructive action uses the same red hover tint as .delete-gen-btn */
.muse-card-actions .muse-card-delete-btn:hover {
    background: rgba(239, 68, 68, 0.8);
}

/* Above-prompt Muse chips row (inside .prompt-composer, above .preset-chips) */
.muse-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0.5rem 0.625rem 0;
}
.muse-chips.hidden { display: none; }
.muse-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 3px;
    border-radius: 16px;
    background: rgba(78, 168, 255, 0.08);
    color: #4ea8ff;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(78, 168, 255, 0.35);
    white-space: nowrap;
    transition: background 0.15s ease;
}
.muse-chip:hover { background: rgba(78, 168, 255, 0.18); }
.muse-chip-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
    cursor: pointer;
}
.muse-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.muse-chip .chip-remove {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
    color: currentColor;
}
.muse-chip .chip-remove:hover {
    opacity: 1;
    background: rgba(78, 168, 255, 0.25);
}

/* Contenteditable prompt editor — replaces the old <textarea>.
   Chips are real DOM nodes inside the editor, so blue styling is native and
   never drifts out of alignment. */
.prompt-editor {
    flex: 1 1 auto;
    width: 100%;
    min-height: 96px;
    padding: 0.625rem 0.875rem 0.875rem;
    margin: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
    cursor: text;
    caret-color: var(--text);
}
.prompt-editor:focus { outline: none; }
/* Contenteditable adds a phantom <br> on first focus, so :empty alone isn't
   reliable. Combine with a JS-managed .is-empty class as the source of truth. */
.prompt-editor.is-empty::before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    pointer-events: none;
}
.prompt-editor ::selection {
    background: rgba(78, 168, 255, 0.28);
}

/* Mobile-only fixes for the prompt editor:
   1. iOS Safari auto-zooms the page on focus when an input/contenteditable's
      font-size is < 16px. Bump to 16px on mobile to suppress that zoom.
      Desktop keeps the compact 15px sizing.
   2. The contenteditable's own y-scrollbar was visually leaking through the
      composer's overflow:hidden wrapper once typed content exceeded
      min-height. Hide the scrollbar (content still scrolls). */
@media (max-width: 768px) {
    .prompt-editor,
    .prompt-composer textarea {
        font-size: 16px;
    }
    .prompt-editor {
        scrollbar-width: none;
    }
    .prompt-editor::-webkit-scrollbar {
        display: none;
    }
}

/* Inline @-Muse chip inside the contenteditable. contenteditable=false makes
   backspace at the edge delete the whole chip in one keystroke. */
.muse-inline-chip {
    display: inline-block;
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 4px;
    background: rgba(78, 168, 255, 0.10);
    color: #4ea8ff;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: baseline;
    cursor: pointer;
    user-select: all;
    transition: background 0.15s ease;
    /* Guard against contenteditable rendering weirdness */
    -webkit-user-modify: read-only;
    caret-color: auto;
}
.muse-inline-chip:hover {
    background: rgba(78, 168, 255, 0.20);
}
/* Flash when a duplicate insert was blocked — draws the user's eye to where
   the muse already lives in the prompt. */
.muse-inline-chip.pulse {
    animation: museChipPulse 0.7s ease-out;
}
@keyframes museChipPulse {
    0%   { box-shadow: 0 0 0 0 rgba(78, 168, 255, 0.8); background: rgba(78, 168, 255, 0.35); }
    60%  { box-shadow: 0 0 0 7px rgba(78, 168, 255, 0);   background: rgba(78, 168, 255, 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(78, 168, 255, 0);     background: rgba(78, 168, 255, 0.10); }
}

/* Floating preview shown while hovering any chip/pill (inline @-muse,
   above-prompt muse pill, or aesthetic pill). Single DOM node, reused. */
.muse-chip-preview {
    position: fixed;
    z-index: 10050;
    width: 160px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.muse-chip-preview.visible {
    opacity: 1;
    transform: translateY(0);
}
.muse-chip-preview img {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: cover;
    background: var(--bg-secondary);
}
.muse-chip-preview .muse-chip-preview-label {
    padding: 7px 8px 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Wide variant for the aesthetic pill — the strip is a 3-panel collage that
   reads better in a wide box. object-fit: cover at ~16:7 aspect keeps all
   three tiles visible without letterboxing. */
.muse-chip-preview.aesthetic {
    width: 260px;
}
.muse-chip-preview.aesthetic img {
    height: 110px;
}

/* @-autocomplete popover */
.muse-autocomplete {
    position: fixed;
    z-index: 10000;
    min-width: 220px;
    max-width: 320px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    padding: 4px;
}
.muse-autocomplete.hidden { display: none; }
.muse-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    color: var(--text);
    border: none;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    font-size: 0.82rem;
}
.muse-autocomplete-item.active,
.muse-autocomplete-item:hover { background: var(--bg-hover); }
.muse-autocomplete-item img,
.muse-autocomplete-noimg {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.muse-autocomplete-item span {
    color: #4ea8ff;
    font-weight: 600;
}
.muse-autocomplete-empty {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.muse-autocomplete-empty button {
    display: inline-block;
    margin-left: 6px;
    background: none;
    border: none;
    color: #4ea8ff;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0;
}

/* Save-as-Muse / rename / delete modals share base styles */
.save-muse-modal { max-width: 500px; }
.save-muse-help {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0 0 14px;
}
.save-muse-help code {
    background: var(--bg-secondary);
    padding: 1px 5px;
    border-radius: 3px;
    color: #4ea8ff;
    font-weight: 600;
}
.save-muse-help strong { color: var(--text); }
.save-muse-preview {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}
.save-muse-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.save-muse-label input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s ease;
}
.save-muse-label input:focus { border-color: #4ea8ff; }
.save-muse-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.75rem;
}
.save-muse-counter { color: var(--text-secondary); }
.save-muse-error { color: #ff7a7a; }

/* Report Generation Issue modal — reuses .save-muse-modal layout, just
   adds textarea + consent-checkbox styling. */

/* On short viewports the modal (preview + 3 textareas + consent + actions)
   exceeds screen height. Cap to viewport and let the inner scroll. The
   16px breathing room above and below keeps the modal off the screen
   edges. Scoped so only this modal scrolls — other modals keep their
   natural sizing. */
#report-gen-modal .modal-content {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Mobile: full-page modal so the long-form report fills the viewport,
   X close button stays at top-right (.modal-close defaults). */
@media (max-width: 768px) {
    #report-gen-modal .modal-content {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        border: none;
    }
    /* Reserve room so the H2 doesn't run under the close button */
    #report-gen-modal .modal-content > h2 {
        padding-right: 44px;
    }
}

/* Field labels render in normal case (the global label{} rule's uppercase
   + letter-spacing are field-header styling that doesn't fit a long-form
   feedback modal). Scoped to #report-gen-modal so the other save-muse
   modals (Save / Rename / Delete) keep their existing label treatment. */
#report-gen-modal .save-muse-label > span:first-child {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Breathing room between consecutive field groups. The first label sits
   right under the image preview (its margin is set by the preview); the
   sibling combinator only adds top space between adjacent label blocks. */
#report-gen-modal .save-muse-label + .save-muse-label {
    margin-top: 14px;
}

.report-gen-textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
    outline: none;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.15s ease;
}
.report-gen-textarea:focus { border-color: #4ea8ff; }
.report-gen-textarea[readonly] {
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: default;
    resize: none;
}
/* Reset the global label{} rule (uppercase + 0.6875rem + letter-spacing +
   display:block) so the consent reads as natural body copy, not a field
   header — and the span actually wraps inside the flex row. */
.report-gen-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 6px;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
/* Override the global `input { width:100%; padding: ... }` rule, which
   otherwise makes the checkbox stretch to the full flex row, leaving the
   span with ~0 width and forcing each word onto its own line. */
.report-gen-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 2px 0 0 0;
    background: transparent;
    border: none;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--text);
}
.report-gen-consent span {
    flex: 1 1 0;
    min-width: 0;
    word-wrap: break-word;
}

/* Top-left "Report issue" button on generation cards. Visually mirrors
   .share-gen-btn / .delete-gen-btn so all hover icons match — sole
   difference is corner placement (left, away from the destructive cluster
   on the right) so users don't misclick delete when they meant report. */
.report-gen-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    outline: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition), color var(--transition);
    will-change: backdrop-filter, opacity;
    z-index: 2;
}
.generation-thumb:hover .report-gen-btn,
.generation-thumb.active .report-gen-btn {
    opacity: 1;
}
.report-gen-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Download button on generation thumbnails — bottom-left, the only free
   corner (report top-left, share/@/delete top-right, settings badge
   bottom-right). Mirrors the .report-gen-btn frosted recipe so every corner
   button matches. */
.download-gen-btn {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    outline: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition), color var(--transition);
    will-change: backdrop-filter, opacity;
    z-index: 2;
}
.generation-thumb:hover .download-gen-btn,
.generation-thumb.active .download-gen-btn {
    opacity: 1;
}
.download-gen-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Larger variant for the Creations page (matches .generation-card-actions
   button sizing — 32px, frosted blur). Mirrors the actions-button pattern
   from generations.css: own opacity fade + pointer-events to keep the
   backdrop-filter GPU layer alive (Chromium tears it down on transform). */
.generation-card .report-gen-btn {
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    will-change: backdrop-filter, opacity;
}
.generation-card:hover .report-gen-btn {
    opacity: 1;
    pointer-events: auto;
}
.generation-card .report-gen-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: none;
}

/* Mobile: move the report button to bottom-right (away from the action
   cluster at the top-right) so the dense top-row of icons doesn't overlap
   the small mobile card. Desktop keeps the top-left placement. */
@media (max-width: 768px) {
    .generation-card .report-gen-btn {
        top: auto;
        left: auto;
        bottom: 8px;
        right: 8px;
    }
}

/* ============ AESTHETICS ============
   Green accent (#22c55e — Lite tier). Chip sits between Muses row and Preset
   chips. Cards are larger (2-column panel grid) because each card displays
   a 3-panel horizontal collage that needs width to read.
*/

/* Search bar for the library panel views (Muses + Aesthetics) */
.library-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    height: 32px;
    box-sizing: border-box;
}
.library-search-bar svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.library-search-bar input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.8125rem;
    outline: none;
    min-width: 0;
    font-family: inherit;
}
.library-search-bar input::placeholder {
    color: var(--text-muted);
}

/* Aesthetic chip — green pill that sits in the composer chip row,
   after muse-chips and before preset-chips. */
.aesthetic-chip-host {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0.625rem 0.625rem 0;
}
.aesthetic-chip-host.hidden {
    display: none;
}
.aesthetic-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 2px 2px 2px;
    border-radius: 16px;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(34, 197, 94, 0.40);
    white-space: nowrap;
    max-width: 100%;
}
.aesthetic-chip-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 2px;
    cursor: pointer;
    border-radius: 14px;
    min-width: 0;
}
.aesthetic-chip-body .chip-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}
.aesthetic-chip-body > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aesthetic-chip .chip-remove {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.75;
    color: currentColor;
    margin-right: 2px;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.aesthetic-chip .chip-remove:hover {
    opacity: 1;
    background: rgba(34, 197, 94, 0.22);
}

/* Top-row trigger buttons (Muses / Aesthetics / Presets) are cramped at 3
   columns — hide the numeric counter and signal "has selection" via the
   button's own outline color instead. Active state:
   - Muses / Presets: bright text-color border (white in dark theme)
   - Aesthetics:      green border matching the chip color
   The count-badge element stays in the DOM (other code writes to it) but is
   visually suppressed inside the composer grid. */
.prompt-controls-grid .presets-trigger-count {
    display: none !important;
}
.presets-trigger-btn.has-selection {
    border-color: var(--text);
    color: var(--text);
}

/* Aesthetic card — 2-col panel tile. Internal image is a 3-panel strip. */
.aesthetic-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    /* `var(--surface)` is intentionally undefined → resolves to transparent
       so the card body picks up the panel's `var(--bg)` background. Matches
       `.preset-card`'s background recipe (which uses the same var) so both
       libraries' card footers sit on the same near-black panel surface in
       dark mode instead of the lighter `--bg-elevated` they used before. */
    background: var(--surface);
    border: 1.75px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
    font: inherit;
    color: inherit;
    text-align: center;
}
/* Hover/active border colors mirror `.preset-card` so the two libraries
   share an identical selection language (green removed). */
.aesthetic-card:hover {
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}
.aesthetic-card.active {
    border-color: var(--text);
}
/* Rendered as a CSS background-image (set inline by the JS) rather than an
   <img>, so the browser doesn't offer "open image in new tab" / "save image
   as" on right-click. The aesthetic strip is curated IP — this raises the
   friction of bulk extraction. The accessible name comes from the parent
   button's visible text label.
   `position: relative` is the positioning context for the `::after`
   checkmark badge defined alongside `.preset-card-thumb::after` above. */
.aesthetic-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 4;   /* wide — 3 portrait tiles side-by-side */
    overflow: hidden;
    background-color: var(--bg-secondary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}
/* Label sizing/weight/spacing matches `.preset-card-label` exactly so the
   two libraries' card footers read as one design language. */
.aesthetic-card-label {
    padding: 7px 8px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    text-align: center;
}

/* Aesthetics empty state (no items or no search matches) */
.aesthetics-empty {
    grid-column: 1 / -1;
    padding: 20px 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
    text-align: center;
}
.aesthetics-empty strong {
    color: var(--text);
}

/* ============ DETAIL MODIFIER CHIPS (shared, every detail modal) ============
   Aesthetic chip + first 2 preset pills + +N overflow pill, rendered INSIDE
   the bordered .detail-prompt box at the bottom. populateDetailModifiers()
   in common.js builds these from a post object on every modal open.
   Visual cousins of .detail-tag: same pill geometry, subtle palette.
*/
.detail-prompt {
    display: flex;
    flex-direction: column;
}
.detail-prompt-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
    margin-top: auto;     /* short prompts: anchor chips to bottom of content */
    padding-top: 12px;
    padding-bottom: 10px;  /* matches parent's padding-bottom (zeroed below) */
    /* Long prompts: pin chips to the bottom of the scrollable .detail-prompt
       so they're always visible. */
    position: sticky;
    bottom: 0;
    z-index: 1;
    /* Solid bg matching the prompt box — scrolling text disappears cleanly
       under the chips with no fade-banding. */
    background: var(--bg-secondary);
    /* Promote to its own GPU layer to kill sub-pixel jitter from sticky+flex. */
    transform: translateZ(0);
}

/* When the chip row is present, drop the prompt box's padding-bottom: the row
   provides its own padding-bottom: 10px, so chips sit flush with the visible
   bottom of the box and no sliver of scrolled text peeks under them. */
.detail-prompt:has(.detail-prompt-modifiers) {
    padding-bottom: 0;
}
.detail-modifier-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 12px;
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
}
/* Aesthetic chip — green tint matching the composer's aesthetic chip + flower
   icon. Hover shows the wide image preview via common.js delegation. */
.detail-modifier-chip.aesthetic {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.40);
    background: rgba(34, 197, 94, 0.12);
    cursor: default;
}
.detail-modifier-chip.aesthetic svg {
    flex-shrink: 0;
}
/* +N overflow pill — neutral base; on hover, common.js shows a tooltip with
   the hidden preset labels. */
.detail-modifier-chip.overflow {
    color: var(--text);
    background: var(--bg-elevated);
    cursor: default;
}

/* Floating tooltip listing the +N overflow labels. Same z-index family as
   the chip preview so they don't collide. */
.detail-modifier-tooltip {
    position: fixed;
    z-index: 10050;
    min-width: 110px;
    max-width: 220px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.detail-modifier-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.detail-modifier-tooltip > div {
    padding: 1px 0;
}