/* ═════════════════════════════════════════════════════════════════════════════
   COMFYARTS v27 — APPLE LIQUID GLASS EDITION
   True iOS 18 liquid glass morphism with cosmic particles
   All backend functionality preserved — 100% visual layer upgrade
   ═════════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — v27 LIQUID GLASS PALETTE
   ═════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Animation speed multiplier */
    --ca-spd: 1;
    
    /* Apple-grade easing curves */
    --ca-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ca-ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
    --ca-ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
    --ca-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Core backgrounds — pure white canvas */
    --bg: #ffffff;
    --bg-2: #f8fafc;
    --bg-3: #f1f5f9;
    --bg-4: #e2e8f0;
    
    /* v27 Accent Palette */
    --indigo: #6366f1;
    --indigo-light: #818cf8;
    --indigo-dark: #4f46e5;
    --indigo-bg: rgba(99, 102, 241, 0.08);
    --indigo-border: rgba(99, 102, 241, 0.25);
    
    --teal: #14b8a6;
    --teal-light: #2dd4bf;
    --teal-dark: #0d9488;
    --teal-bg: rgba(20, 184, 166, 0.08);
    --teal-border: rgba(20, 184, 166, 0.25);
    
    --orange: #f59e0b;
    --orange-light: #fbbf24;
    --orange-dark: #d97706;
    --orange-bg: rgba(245, 158, 11, 0.08);
    --orange-border: rgba(245, 158, 11, 0.25);
    
    --purple: #a855f7;
    --purple-light: #c084fc;
    --purple-dark: #9333ea;
    --purple-bg: rgba(168, 85, 247, 0.08);
    --purple-border: rgba(168, 85, 247, 0.25);
    
    /* Legacy Apple colors (for compatibility) */
    --blue: #007AFF;
    --blue-light: #409cff;
    --green: #34C759;
    --pink: #FF2D55;
    
    /* Text colors — deep slate */
    --text-1: #0f172a;
    --text-2: #1e293b;
    --text-3: #475569;
    --text-4: #64748b;
    --text-5: #94a3b8;
    
    /* Universal border — thin black elegance */
    --border: rgba(0, 0, 0, 0.09);
    --border-md: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.18);
    
    /* Liquid Glass Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.09), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.11), 0 8px 20px rgba(0, 0, 0, 0.06);
    
    /* Liquid Glass Core */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(0, 0, 0, 0.09);
    --glass-blur: blur(48px) saturate(1.9) brightness(1.02);
    --glass-blur-strong: blur(64px) saturate(2.0) brightness(1.03);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --glass-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    
    /* Inner glow for glass depth */
    --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

/* ═════════════════════════════════════════════════════════════════════════════
   2. RESET + BASE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

#wpadminbar, #adminbar, body.admin-bar #wpadminbar {
    display: none !important; 
    height: 0 !important; 
    min-height: 0 !important;
}

html { 
    margin-top: 0 !important; 
    scroll-behavior: smooth; 
    height: 100%; 
    overflow: hidden; 
    background: var(--bg);
    /* Prevent input zoom on iPhone */
    -webkit-text-size-adjust: 100%;
}

body.admin-bar { 
    margin-top: 0 !important; 
    padding-top: 0 !important; 
}

body, .ca-body {
    font-family: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text-1);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
    letter-spacing: -0.011em;
    /* Prevent input zoom on mobile */
    font-size: 16px;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}

/* ═════════════════════════════════════════════════════════════════════════════
   2B. APPLE-GRADE SCROLL FOUNDATION
   Butter-smooth momentum scrolling on every scroll container.
   Uses native iOS/WebKit physics — no JS, no libraries.
   ═════════════════════════════════════════════════════════════════════════════ */

/*
 * Rule 1: All overflow scroll containers get iOS momentum scrolling,
 * GPU compositing, and contained overscroll (no chain-bounce bleeding).
 */
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages,
.ca-support-page-messages,
.modal-sheet,
.custom-scrollbar,
.rep-card-prompt-box {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/*
 * Rule 2: Promote key scroll containers to their own compositor layer.
 * This tells the GPU to handle the scroll repaint independently,
 * eliminating jank caused by main-thread style/layout work.
 */
.view-section,
#single-result-container {
    will-change: scroll-position;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/*
 * Rule 3: Remove scrollbars on WebKit for cleaner feel.
 * Scrollbar presence creates visual noise and on iOS they are
 * invisible anyway — explicitly hiding removes any flicker.
 */
.view-section::-webkit-scrollbar,
#single-result-container::-webkit-scrollbar,
#history-list::-webkit-scrollbar,
#history-list-mobile::-webkit-scrollbar,
.support-chat-messages::-webkit-scrollbar {
    display: none;
}
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages {
    scrollbar-width: none;
}

/*
 * Rule 4: touch-action on scroll containers.
 * pan-y allows native vertical momentum; manipulation removes
 * 300ms tap delay without breaking scroll.
 */
.view-section {
    touch-action: pan-y;
}


   ═════════════════════════════════════════════════════════════════════════════ */
.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
    contain: strict;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    animation: orbFloat 28s infinite ease-in-out alternate;
    will-change: transform;
}

.orb-1 {
    top: -15%;
    left: -8%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(99, 102, 241, 0.12) 55%, transparent 100%);
    opacity: 0.45;
}

.orb-2 {
    bottom: -18%;
    right: -8%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.30) 0%, rgba(168, 85, 247, 0.10) 55%, transparent 100%);
    opacity: 0.35;
    animation-delay: -10s;
}

.orb-3 {
    top: 35%;
    left: 40%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.28) 0%, rgba(20, 184, 166, 0.08) 55%, transparent 100%);
    opacity: 0.25;
    animation-delay: -18s;
}

@keyframes orbFloat {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3%, 6%) scale(1.04); }
    100% { transform: translate(-2%, -4%) scale(0.98); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   4. COSMIC PARTICLE CANVAS
   ═════════════════════════════════════════════════════════════════════════════ */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    contain: strict;
    opacity: 1;
    transition: opacity 0.6s ease;
}
/* Canvas fades out when home/plans not active — JS clears it, CSS fades the element */
body:not(.home-active):not(.plans-active) #particle-canvas {
    opacity: 0;
}

/* Generate page gets enhanced particles */
#gen-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}

/* ═════════════════════════════════════════════════════════════════════════════
   5. LIQUID GLASS COMPONENTS
   ═════════════════════════════════════════════════════════════════════════════ */

/* Base glass panel */
.glass-panel {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
}

/* Navigation glass */
.glass-nav {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(60px) saturate(2.1) brightness(1.02);
    -webkit-backdrop-filter: blur(60px) saturate(2.1) brightness(1.02);
    border: 1px solid var(--border-md);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

/* Liquid glass pill button */
.glass-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 9999px;
    transition: all 0.28s var(--ca-ease-spring);
}

.glass-pill:hover {
    background: var(--glass-bg-strong);
    border-color: var(--border-md);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: scale(1.03) translateZ(0);
}

.glass-pill:active {
    transform: scale(0.96) translateZ(0);
}

/* Accent glass pills */
.glass-pill-indigo {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.06));
    border-color: var(--indigo-border);
    color: var(--indigo-dark);
}

.glass-pill-indigo:hover {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.10));
}

.glass-pill-teal {
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.06));
    border-color: var(--teal-border);
    color: var(--teal-dark);
}

.glass-pill-orange {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
    border-color: var(--orange-border);
    color: var(--orange-dark);
}

.glass-pill-purple {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.06));
    border-color: var(--purple-border);
    color: var(--purple-dark);
}

/* ═════════════════════════════════════════════════════════════════════════════
   6. SCROLLBAR STYLING
   ═════════════════════════════════════════════════════════════════════════════ */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ═════════════════════════════════════════════════════════════════════════════
   7. SPA VIEW SECTIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.view-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    /*
     * BUG 1 FIX: visibility:hidden ensures the element and ALL its descendants
     * (including the gen-sidebar with backdrop-filter) stop painting entirely.
     * opacity:0 alone does not prevent backdrop-filter compositing from bleeding
     * through on WebKit/Blink. The visibility transition is delayed by 0.5s
     * (matching the opacity duration) so the fade-out completes before the element
     * is fully removed from the paint tree.
     */
    visibility: hidden;
    transition: opacity 0.5s var(--ca-ease-smooth),
                transform 0.5s var(--ca-ease-smooth),
                visibility 0s linear 0.5s;
    transform: translateY(16px) scale(0.99);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    contain: layout style;
    background: var(--bg);
}

.view-section.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    /*
     * BUG 1 FIX (cont.): visibility:visible is applied immediately (0s delay)
     * when the view becomes active so it's visible during its fade-in.
     */
    visibility: visible;
    transition: opacity 0.5s var(--ca-ease-smooth),
                transform 0.5s var(--ca-ease-smooth),
                visibility 0s linear 0s;
}

#view-generate {
    overflow: hidden;
    background: var(--bg);
}

/* ═════════════════════════════════════════════════════════════════════════════
   8. BUTTONS & INTERACTIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.btn-spring {
    transition: transform 0.38s var(--ca-ease-spring), 
                background-color 0.2s var(--ca-ease-apple), 
                opacity 0.2s, 
                box-shadow 0.3s var(--ca-ease-apple), 
                border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    contain: layout;
}

.btn-spring:active {
    transform: scale(0.94) !important;
    transition-duration: 0.08s !important;
}

@media (hover: hover) {
    .btn-spring:hover {
        transform: scale(1.025);
    }
}

button, [role="button"] {
    min-height: 40px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   9. ANIMATIONS
   ═════════════════════════════════════════════════════════════════════════════ */
@keyframes scaleIn {
    0% { 
        opacity: 0; 
        transform: scale(0.96) translateY(12px); 
        filter: blur(4px);
    }
    60% { 
        opacity: 1; 
        filter: blur(0);
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

.animate-scale-in {
    animation: scaleIn 0.6s var(--ca-ease-smooth) forwards;
}

@keyframes blob {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(24px, -36px) scale(1.08); }
    66% { transform: translate(-16px, 18px) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}

.animate-blob {
    animation: blob 8s infinite ease-in-out;
}

.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

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

.animate-spin-slow {
    animation: spin 6s linear infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

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

.animate-shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
}

/* ═════════════════════════════════════════════════════════════════════════════
   10. NAVIGATION
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-nav-desktop {
    display: none !important;
}

.ca-nav-mobile {
    display: flex !important;
}

@media (min-width: 768px) {
    .ca-nav-desktop {
        display: flex !important;
    }
    .ca-nav-mobile {
        display: none !important;
    }
}

.nav-link {
    transition: color 0.22s var(--ca-ease-apple), background 0.22s var(--ca-ease-apple);
    -webkit-tap-highlight-color: transparent;
    color: var(--text-2);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.nav-link:hover {
    color: var(--text-1);
    background: rgba(0, 0, 0, 0.04);
}

.nav-link.active {
    background: var(--indigo-bg);
    color: var(--indigo);
    box-shadow: inset 0 0 0 1px var(--indigo-border);
}

.mobile-nav-icon {
    color: var(--text-3);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 9999px;
}

.mobile-nav-icon.active {
    color: var(--indigo);
    background: var(--indigo-bg);
}

/* Brand name styling */
.ca-brand-name {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    background: linear-gradient(125deg, var(--indigo) 0%, var(--purple) 50%, var(--teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ═════════════════════════════════════════════════════════════════════════════
   11. TOAST NOTIFICATIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-toast {
    position: fixed;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--indigo);
    border: 1px solid var(--indigo-border);
    z-index: 300;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.5) inset;
    white-space: nowrap;
    pointer-events: none;
    max-width: calc(100vw - 2rem);
    animation: scaleIn 0.38s var(--ca-ease-spring) forwards;
}

.ca-toast.error {
    color: var(--pink);
    border-color: rgba(255, 45, 85, 0.25);
}

.ca-toast.success {
    color: var(--teal);
    border-color: var(--teal-border);
}

.ca-toast.gift {
    color: var(--purple);
    border-color: var(--purple-border);
}

@keyframes creditPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.credit-pop {
    animation: creditPop 0.32s var(--ca-ease-spring);
}

/* ═════════════════════════════════════════════════════════════════════════════
   12. MODALS
   ═════════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (min-width: 640px) {
    .modal-backdrop {
        align-items: center;
    }
}

.modal-backdrop.open {
    opacity: 1;
}

.modal-sheet {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--border-md);
    width: 100%;
    max-width: 440px;
    border-radius: 2rem 2rem 0 0;
    padding: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.5s var(--ca-ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
    overflow-y: auto;
    color: var(--text-1);
}

@media (min-width: 640px) {
    .modal-sheet {
        border-radius: 2rem;
        transform: scale(0.92) translateY(10px);
    }
}

.modal-backdrop.open .modal-sheet {
    transform: translateY(0);
}

@media (min-width: 640px) {
    .modal-backdrop.open .modal-sheet {
        transform: scale(1) translateY(0);
    }
}

.modal-drag-handle {
    width: 2.75rem;
    height: 0.25rem;
    background: var(--bg-4);
    border-radius: 9999px;
    margin: 0 auto 1.5rem;
}

/* ═════════════════════════════════════════════════════════════════════════════
   13. HOME PAGE STYLES — v29 Bolt/Claude style prompt UI
   ═════════════════════════════════════════════════════════════════════════════ */
.home-prompt-wrap {
    position: relative;
}

/* Animated gradient border wrapper */
.home-prompt-gradient-border {
    position: relative;
    border-radius: 1.75rem;
    padding: 1.5px;
    background: linear-gradient(135deg,
        rgba(124,58,237,0.9) 0%,
        rgba(6,182,212,0.8) 30%,
        rgba(236,72,153,0.85) 65%,
        rgba(124,58,237,0.9) 100%);
    background-size: 300% 300%;
    animation: promptBorderFlow 6s ease infinite;
    box-shadow:
        0 0 28px rgba(124,58,237,0.22),
        0 0 56px rgba(6,182,212,0.12),
        0 8px 40px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease;
}

.home-prompt-gradient-border:focus-within {
    animation-duration: 3s;
    box-shadow:
        0 0 40px rgba(124,58,237,0.35),
        0 0 80px rgba(6,182,212,0.18),
        0 12px 50px rgba(0,0,0,0.10);
}

@keyframes promptBorderFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.home-prompt-box {
    background: rgba(255, 252, 250, 0.97) !important;
    border-radius: calc(1.75rem - 1.5px);
    border: none;
    box-shadow: none;
    overflow: hidden;
    transition: background 0.3s ease;
}

.home-prompt-box textarea {
    font-size: 1rem;
    line-height: 1.6;
    caret-color: var(--indigo);
    color: var(--text-1);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    width: 100%;
    padding: 1.25rem 1.375rem;
    font-weight: 450;
}

.home-prompt-box textarea::placeholder {
    color: rgba(124,58,237,0.55);
    font-weight: 400;
}

/* Tool + Attach pill buttons inside prompt box */
.home-tool-pill, .home-attach-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 650;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(248,248,252,0.95);
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.22s var(--ca-ease-spring);
    min-height: 32px;
    letter-spacing: -0.01em;
}

.home-tool-pill:hover, .home-attach-pill:hover {
    background: rgba(124,58,237,0.07);
    border-color: rgba(124,58,237,0.25);
    color: rgba(124,58,237,0.9);
    transform: scale(1.03);
}

/* The circular arrow-up submit button */
.home-submit-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
    background-size: 200% 200%;
    animation: arrowBtnGlow 3s ease infinite;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(124,58,237,0.45), 0 1px 0 rgba(255,255,255,0.2) inset;
    transition: transform 0.3s var(--ca-ease-spring), box-shadow 0.3s ease, filter 0.2s;
    flex-shrink: 0;
}

.home-submit-arrow:hover {
    transform: scale(1.1) translateY(-1px);
    box-shadow: 0 8px 28px rgba(124,58,237,0.60);
    filter: brightness(1.1);
}

.home-submit-arrow:active {
    transform: scale(0.94);
}

@keyframes arrowBtnGlow {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

/* Options row below prompt box: Screen / Fidelity dropdowns */
.home-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 2px;
}

.home-option-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.home-option-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 9999px;
    padding: 7px 32px 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: all 0.22s var(--ca-ease-spring);
    min-height: 34px;
}

.home-option-select:hover {
    border-color: rgba(124,58,237,0.25);
    background: rgba(255,255,255,0.95);
}

.home-option-select:focus {
    outline: none;
    border-color: rgba(124,58,237,0.4);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}

.home-option-chevron {
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: var(--text-4);
    width: 12px;
    height: 12px;
}

.home-nav-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 9999px;
    color: var(--text-3);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.625rem 1rem;
    transition: all 0.28s var(--ca-ease-spring);
}

.home-nav-pill:hover {
    background: var(--glass-bg-strong);
    border-color: var(--border-md);
    color: var(--text-1);
    transform: scale(1.03) translateZ(0);
}

.home-nav-pill:active {
    transform: scale(0.96) translateZ(0);
}

/* Home cards — v29: gradient color borders, bigger text */
.ca-card-generate,
.ca-card-replicate {
    position: relative;
    height: 16rem;
    border-radius: 1.75rem;
    overflow: hidden;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(1.95) brightness(1.02);
    -webkit-backdrop-filter: blur(40px) saturate(1.95) brightness(1.02);
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05), 
                0 1px 3px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: all 0.4s var(--ca-ease-spring);
    cursor: pointer;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}

/* Gradient border wrapper for cards */
.ca-card-gen-border {
    padding: 1.5px;
    border-radius: calc(1.75rem + 1.5px);
    background: linear-gradient(135deg,
        rgba(0,122,255,0.7) 0%,
        rgba(52,211,153,0.6) 40%,
        rgba(0,122,255,0.7) 100%);
    background-size: 200% 200%;
    animation: cardGenBorder 5s ease infinite;
    box-shadow: 0 0 20px rgba(0,122,255,0.15), 0 4px 24px rgba(0,0,0,0.07);
}

.ca-card-rep-border {
    padding: 1.5px;
    border-radius: calc(1.75rem + 1.5px);
    background: linear-gradient(135deg,
        rgba(124,58,237,0.7) 0%,
        rgba(236,72,153,0.6) 40%,
        rgba(6,182,212,0.65) 100%);
    background-size: 200% 200%;
    animation: cardRepBorder 5s ease infinite;
    box-shadow: 0 0 20px rgba(124,58,237,0.15), 0 4px 24px rgba(0,0,0,0.07);
}

@keyframes cardGenBorder {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes cardRepBorder {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.ca-card-generate:hover,
.ca-card-replicate:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 
                0 4px 12px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.98);
    transform: translateY(-4px) translateZ(0);
    border-color: rgba(0, 0, 0, 0.14);
}

.ca-card-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.ca-card-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 1.75rem;
}

/* Card icon badges */
.ca-card-icon {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ca-card-generate .ca-card-icon {
    background: var(--indigo-bg);
    border: 1px solid var(--indigo-border);
}

.ca-card-replicate .ca-card-icon {
    background: var(--purple-bg);
    border: 1px solid var(--purple-border);
}

.ca-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: 0.375rem;
    line-height: 1.2;
}

.ca-card-desc {
    font-size: 0.9375rem;
    color: var(--text-2);
    font-weight: 550;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* Status badge */
.ca-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ca-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
    animation: pulse 2s infinite;
}

/* ═════════════════════════════════════════════════════════════════════════════
   14. GENERATE PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-generate {
    background: var(--bg);
}

.gen-sidebar {
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: width 0.38s var(--ca-ease-spring), 
                opacity 0.28s ease, 
                min-width 0.38s var(--ca-ease-spring);
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    height: 100%;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-right: 1px solid var(--border);
}

.gen-sidebar.open {
    width: 260px;
    min-width: 260px;
    opacity: 1;
    pointer-events: auto;
}

.gen-sidebar .sidebar-text {
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}

.gen-sidebar.open .sidebar-text {
    opacity: 1;
}

.gen-sidebar-header {
    flex-shrink: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.gen-sidebar-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.875rem;
    color: var(--text-3);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-align: left;
    min-height: 2.25rem;
}

.gen-sidebar-nav-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-1);
}

/* Prompt bar */
.ca-prompt-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0 0.5rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 60%, transparent);
}

.gen-prompt-card {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
    transition: all 0.3s var(--ca-ease-smooth);
}

.gen-prompt-card:focus-within {
    border-color: var(--indigo-border);
    box-shadow: 0 0 0 4px var(--indigo-bg), var(--shadow-lg), var(--glass-inner-glow);
}

#gen-prompt {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: var(--text-1);
    caret-color: var(--indigo);
    font-size: 0.9375rem;
    line-height: 1.6;
    padding: 1rem 1.25rem;
    max-height: 6rem;
}

#gen-prompt::placeholder {
    color: var(--text-5);
}

/* Model tabs */
.gen-model-tabs {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm), var(--glass-inner-glow);
    border-radius: 1rem;
    padding: 0.25rem;
}

.gen-model-tab,
.gen-aspect-tab,
.gen-res-tab {
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-4);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gen-model-tab.active,
.gen-aspect-tab.active,
.gen-res-tab.active {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
}

.gen-model-tab:hover:not(.active),
.gen-aspect-tab:hover:not(.active),
.gen-res-tab:hover:not(.active) {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-2);
}

/* Generate submit button */
#gen-submit-btn {
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    border: none;
    border-radius: 1rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.625rem 1.25rem;
    box-shadow: 0 3px 16px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s var(--ca-ease-spring);
}

#gen-submit-btn:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.03) translateZ(0);
}

#gen-submit-btn:active {
    transform: scale(0.96) translateZ(0);
}

/* Result container */
#single-result-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12rem;
    padding-top: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ── Mobile result container: top-aligned so 9:16 images + buttons both fit ── */
@media (max-width: 767px) {
    #single-result-container {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: 1rem !important;
        padding-bottom: 14rem !important;
    }
}

/* Generated image result with floating actions */
.gen-result-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 1.5rem;
    overflow: visible;
}

/* ── DESKTOP 9:16 FIX: buttons at TOP of image card, slightly smaller card ── */
@media (min-width: 768px) {
    /* When 9:16 result is shown, align container from top-center so scrolling works */
    #single-result-container:has(.gen-result-wrapper[data-aspect="9:16"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] {
        display: block !important;
        position: relative !important;
        max-width: 300px !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
        width: 100% !important;
        max-height: calc(100svh - 230px) !important;
        overflow: hidden !important;
        border-radius: 1.5rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
        width: 100% !important;
        max-height: calc(100svh - 230px) !important;
        object-fit: cover !important;
    }
    /* Buttons pinned to the TOP of the image card on desktop 9:16 only */
    .gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions {
        position: absolute !important;
        top: 1rem !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        justify-content: center !important;
        z-index: 20 !important;
        background: rgba(0,0,0,0.18) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 9999px !important;
        padding: 0.25rem 0.5rem !important;
        gap: 0.375rem !important;
    }
}

/* ── Mobile: switch to column flow so buttons are always below the image ── */
@media (max-width: 767px) {
    .gen-result-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .gen-atomic-wrap {
        width: 100% !important;
    }
    /* 9:16 images: cap height so buttons always visible below fold */
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
        max-height: calc(100svh - 300px) !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        border-radius: 1.25rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
        display: flex !important;
        justify-content: center !important;
        overflow: hidden !important;
        border-radius: 1.25rem !important;
    }
}

.gen-result-image {
    border-radius: 1.5rem;
    box-shadow: var(--shadow-xl);
    transition: transform 0.4s var(--ca-ease-smooth);
}

.gen-result-image:hover {
    transform: scale(1.01);
}

/* Floating action buttons */
.gen-floating-actions {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

/* ── Mobile: bring buttons into document flow, always visible ── */
@media (max-width: 767px) {
    .gen-floating-actions {
        position: static !important;
        transform: none !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 0.625rem !important;
        padding: 0 0.5rem !important;
    }
    .gen-float-btn {
        flex: 1 !important;
        max-width: 110px !important;
        justify-content: center !important;
    }
    .gen-float-btn span {
        display: inline !important;
    }
}

.gen-float-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.3s var(--ca-ease-spring);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

.gen-float-btn-download {
    background: var(--glass-bg-strong);
    color: var(--text-1);
}

.gen-float-btn-download:hover {
    background: var(--indigo);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

.gen-float-btn-share {
    background: var(--glass-bg-strong);
    color: var(--text-1);
}

.gen-float-btn-share:hover {
    background: var(--teal);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

/* Empty state */
#generate-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   15. REPLICATE PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-replicate {
    background: var(--bg);
}

/* Header section */
.rep-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .rep-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.rep-title-section {
    max-width: 400px;
}

.rep-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
}

.rep-subtitle {
    font-size: 0.8125rem;
    color: var(--text-3);
    line-height: 1.5;
}

/* Controls row — centered below header */
.rep-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}

.rep-control-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.rep-control-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-md);
}

.rep-control-btn-primary {
    background: linear-gradient(145deg, var(--teal) 0%, var(--indigo) 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 12px rgba(20, 184, 166, 0.35);
}

.rep-control-btn-primary:hover {
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.45);
    transform: translateY(-1px);
}

/* Mode toggle */
.rep-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border);
    border-radius: 9999px;
    cursor: pointer;
}

.rep-toggle-label {
    font-size: 0.6875rem;
    font-weight: 700;
    transition: color 0.2s ease;
}

.rep-toggle-label.active {
    color: var(--teal);
}

.rep-toggle-switch {
    position: relative;
    width: 2.5rem;
    height: 1.25rem;
    background: var(--bg-4);
    border-radius: 9999px;
    transition: background 0.3s ease;
}

.rep-toggle-switch.active {
    background: var(--teal);
}

.rep-toggle-knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s var(--ca-ease-spring);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rep-toggle-switch.active .rep-toggle-knob {
    transform: translateX(1.25rem);
}

/* Replicate grid */
#rep-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    padding-bottom: 2rem;
}

@media (min-width: 640px) {
    #rep-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #rep-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    #rep-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Replicate cards — true liquid glass */
.rep-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(1.95);
    -webkit-backdrop-filter: blur(40px) saturate(1.95);
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.4s var(--ca-ease-spring);
}

.rep-card:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: var(--glass-shadow-lg);
    transform: translateY(-3px);
}

.rep-card-image-wrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-2);
    overflow: hidden;
}

.rep-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.rep-card-content {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
}

.rep-card-prompt {
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--text-2);
    max-height: 6rem;
    overflow-y: auto;
    font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
}

.rep-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.rep-card-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.rep-card-btn-copy {
    background: var(--indigo-bg);
    color: var(--indigo);
    border: 1px solid var(--indigo-border);
}

.rep-card-btn-copy:hover {
    background: var(--indigo);
    color: white;
}

.rep-card-btn-use {
    background: var(--teal-bg);
    color: var(--teal-dark);
    border: 1px solid var(--teal-border);
}

.rep-card-btn-use:hover {
    background: var(--teal);
    color: white;
}

/* Rep card status badge */
.rep-card-status-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

/* Rep card remove button — perfect circle */
.rep-card-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    /* Force exact equal dimensions for perfect circle */
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 50% !important;
    background: rgba(239, 68, 68, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.60);
    box-shadow:
        0 2px 10px rgba(239, 68, 68, 0.35),
        0 0 0 1px rgba(239, 68, 68, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s var(--ca-ease-spring), box-shadow 0.22s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
.rep-card:hover .rep-card-remove {
    opacity: 1;
}
/* On mobile, always show the delete button */
@media (max-width: 767px) {
    .rep-card-remove {
        opacity: 0.85;
    }
}
.rep-card-remove:hover {
    transform: scale(1.15) rotate(90deg);
    background: #ef4444;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.55), 0 0 0 2px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.rep-card-remove svg,
.rep-card-remove i {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* Rep card prompt section */
.rep-card-prompt-section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Prompt text box — scrollable, selectable */
.rep-card-prompt-box {
    width: 100%;
    height: 6rem;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.625rem;
    line-height: 1.65;
    color: var(--text-2);
    font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
    resize: none;
    overflow-y: auto;
    cursor: text;
}
.rep-card-prompt-box:focus { outline: none; border-color: rgba(16,185,129,0.4); }

/* Placeholder when no prompt yet */
.rep-card-placeholder {
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

/* Empty state — fully hidden */
#rep-empty { display: none !important; }

.drag-over {
    border-color: var(--indigo) !important;
    background: var(--indigo-bg) !important;
    transform: scale(1.01) !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   16. PRICING PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-plans {
    background: var(--bg);
}

.pricing-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: var(--orange-bg);
    border: 1px solid var(--orange-border);
    color: var(--orange-dark);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.pricing-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.pricing-subtitle {
    font-size: 1rem;
    color: var(--text-3);
    max-width: 24rem;
    margin: 0 auto;
}

/* Cost table */
.cost-table {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    overflow: hidden;
    margin-bottom: 3rem;
    box-shadow: var(--glass-shadow);
}

.cost-table-header {
    padding: 1rem 1.5rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

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

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

.cost-table-cell {
    padding: 1.5rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cost-table-cell:nth-child(2n) {
    border-right: none;
}

@media (min-width: 768px) {
    .cost-table-cell:nth-child(2n) {
        border-right: 1px solid var(--border);
    }
    .cost-table-cell:nth-child(4n) {
        border-right: none;
    }
}

.cost-table-cell:last-child {
    border-right: none;
}

.cost-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.cost-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-1);
}

/* Pricing cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

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

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

.pricing-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(1.9);
    -webkit-backdrop-filter: blur(40px) saturate(1.9);
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s var(--ca-ease-spring);
}

.pricing-card:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: var(--glass-shadow-lg);
    transform: translateY(-4px);
}

.pricing-card.popular {
    border-color: rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3), var(--glass-shadow-lg);
    position: relative !important;
    overflow: visible !important;
    padding-top: 2rem !important;
}

.pricing-card.popular::before {
    display: none;
    content: none;
}

@keyframes popularBadgeFlow {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.pricing-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13), 0 1px 0 rgba(255,255,255,0.55) inset;
    border: 1.5px solid rgba(255,255,255,0.45);
}

.pricing-card-icon.starter { background: linear-gradient(135deg, rgba(120,113,108,0.18) 0%, rgba(168,162,158,0.22) 100%); color: var(--text-3); }
.pricing-card-icon.creator { background: linear-gradient(135deg, rgba(217,119,6,0.18) 0%, rgba(245,158,11,0.22) 100%); color: var(--orange); }
.pricing-card-icon.studio  { background: linear-gradient(135deg, rgba(124,58,237,0.18) 0%, rgba(167,139,250,0.22) 100%); color: var(--purple); }
.pricing-card-icon.enterprise { background: linear-gradient(135deg, rgba(234,179,8,0.18) 0%, rgba(250,204,21,0.22) 100%); color: var(--teal); }

/* Plan name — same gradient/font style as "Power Your Creativity" hero */
.pricing-plan-name {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 0.25rem;
    background: linear-gradient(120deg,#7C3AED 0%,#06B6D4 40%,#EC4899 80%,#7C3AED 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: promptBorderFlow 6s ease infinite;
    line-height: 1.15;
}

.pricing-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0.25rem;
}

.pricing-card-desc {
    font-size: 0.75rem;
    color: var(--text-4);
    margin-bottom: 1rem;
}

.pricing-card-price {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.pricing-card-price .amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1;
}

.pricing-card-price .period {
    font-size: 0.875rem;
    color: var(--text-4);
    margin-bottom: 0.375rem;
}

.pricing-card-credits {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-2);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 1.25rem;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    width: 100%;
}

.pricing-card-features li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.75rem;
    color: var(--text-3);
}

.pricing-card-features li svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--teal);
}

.ca-paypal-btn {
    width: 100%;
    min-height: 2.75rem;
}

/* ═════════════════════════════════════════════════════════════════════════════
   17. ACCOUNT PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-account {
    background: var(--bg);
}

.account-header {
    text-align: center;
    margin-bottom: 2rem;
}

.account-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.account-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg);
    box-shadow: var(--shadow-lg);
}

.account-avatar-status {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--teal);
    border: 3px solid var(--bg);
    border-radius: 50%;
}

.account-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0.25rem;
}

.account-email {
    font-size: 0.875rem;
    color: var(--text-4);
    margin-bottom: 1rem;
}

.account-credits {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--orange-bg);
    border: 1px solid var(--orange-border);
    border-radius: 1rem;
}

.account-credits-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--orange);
}

.account-credits-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-1);
}

.account-credits-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Account grid */
.account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

.account-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    padding: 1.25rem;
    box-shadow: var(--glass-shadow);
}

.account-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border);
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.account-action-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-md);
    color: var(--text-1);
}

.account-action-btn.credits {
    background: var(--orange-bg);
    border-color: var(--orange-border);
    color: var(--orange-dark);
}

.account-action-btn.support {
    background: var(--indigo-bg);
    border-color: var(--indigo-border);
    color: var(--indigo);
}

.account-action-btn.logout {
    color: var(--text-4);
}

.account-action-btn.logout:hover {
    background: rgba(255, 45, 85, 0.08);
    border-color: rgba(255, 45, 85, 0.2);
    color: var(--pink);
}

/* Activity log */
.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}

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

.activity-action {
    font-size: 0.75rem;
    color: var(--text-3);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-amount {
    font-size: 0.75rem;
    font-weight: 700;
    font-family: "SF Mono", monospace;
}

.activity-amount.positive {
    color: var(--teal);
}

.activity-amount.negative {
    color: var(--pink);
}

/* ═════════════════════════════════════════════════════════════════════════════
   18. SUPPORT CHAT — Apple Messages Style
   ═════════════════════════════════════════════════════════════════════════════ */

/* Floating support button */
#ca-support-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 200;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.32s var(--ca-ease-spring);
    animation: supportPulse 3s ease infinite;
}

#ca-support-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5), 0 0 0 6px rgba(99, 102, 241, 0.1);
}

@keyframes supportPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0.25);
    }
    50% { 
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 0 0 10px rgba(99, 102, 241, 0);
    }
}

#ca-support-btn .unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--pink);
    color: white;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s var(--ca-ease-spring);
}

#ca-support-btn .unread-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* Desktop chat box */
#ca-support-chat {
    position: fixed;
    bottom: 6rem;
    right: 1.5rem;
    z-index: 201;
    width: min(380px, calc(100vw - 2rem));
    height: min(520px, 70vh);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(60px) saturate(2);
    -webkit-backdrop-filter: blur(60px) saturate(2);
    border: 1px solid var(--border-md);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s var(--ca-ease-spring);
    overflow: hidden;
}

#ca-support-chat.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.support-chat-header {
    background: linear-gradient(135deg, var(--indigo-bg), var(--purple-bg));
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

.support-chat-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    position: relative;
}

.support-chat-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--teal);
    border-radius: 50%;
    border: 2px solid var(--bg);
}

.support-chat-info {
    flex: 1;
    min-width: 0;
}

.support-chat-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-1);
}

.support-chat-status {
    font-size: 0.6875rem;
    color: var(--teal);
}

.support-chat-close {
    background: none;
    border: none;
    color: var(--text-4);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    min-height: auto;
}

.support-chat-close:hover {
    color: var(--text-1);
    background: rgba(0, 0, 0, 0.05);
}

.support-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.support-chat-messages::-webkit-scrollbar {
    width: 4px;
}

.support-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

.chat-msg {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    border-radius: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
    animation: chatMsgIn 0.35s var(--ca-ease-spring) both;
}

@keyframes chatMsgIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-msg.admin {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    border-bottom-left-radius: 0.25rem;
    align-self: flex-start;
}

.chat-msg.user {
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    color: white;
    border-bottom-right-radius: 0.25rem;
    align-self: flex-end;
}

.chat-typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 0.5rem 0;
}

.chat-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--indigo);
    animation: typingDot 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { transform: scale(0.7); opacity: 0.4; }
    30% { transform: scale(1); opacity: 1; }
}

.support-chat-input-row {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.5);
}

.support-chat-input-row textarea {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border-md);
    border-radius: 1.125rem;
    color: var(--text-1);
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 0.625rem 0.875rem;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 6rem;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.support-chat-input-row textarea:focus {
    border-color: var(--indigo-border);
}

.support-chat-send {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ca-ease-spring);
    color: white;
    min-height: auto;
}

.support-chat-send:hover {
    transform: scale(1.1);
}

.support-chat-send:active {
    transform: scale(0.92);
}

@media (max-width: 767px) {
    #ca-support-btn,
    #ca-support-chat {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   19. MOBILE SUPPORT PAGE
   ═════════════════════════════════════════════════════════════════════════════ */
#view-support {
    display: none;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    color: var(--text-1);
}

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

.ca-support-page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ca-support-back-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--indigo);
    font-size: 0.9375rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.625rem;
    min-height: auto;
    transition: opacity 0.2s;
}

.ca-support-back-btn:active {
    opacity: 0.6;
}

.ca-support-page-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ca-support-page-avatar {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    position: relative;
}

.ca-support-page-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--teal);
    border-radius: 50%;
    border: 2px solid var(--bg);
}

.ca-support-page-info {
    line-height: 1.2;
}

.ca-support-page-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-1);
}

.ca-support-page-status {
    font-size: 0.6875rem;
    color: var(--teal);
}

.ca-support-page-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    scroll-behavior: smooth;
}

.ca-support-chips-row {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    transition: opacity 0.4s ease, max-height 0.5s ease;
    max-height: 200px;
    overflow: hidden;
}

.ca-support-chips-row.hidden-chips {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
}

.ca-support-chips-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.ca-support-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ca-chip-btn {
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    background: var(--indigo-bg);
    border: 1px solid var(--indigo-border);
    color: var(--indigo);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    min-height: auto;
    white-space: nowrap;
}

.ca-chip-btn:active {
    transform: scale(0.96);
    background: rgba(99, 102, 241, 0.18);
}

/* Auto-response bot message — animated typewriter style */
.ca-auto-response {
    font-style: italic;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ca-support-page-input-bar {
    flex-shrink: 0;
    padding: 0.625rem 0.875rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    border-top: 1px solid var(--border);
}

.ca-support-page-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.ca-support-page-input-wrap textarea {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border-md);
    border-radius: 1.25rem;
    color: var(--text-1);
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: 0.625rem 1rem;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 6rem;
    -webkit-appearance: none;
    transition: border-color 0.2s;
}

.ca-support-page-input-wrap textarea:focus {
    border-color: var(--indigo-border);
}

.ca-support-page-send {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    transition: transform 0.15s, background 0.2s;
    min-height: auto;
}

.ca-support-page-send:active {
    transform: scale(0.9);
}

.ca-support-page-disclaimer {
    margin: 0.375rem 0 0;
    font-size: 0.625rem;
    color: var(--text-5);
    text-align: center;
}

@media (min-width: 768px) {
    #view-support {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   20. HISTORY COMPONENTS
   ═════════════════════════════════════════════════════════════════════════════ */
.history-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.history-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.history-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 91;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--border-md);
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(100%);
    transition: transform 0.5s var(--ca-ease-spring);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.history-sheet.open {
    transform: translateY(0);
}

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

.history-sheet-handle {
    width: 2.5rem;
    height: 0.25rem;
    background: var(--bg-4);
    border-radius: 9999px;
    position: absolute;
    top: 0.625rem;
    left: 50%;
    transform: translateX(-50%);
}

.history-sheet-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.history-sheet-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.history-sheet-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-4);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: auto;
}

.history-sheet-btn:hover {
    background: var(--bg-3);
    color: var(--text-1);
}

#history-list,
#history-list-mobile {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.hist-date-label {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-5);
    padding: 0.5rem 0.5rem 0.25rem;
    margin-top: 0.5rem;
}

.hist-item {
    padding: 0.625rem 0.75rem;
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    margin-bottom: 0.25rem;
}

.hist-item:hover {
    background: var(--bg-2);
    border-color: var(--border);
}

.hist-item-text {
    font-size: 0.75rem;
    color: var(--text-2);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
}

.hist-item-time {
    font-size: 0.625rem;
    color: var(--text-5);
    margin-top: 0.25rem;
    font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════════════════
   21. FOOTER
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    font-size: 0.6875rem;
    color: var(--text-5);
    flex-wrap: wrap;
}

.ca-footer-link {
    color: var(--text-5);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.6875rem;
    font-family: inherit;
    transition: color 0.2s;
    padding: 0;
    min-height: auto;
}

.ca-footer-link:hover {
    color: var(--text-2);
}

/* ═════════════════════════════════════════════════════════════════════════════
   22. MOBILE RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    html, body {
        font-size: 15px;
    }
    
    .ambient-orb {
        opacity: 0.28;
        filter: blur(80px);
    }
    
    .ca-nav-mobile {
        z-index: 60;
    }
    
    .ca-nav-mobile nav {
        border-radius: 9999px !important;
    }
    
    #view-home > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
        min-height: 100svh;
    }
    
    #view-home h1 {
        font-size: 2.25rem !important;
        line-height: 1.05 !important;
    }
    
    /* FIX: Do NOT apply padding-top to the flex wrapper on mobile.
     * Nav clearance is handled by #single-result-container padding-top instead.
     * Padding here steals height from flex children and pushes the prompt bar off-screen. */
    #view-generate > div.relative {
        padding-top: 0 !important;
    }
    
    .ca-prompt-bar {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    
    .gen-prompt-card {
        border-radius: 1.25rem !important;
    }
    
    #single-result-container {
        padding-bottom: 13rem !important;
    }
    
    #view-replicate > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
    }
    
    #view-plans > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
    }
    
    #view-account > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
    }
    
    /* Mobile generate layout */
    .gen-sidebar,
    #gen-sidebar {
        display: none !important;
    }

    /* Hide duplicate inline footer row inside prompt bar (using ca-gen-mobile-footer instead) */
    .ca-prompt-bar .flex.justify-center.gap-4.pt-2.pb-1 {
        display: none !important;
    }

    /* ────────────────────────────────────────────────────────
       MOBILE GENERATE — BULLETPROOF FLEX COLUMN LAYOUT
       The entire generate view is a strict flex column so the
       prompt bar is ALWAYS pinned to the bottom without using
       position:absolute (which can be clipped by overflow:hidden
       parent containers on WebKit).
    ──────────────────────────────────────────────────────── */

    /* 1. Root view: full height flex column, no overflow */
    #view-generate {
        display: flex !important;
        flex-direction: column !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
    }

    /* 2. Inner flex wrapper: fill remaining space, column */
    #view-generate > .relative.z-10 {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }

    /* 3. Main area: fill the wrapper, column */
    #view-generate main {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }

    /* 4. Result container: scrollable flex-grow region
     *    flex: 1 1 0 (NOT auto!) is critical — "0" lets it shrink
     *    below its content size so the prompt bar is never pushed out.
     *    padding-top clears the fixed nav bar + safe-area notch. */
    #single-result-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        /* Top clearance: nav pill (~58px) + safe-area + breathing room */
        padding-top: max(4.5rem, calc(3.5rem + env(safe-area-inset-top))) !important;
        padding-bottom: 1.5rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        align-items: flex-start !important;
        justify-content: center !important;
        /* GPU compositing for silky scroll */
        will-change: scroll-position;
        transform: translateZ(0);
    }

    /* 5. Prompt bar: always visible flex footer, never absolute on mobile.
     *    Clearing left/right/bottom ensures no absolute-position ghost values
     *    bleed through from the base rule. */
    .ca-prompt-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        background: var(--bg) !important;
        padding-top: 0.5rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-bottom: max(0.625rem, env(safe-area-inset-bottom)) !important;
        z-index: 30;
        /* Subtle top shadow to visually separate from results */
        box-shadow: 0 -1px 0 var(--border);
    }
    
    .sidebar-model-row {
        /* Fixed pill outer container — like iOS camera options */
        /* Use clip-path instead of overflow:hidden so touch events propagate */
        display: block !important;
        overflow: visible !important;
        border-radius: 9999px !important;
        background: rgba(255, 252, 248, 0.96) !important;
        border: 1px solid rgba(0, 0, 0, 0.09) !important;
        box-shadow: 0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
        backdrop-filter: blur(24px) saturate(1.8) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
        max-width: calc(100% - 2rem) !important;
        margin: 0 auto 0.5rem !important;
        padding: 0 !important;
        position: relative !important;
        /* Clip visually without clipping scroll events */
        clip-path: inset(0 round 9999px) !important;
        -webkit-clip-path: inset(0 round 9999px) !important;
    }
    
    /* Fade-out masks on both edges to hint scrollability */
    .sidebar-model-row::before,
    .sidebar-model-row::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1.25rem;
        z-index: 5;
        pointer-events: none;
    }
    .sidebar-model-row::before {
        left: 0;
        background: linear-gradient(to right, rgba(255,252,248,0.90), transparent);
        border-radius: 9999px 0 0 9999px;
    }
    .sidebar-model-row::after {
        right: 0;
        background: linear-gradient(to left, rgba(255,252,248,0.90), transparent);
        border-radius: 0 9999px 9999px 0;
    }
    
    .sidebar-model-row .gen-model-tabs {
        /* iOS-style smooth momentum scroll inside the pill */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding: 0.25rem 1rem !important;
        width: 100% !important;
        min-width: 0 !important;
        /* Allow native touch-scroll without conflicts */
        touch-action: pan-x !important;
        overscroll-behavior-x: contain !important;
        /* Clear inherited glass styling */
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        cursor: grab !important;
    }
    
    .sidebar-model-row .gen-model-tabs:active {
        cursor: grabbing !important;
    }
    
    .sidebar-model-row .gen-model-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .sidebar-model-row::-webkit-scrollbar {
        display: none;
    }
    
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.625rem !important;
    }
    
    #gen-prompt {
        min-height: 2.5rem !important;
        max-height: 4rem !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.625rem 0.875rem !important;
    }
    
    #gen-submit-btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.6875rem !important;
        min-height: 2.25rem !important;
    }
    
    .ca-gen-mobile-footer {
        display: flex !important;
        justify-content: center;
        gap: 0.75rem;
        padding: 0.35rem 0 0.1rem;
        font-size: 0.625rem;
        color: var(--text-5);
    }
    
    .ca-gen-mobile-footer button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.625rem;
        color: var(--text-5);
        font-family: inherit;
        min-height: auto;
        padding: 0;
        transition: color 0.2s;
    }
    
    .ca-gen-mobile-footer button:hover {
        color: var(--text-2);
    }
    
    /* ── 9:16 & tall image result: static flow layout so buttons always visible ── */
    .gen-result-wrapper {
        /* Relative still needed for absolute positioned elements inside */
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 0 !important;
    }
    
    /* Limit 9:16 images to never push buttons offscreen */
    .gen-result-wrapper .gen-atomic-wrap,
    .gen-result-wrapper .gen-result-image {
        max-height: 62svh !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        border-radius: 1.25rem !important;
    }
    
    .gen-result-wrapper .gen-atomic-wrap {
        display: flex !important;
        justify-content: center !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    /* Floating actions become static row BELOW image on mobile */
    .gen-floating-actions {
        position: static !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 0.625rem !important;
        margin-top: 0.875rem !important;
        padding-bottom: 0.5rem !important;
        z-index: 10 !important;
        width: 100% !important;
    }
    
    .gen-float-btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.6875rem !important;
        gap: 0.375rem !important;
        flex: 1 !important;
        justify-content: center !important;
        max-width: 100px !important;
    }
    
    .gen-float-btn span {
        display: inline !important;
        font-size: 0.6rem !important;
    }
}

@media (min-width: 768px) {
    .ca-gen-mobile-footer {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   23. DRAG & DROP
   ═════════════════════════════════════════════════════════════════════════════ */
.drag-over {
    border-color: var(--indigo) !important;
    background: var(--indigo-bg) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.2) !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   24. PAYPAL BUTTONS
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-paypal-btn iframe {
    border-radius: 0.875rem !important;
    overflow: hidden;
}

.paypal-login-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.875rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-4);
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 2.75rem;
}

.paypal-login-prompt:hover {
    background: var(--bg-3);
    color: var(--text-1);
}

/* ═════════════════════════════════════════════════════════════════════════════
   25. SELECTION STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
::selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-1);
}

::-moz-selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-1);
}

/* ═════════════════════════════════════════════════════════════════════════════
   26. REDUCED MOTION
   ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ambient-orb {
        animation: none;
    }
    
    #ca-support-btn {
        animation: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   27. PERFORMANCE OPTIMIZATIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.ambient-bg {
    contain: strict;
    will-change: auto;
}

.ambient-orb {
    will-change: transform;
}

.view-section {
    contain: layout style;
}

.glass-panel,
.glass-nav {
    will-change: backdrop-filter;
}

.ca-nav-desktop,
.ca-nav-mobile {
    contain: layout;
}

.btn-spring {
    contain: layout;
}

.modal-sheet {
    contain: layout style;
}

/* ═════════════════════════════════════════════════════════════════════════════
   COMFYARTS v27 — APPLE PALETTE OVERRIDE + OLD CODE FEATURES
   Appended to new code CSS to restore old Apple colors, home card animations,
   replicate dot reveal, correct bg colors, borders, and sidebar fix.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ══ 1. DESIGN TOKEN OVERRIDES — Apple System Palette ══ */
:root {
    --bg:            #ffffff;
    --bg-2:          #f2f2f7;
    --bg-3:          #e5e5ea;
    --bg-4:          #d1d1d6;
    --surface:       rgba(255,255,255,0.92);
    --surface-2:     rgba(242,242,247,0.88);

    --blue:          #007AFF;
    --blue-lt:       #409cff;
    --blue-dk:       #0062cc;
    --blue-bg:       rgba(0,122,255,0.08);
    --blue-border:   rgba(0,122,255,0.22);

    --indigo:        #5856D6;
    --indigo-light:  #7674de;
    --indigo-dark:   #4644b8;
    --indigo-bg:     rgba(88,86,214,0.08);
    --indigo-border: rgba(88,86,214,0.22);

    --teal:          #32ADE6;
    --teal-light:    #5bbef0;
    --teal-dark:     #1a93cc;
    --teal-bg:       rgba(50,173,230,0.08);
    --teal-border:   rgba(50,173,230,0.22);

    --purple:        #AF52DE;
    --purple-light:  #c57ef0;
    --purple-dark:   #9036c4;
    --purple-bg:     rgba(175,82,222,0.08);
    --purple-border: rgba(175,82,222,0.22);

    --green:         #34C759;
    --green-lt:      #5dd27b;
    --green-bg:      rgba(52,199,89,0.08);
    --green-border:  rgba(52,199,89,0.22);

    --pink:          #FF2D55;
    --pink-bg:       rgba(255,45,85,0.08);
    --pink-border:   rgba(255,45,85,0.22);

    --orange:        #FF9500;
    --orange-light:  #ffaa33;
    --orange-dark:   #d97706;
    --orange-bg:     rgba(255,149,0,0.08);
    --orange-border: rgba(255,149,0,0.22);

    --text-1:        #1c1c1e;
    --text-2:        #3a3a3c;
    --text-3:        #636366;
    --text-4:        #8e8e93;
    --text-5:        #aeaeb2;

    --border:        rgba(60,60,67,0.08);
    --border-md:     rgba(60,60,67,0.13);
    --border-strong: rgba(60,60,67,0.22);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.11), 0 8px 20px rgba(0,0,0,0.06);
    --shadow-blue: 0 4px 24px rgba(0,122,255,0.22), 0 1px 4px rgba(0,122,255,0.14);

    --glass-bg:          rgba(255,255,255,0.72);
    --glass-bg-strong:   rgba(255,255,255,0.92);
    --glass-border:      rgba(60,60,67,0.08);
    --glass-shadow:      0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.92);
    --glass-inner-glow:  inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,0,0,0.02);
}

/* ══ 2. BODY / PAGE BACKGROUNDS ══ */
html { background:var(--bg-2) !important; }
body, .ca-body { background:var(--bg-2) !important; color:var(--text-1) !important; }
.view-section { background:var(--bg-2) !important; }
#view-home { background:transparent !important; }
#view-generate { background:#ffffff !important; }
#view-replicate { background:var(--bg-2) !important; }
#view-plans { background:var(--bg-2) !important; }
#view-account { background:var(--bg-2) !important; }

/* ══ 3. AMBIENT ORBS — Apple blue/indigo/teal (not new-code purple/violet) ══ */
.ambient-bg { background:var(--bg) !important; }
.orb-1 { background:radial-gradient(circle,rgba(100,180,255,0.55) 0%,rgba(0,122,255,0.18) 55%,transparent 100%) !important; opacity:0.38 !important; }
.orb-2 { background:radial-gradient(circle,rgba(200,190,255,0.50) 0%,rgba(88,86,214,0.14) 55%,transparent 100%) !important; opacity:0.28 !important; }
.orb-3 { background:radial-gradient(circle,rgba(160,235,255,0.40) 0%,rgba(50,173,230,0.10) 55%,transparent 100%) !important; opacity:0.20 !important; }

/* ══ 4. HEADER — thin black border ══ */
header, .glass-nav, nav.glass-nav {
    background:rgba(255,255,255,0.92) !important;
    border-bottom:1px solid rgba(0,0,0,0.10) !important;
    backdrop-filter:blur(60px) saturate(2.0) brightness(1.01) !important;
    -webkit-backdrop-filter:blur(60px) saturate(2.0) brightness(1.01) !important;
    box-shadow:0 1px 0 rgba(0,0,0,0.05), var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}
/* Nav active link — Apple blue */
.nav-link.active { background:var(--blue-bg) !important; color:var(--blue) !important; box-shadow:inset 0 0 0 1px var(--blue-border) !important; }
/* Brand gradient — blue to indigo */
.ca-brand-name {
    background:linear-gradient(135deg,#007AFF 0%,#5856D6 50%,#007AFF 100%) !important;
    -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
}

/* ══ 5. HOME PAGE H1 — dark gradient text (not white) ══ */
#view-home h1,
#view-home h1.bg-clip-text,
h1.bg-gradient-to-b {
    background:linear-gradient(150deg,#1c1c1e 0%,#636366 100%) !important;
    -webkit-background-clip:text !important; background-clip:text !important;
    color:transparent !important;
}
/* Home greeting text */
#home-greeting, #home-greeting-text { color:var(--text-3) !important; }
/* Status badge */
.ca-status-badge { background:var(--bg-2) !important; border-color:var(--border) !important; color:var(--text-3) !important; }

/* ══ 6. HOME PROMPT BOX — border + Apple colors ══ */
.home-prompt-box {
    background:rgba(255,255,255,0.96) !important;
    border:1.5px solid rgba(0,0,0,0.12) !important;
    border-radius:1.75rem !important;
}
.home-prompt-box:focus-within {
    border-color:rgba(0,122,255,0.30) !important;
    box-shadow:0 0 0 4px var(--blue-bg), var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.home-prompt-box textarea { color:var(--text-1) !important; }
/* Home nav pills */
.home-nav-pill { color:var(--text-3) !important; border-color:var(--border) !important; background:var(--glass-bg) !important; }
.home-nav-pill:hover { color:var(--text-1) !important; border-color:var(--border-md) !important; background:var(--glass-bg-strong) !important; }
/* Home submit button */
/* home-submit-btn is always green */
/* Home model select */
#home-model { background:var(--bg-2) !important; border-color:var(--border-md) !important; color:var(--text-2) !important; }

/* ══ 7. HOME CARDS — Apple glass, old icon badge colors ══ */
.ca-card-generate, .ca-card-replicate {
    background:rgba(255,255,255,0.90) !important;
    backdrop-filter:blur(40px) saturate(1.95) brightness(1.02) !important;
    -webkit-backdrop-filter:blur(40px) saturate(1.95) brightness(1.02) !important;
    border:1px solid rgba(0,0,0,0.10) !important;
    border-radius:1.75rem !important;
    box-shadow:0 2px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.95) !important;
    -webkit-mask-image:-webkit-radial-gradient(white, black);
    transform:translateZ(0);
}
.ca-card-generate:hover, .ca-card-replicate:hover {
    box-shadow:0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.98) !important;
    transform:translateY(-2px) translateZ(0) !important;
    border-color:rgba(0,0,0,0.14) !important;
}
/* Remove gradient overlays on cards */
.ca-card-generate .absolute.inset-0.bg-gradient-to-t,
.ca-card-replicate .absolute.inset-0.bg-gradient-to-t { opacity:0 !important; background:none !important; }
/* Icon badges — blue for gen, indigo for rep */
.ca-card-generate .w-10.h-10 { background:var(--blue-bg) !important; border:1px solid var(--blue-border) !important; box-shadow:0 0 14px rgba(0,122,255,0.14) !important; }
.ca-card-replicate .w-10.h-10 { background:var(--indigo-bg) !important; border:1px solid var(--indigo-border) !important; box-shadow:0 0 14px rgba(88,86,214,0.12) !important; }
.ca-card-canvas { background:transparent !important; }
.ca-card-title { color:var(--text-1) !important; text-shadow:none !important; }
.ca-card-desc { color:var(--text-3) !important; text-shadow:none !important; }

/* ══ 8. GENERATE PAGE — sidebar + bg + prompt box ══ */
#view-generate { background:#ffffff !important; overflow:hidden; }
/* Sidebar — override inline styles */
#gen-sidebar,
.gen-sidebar {
    background:rgba(255,255,255,0.97) !important;
    border-right:1px solid rgba(0,0,0,0.08) !important;
    backdrop-filter:blur(40px) saturate(1.9) !important;
    -webkit-backdrop-filter:blur(40px) saturate(1.9) !important;
}
/* Sidebar header — enough top padding so search isn't under nav bar */
.gen-sidebar-header {
    padding-top:max(5.2rem, calc(4.4rem + env(safe-area-inset-top))) !important;
    border-bottom:1px solid var(--border) !important;
}
/* Search input — light Apple style */
#hist-search {
    background:var(--bg-2) !important;
    border-color:var(--border-md) !important;
    color:var(--text-2) !important;
}
#hist-search:focus { border-color:var(--blue-border) !important; }
.gen-sidebar-nav-btn { color:var(--text-3) !important; }
.gen-sidebar-nav-btn:hover { background:rgba(0,0,0,0.04) !important; color:var(--text-1) !important; }
/* Generate prompt card border */
.gen-prompt-card {
    background:rgba(255,255,255,0.97) !important;
    border:1.5px solid rgba(0,0,0,0.11) !important;
    border-radius:1.5rem !important;
}
.gen-prompt-card:focus-within {
    border-color:rgba(0,122,255,0.28) !important;
    box-shadow:0 0 0 4px var(--blue-bg), var(--shadow-lg), var(--glass-inner-glow) !important;
}
/* Generate submit button — blue-to-indigo gradient */
#gen-submit-btn {
    background:linear-gradient(135deg,#007AFF,#5856D6) !important;
    border:none !important;
    color:white !important;
    box-shadow:0 3px 16px rgba(0,122,255,0.38) !important;
}
#gen-submit-btn:hover { background:linear-gradient(135deg,#0062cc,#4644b8) !important; box-shadow:0 6px 24px rgba(0,122,255,0.50) !important; }
/* Generate page tabs */
.gen-model-tabs { background:rgba(255,255,255,0.97) !important; border:1px solid var(--border) !important; }
.gen-model-tab.active,.gen-aspect-tab.active,.gen-res-tab.active { background:rgba(0,0,0,0.06) !important; color:var(--text-1) !important; }

/* ══ 9. REPLICATE PAGE — card style, buttons, atomic dots ══ */
#view-replicate { background:var(--bg-2) !important; }
/* White glass cards */
.rep-card {
    background:rgba(255,255,255,0.92) !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow-md) !important;
}
.rep-card:hover { border-color:var(--border-md) !important; box-shadow:var(--shadow-xl) !important; }
/* Image wrap with dots canvas overlay */
.rep-card-image-wrap { position:relative; aspect-ratio:1; background:var(--bg-2); overflow:hidden; }
.atomic-dots-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:10; pointer-events:none; }
.atomic-reveal-img { width:100%; height:100%; object-fit:cover; }
/* Copy button — Apple blue */
.rep-card-btn-copy { background:var(--blue-bg) !important; color:var(--blue) !important; border:1px solid var(--blue-border) !important; }
.rep-card-btn-copy:hover { background:var(--blue) !important; color:white !important; }
/* Use button — Apple teal */
.rep-card-btn-use { background:var(--teal-bg) !important; color:var(--teal-dark) !important; border:1px solid var(--teal-border) !important; }
.rep-card-btn-use:hover { background:var(--teal) !important; color:white !important; }
/* Drop zone — only visible when empty */
#rep-empty { display:none !important; }
/* Deconstruct All button */
#rep-decon-btn, [onclick*="deconstructAll"], [onclick*="processReplicate"] {
    background:linear-gradient(135deg,var(--blue),var(--indigo)) !important;
    color:white !important; border:none !important;
}

/* ══ 10. CREDITS / PRICING PAGE ══ */
#view-plans { background: var(--bg-2) !important; }

/* Plans page particle canvas (same canvas, shown on plans too) */
body.plans-active #particle-canvas {
    opacity: 0.7 !important;
    transition: opacity 0.5s ease;
}

/* Pricing card — Gen-Z glass redesign */
.pricing-card {
    background: rgba(255,255,255,0.94) !important;
    border: 1.5px solid rgba(0,0,0,0.07) !important;
    border-radius: 1.5rem !important;
    transition: all 0.38s var(--ca-ease-spring) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
    overflow: hidden;
    position: relative;
}

.pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(124,58,237,0.0) 0%, rgba(6,182,212,0.0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.4s ease;
}

.pricing-card:hover::before {
    background: linear-gradient(135deg, rgba(124,58,237,0.6) 0%, rgba(6,182,212,0.5) 100%);
}

.pricing-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* Starter card border */
.pricing-card:nth-child(1) { border-color: rgba(100,100,120,0.12) !important; }
.pricing-card:nth-child(1):hover { border-color: rgba(124,58,237,0.35) !important; box-shadow: 0 16px 48px rgba(124,58,237,0.10), 0 0 0 1px rgba(124,58,237,0.15) !important; }

/* Creator card border */
.pricing-card:nth-child(2) { border-color: rgba(16,185,129,0.25) !important; box-shadow: 0 8px 32px rgba(16,185,129,0.12) !important; }
.pricing-card:nth-child(2):hover { border-color: rgba(16,185,129,0.5) !important; box-shadow: 0 16px 48px rgba(16,185,129,0.18) !important; }

/* Studio Pro border */
.pricing-card:nth-child(3) { border-color: rgba(168,85,247,0.20) !important; }
.pricing-card:nth-child(3):hover { border-color: rgba(168,85,247,0.50) !important; box-shadow: 0 16px 48px rgba(168,85,247,0.15) !important; }

/* Enterprise border */
.pricing-card:nth-child(4) { border-color: rgba(234,179,8,0.20) !important; }
.pricing-card:nth-child(4):hover { border-color: rgba(234,179,8,0.50) !important; box-shadow: 0 16px 48px rgba(234,179,8,0.15) !important; }

.pricing-badge { background: var(--orange-bg) !important; border-color: var(--orange-border) !important; color: var(--orange-dark) !important; }

/* Plans feature items — bigger and more attractive */
.plans-feat-item {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-2) !important;
    letter-spacing: -0.01em;
}

/* Custom PayPal button wrapper — Gen-Z gradient design */
.ca-paypal-btn {
    width: 100%;
    margin-top: 4px;
}

/* Wrap the PayPal iframe to match our design */
.ca-paypal-btn > div,
.ca-paypal-btn iframe,
.ca-paypal-btn [data-paypal-button] {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Custom PayPal button styling overlay */
.ca-paypal-btn-custom {
    position: relative;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    border: 1px solid rgba(255,255,255,0.25);
    background: linear-gradient(135deg,
        rgba(16,185,129,0.9) 0%,
        rgba(6,182,212,0.85) 50%,
        rgba(124,58,237,0.8) 100%);
    background-size: 200% 200%;
    animation: paypalBtnFlow 4s ease infinite;
    box-shadow: 0 4px 20px rgba(16,185,129,0.30), 0 1px 0 rgba(255,255,255,0.15) inset;
    transition: transform 0.3s var(--ca-ease-spring), filter 0.2s, box-shadow 0.3s;
    min-height: 48px;
}

.ca-paypal-btn-custom:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.08);
    box-shadow: 0 8px 30px rgba(16,185,129,0.40);
}

.ca-paypal-btn-custom:active { transform: scale(0.97); }

@keyframes paypalBtnFlow {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.ca-paypal-btn-custom svg {
    width: 18px;
    height: 18px;
    opacity: 0.92;
}

/* ══ 11. TOAST — Apple blue ══ */
.ca-toast { background:rgba(255,255,255,0.97) !important; color:var(--blue) !important; border-color:var(--blue-border) !important; }
.ca-toast.error { color:var(--pink) !important; border-color:var(--pink-border) !important; }
.ca-toast.success { color:var(--green) !important; border-color:var(--green-border) !important; }

/* ══ 12. SUPPORT CHAT — Apple blue ══ */
#ca-support-btn { background:linear-gradient(135deg,#007AFF,#5856D6) !important; }
.support-chat-send { background:linear-gradient(135deg,#007AFF,#5856D6) !important; }
.chat-msg.admin { background:var(--blue-bg) !important; border-color:var(--blue-border) !important; }
.support-chat-avatar, .ca-support-page-avatar {
    background:linear-gradient(135deg,#007AFF,#5856D6) !important;
}

/* ══ 13. MOBILE NAV ══ */
.ca-nav-mobile nav {
    background:rgba(255,255,255,0.92) !important;
    border:1px solid rgba(0,0,0,0.08) !important;
    backdrop-filter:blur(50px) saturate(2.0) !important;
    -webkit-backdrop-filter:blur(50px) saturate(2.0) !important;
    box-shadow:0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.mobile-nav-icon.active { color:var(--blue) !important; background:var(--blue-bg) !important; }

/* ══ MOBILE SELECTOR SWIPE FIX — iOS & Android horizontal scroll ══ */
@media (max-width: 767px) {
    .sidebar-model-row {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Allow horizontal pan, block vertical interference */
        touch-action: pan-x !important;
        padding: 0 4px !important;
        /* Prevent the row from being constrained */
        display: block !important;
        width: 100% !important;
    }
    .sidebar-model-row::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    .gen-model-tabs {
        /* Ensure tabs don't wrap — make the row scrollable */
        width: max-content !important;
        min-width: 100% !important;
        touch-action: pan-x !important;
        /* Allow the tabs to scroll within their container */
        display: inline-flex !important;
    }
    /* Ensure each tab button is tappable and not truncated */
    .gen-model-tab, .gen-aspect-tab, .gen-res-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        touch-action: manipulation !important;
    }
}

/* ══ 14. ADMIN ANIMATION CLASSES (dot color tokens) ══ */
:root {
    --ca-dot-r: 255; --ca-dot-g: 255; --ca-dot-b: 255;
}
body.ca-dots-green   { --ca-dot-r:16;  --ca-dot-g:185; --ca-dot-b:129; }
body.ca-dots-cyan    { --ca-dot-r:6;   --ca-dot-g:182; --ca-dot-b:212; }
body.ca-dots-purple  { --ca-dot-r:168; --ca-dot-g:85;  --ca-dot-b:247; }
body.ca-dots-glass   { --ca-dot-r:200; --ca-dot-g:220; --ca-dot-b:255; }

/* ══ 15. TAILWIND OVERRIDES — Apple palette mapping ══ */
.text-indigo-400,.text-indigo-500,.text-indigo-600 { color:var(--indigo) !important; }
.text-blue-400,.text-blue-500,.text-blue-600 { color:var(--blue) !important; }
.text-teal-400,.text-teal-500,.text-teal-600 { color:var(--teal) !important; }
.text-emerald-400,.text-emerald-500,.text-emerald-600 { color:var(--green) !important; }
.bg-indigo-500\/10,.bg-indigo-500\/20 { background:var(--indigo-bg) !important; }
.border-indigo-500\/20,.border-indigo-500\/30 { border-color:var(--indigo-border) !important; }
/* Scrollbar */
* { scrollbar-width:thin; scrollbar-color:rgba(60,60,67,0.18) transparent; }
*::-webkit-scrollbar { width:5px; height:5px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:rgba(60,60,67,0.18); border-radius:10px; }

/* ══════════════════════════════════════════════════════════════════════
   NEW FEATURES v28 — Download / Share / Expand / Glass Generate Btn
   ══════════════════════════════════════════════════════════════════════ */

/* ── Expand button (third floating action) ── */
.gen-float-btn-expand {
    background: var(--glass-bg-strong);
    color: var(--text-1);
}
.gen-float-btn-expand:hover {
    background: var(--green);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

/* ── Glass Morphic Generate / Create button ── */
.gen-submit-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.375rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    background: linear-gradient(135deg,
        rgba(201,106,0,0.85) 0%,
        rgba(16,185,129,0.75) 50%,
        rgba(99,102,241,0.70) 100%);
    background-size: 200% 200%;
    animation: genBtnGradient 4s ease infinite;
    box-shadow:
        0 4px 20px rgba(201,106,0,0.30),
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.12) inset;
    transition: transform 0.25s var(--ca-ease-spring), box-shadow 0.25s ease, filter 0.2s;
    min-height: 44px;
    cursor: pointer;
}
.gen-submit-glass:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 8px 30px rgba(201,106,0,0.40),
        0 2px 0 rgba(255,255,255,0.22) inset;
    filter: brightness(1.08);
}
.gen-submit-glass:active {
    transform: scale(0.97);
    filter: brightness(0.95);
}
.gen-submit-glass:disabled {
    opacity: 0.55;
    animation: none;
    background: rgba(100,100,100,0.35);
    cursor: not-allowed;
}
.gen-submit-glass-shine {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(105deg, rgba(255,255,255,0.22) 0%, transparent 60%);
    pointer-events: none;
}
@keyframes genBtnGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Cost badge inside generate button */
.gen-btn-cost-badge {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 1px 7px;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.03em;
}

/* ── Home submit button — REPLACED by .home-submit-arrow above ── */
.home-submit-btn {
    display: none; /* Superseded by .home-submit-arrow */
}

/* ── Rep upload animation — smooth spread, NO repeat, position fixed ── */
@keyframes repCardSpread {
    from { opacity: 0; transform: scale(0.88) translateY(12px); filter: blur(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.rep-card {
    animation: repCardSpread 0.48s var(--ca-ease-spring) both;
    animation-fill-mode: forwards;
    animation-iteration-count: 1 !important; /* NEVER REPEAT */
}

/* Static positioning after animation — NO movement ever */
.rep-card.spread-done {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Stagger delays for initial batch */
.rep-card[data-idx="0"] { animation-delay: 0.00s; }
.rep-card[data-idx="1"] { animation-delay: 0.06s; }
.rep-card[data-idx="2"] { animation-delay: 0.12s; }
.rep-card[data-idx="3"] { animation-delay: 0.18s; }
.rep-card[data-idx="4"] { animation-delay: 0.22s; }
.rep-card[data-idx="5"] { animation-delay: 0.26s; }
.rep-card[data-idx="6"] { animation-delay: 0.29s; }
.rep-card[data-idx="7"] { animation-delay: 0.32s; }

/* ── Support chat header text fix — always readable ── */
.support-chat-header .font-bold { color: #111 !important; }

/* ── Share modal hover polish ── */
.ca-share-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* ── Gen atomic wrap (contains canvas + img) ── */
.gen-atomic-wrap {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    display: block;
    width: 100%;
}

/* ══ COSMIC HOME BG — z-layer management ══ */
#view-home {
    isolation: isolate;
}
#view-home > * {
    position: relative;
    z-index: 1;
}
/* Make canvas visible only when home or plans is active (JS also clears canvas for other views) */
body.home-active #particle-canvas {
    opacity: 1;
    transition: opacity 0.5s ease;
}
body.plans-active #particle-canvas {
    opacity: 0.65;
    transition: opacity 0.5s ease;
}
body:not(.home-active):not(.plans-active) #particle-canvas {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ═════════════════════════════════════════════════════════════════════════════
   COMFYARTS v32 — APPLE-GRADE MOBILE SCROLL POLISH
   Appended last so these rules win specificity over everything above.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL MOMENTUM SCROLL ENGINE ── */
/* Every interactive scroll surface gets feather-touch physics.
   On modern iOS this pairs with the native deceleration curve (default ~0.998)
   which gives the characteristic "butter" feel of native Apple apps. */
html {
    scroll-behavior: smooth;
    /* Disable elastic bounce at the document level — we handle it per-container */
    overscroll-behavior: none;
}

/* ── 2. ALL VIEW SECTIONS ── */
/* Base smooth scroll is set globally, but we reinforce it here with
   explicit -webkit-overflow-scrolling for older WebKit versions. */
.view-section {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Feather deceleration: no added friction beyond native */
    scroll-behavior: smooth;
}

/* ── 3. SCROLLBAR HIDE — all platforms ── */
/* Hidden scrollbars remove visual noise on touch devices and match
   the iOS native app aesthetic where scrollbars are invisible. */
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages,
.ca-support-page-messages,
.gen-model-tabs,
.sidebar-model-row {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.view-section::-webkit-scrollbar,
#single-result-container::-webkit-scrollbar,
#history-list::-webkit-scrollbar,
#history-list-mobile::-webkit-scrollbar,
.support-chat-messages::-webkit-scrollbar,
.ca-support-page-messages::-webkit-scrollbar,
.gen-model-tabs::-webkit-scrollbar,
.sidebar-model-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── 4. GPU LAYER PROMOTION ── */
/* Promoting scroll containers to their own compositor layers lets
   the GPU handle repaints during scroll independently from the
   main thread. This is the single biggest source of scroll jank
   on complex pages — eliminating it gives the "glass" smoothness. */
.view-section,
#single-result-container,
.support-chat-messages,
.ca-support-page-messages,
#history-list,
#history-list-mobile {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* ── 5. TOUCH-ACTION WHITELIST ── */
/* Explicitly allow pan-y on vertical scrollers — this tells the
   browser not to wait for JS gesture handlers before initiating
   scroll. pan-x for horizontal pill row. */
.view-section {
    touch-action: pan-y !important;
}
.sidebar-model-row,
.sidebar-model-row .gen-model-tabs {
    touch-action: pan-x !important;
}

/* ── 6. OVERSCROLL BOUNDARY ── */
/* contain stops bounce from propagating out of a scroll container
   to its parent (the classic "page jiggles when inner list hits end"
   bug on iOS). */
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages,
.ca-support-page-messages {
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

/* ── 7. MODAL SMOOTH SCROLL ── */
.modal-sheet {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.modal-sheet::-webkit-scrollbar { display: none; }

/* ── 8. MOBILE-SPECIFIC SCROLL ENHANCEMENTS ── */
@media (max-width: 767px) {
    /* Extra padding so content isn't flush against nav/safe-area */
    .view-section:not(#view-generate) {
        padding-bottom: max(5rem, calc(4rem + env(safe-area-inset-bottom)));
    }

    /* Support page messages: full-height momentum scroll */
    .ca-support-page-messages {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }

    /* History bottom sheet: momentum scroll */
    .history-sheet {
        -webkit-overflow-scrolling: touch;
    }
    #history-list-mobile {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Sidebar model tabs: horizontal momentum scroll */
    .sidebar-model-row .gen-model-tabs {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: none; /* no snap — free momentum */
    }
}

/* ── 9. GENERATE SIDEBAR SCROLL ── */
/* Desktop sidebar history list — smooth, no scrollbar */
#history-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
#history-list::-webkit-scrollbar { display: none; }

/* ── 10. RESULT CONTAINER DESKTOP ── */
/* On desktop the result container also benefits from GPU scroll */
@media (min-width: 768px) {
    #single-result-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }
}