:root {
    --brand-blue: #4169E1;
    --brand-blue-dark: #2a4ec1;
    --brand-green: #00cc44;
    --brand-purple: #8A2BE2;
    --brand-gradient: linear-gradient(45deg, #00FF00, #4169E1, #8A2BE2);
    --brand-danger: #DC2626;
    --brand-ink: #2c3e50;
}

/* Brand action buttons — solid for the primary action in a cluster, outline for
   supporting actions. Use one solid per cluster so attention is unambiguous. */
.btn-brand {
    background-color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    color: #fff;
    font-weight: 600;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(65, 105, 225, 0.35);
}
.btn-brand-outline {
    background-color: transparent;
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
    font-weight: 500;
}
.btn-brand-outline:hover,
.btn-brand-outline:focus {
    background-color: rgba(65, 105, 225, 0.08);
    border-color: var(--brand-blue-dark);
    color: var(--brand-blue-dark);
}
.btn-brand.disabled,
.btn-brand:disabled,
.btn-brand-outline.disabled,
.btn-brand-outline:disabled {
    background-color: transparent;
    border-color: #cbd5e1;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
}

/* Hero section row spacing - consistent 5rem gap between all hero rows */
.hero-section-row {
    margin-bottom: 5rem;
}

/* Bounce arrow under "Try for free" */
.try-it-bounce-arrow {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 2.5rem;
    color: #4169E1;
    text-decoration: none;
    animation: bounceDown 2s ease infinite;
    transition: color 0.2s ease;
}
.try-it-bounce-arrow:hover {
    color: #2a4ec1;
}
@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(12px);
    }
    60% {
        transform: translateY(6px);
    }
}

/* Info callout - subtle branded alternative to Bootstrap alert-info */
.info-callout {
    background-color: rgba(65,105,225,0.06);
    border-left: 4px solid #4169E1;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* App Zone - visually separates the interactive tool from marketing content */
.app-zone {
    background-color: #ffffff;
    padding: 3rem 0;
    margin: 2rem 0 0 0;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.03), inset 0 -2px 8px rgba(0,0,0,0.03);
}

/* Format Magic button */
#button-progress-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(45deg, #00cc44, #4169E1);
    transition: width 0.3s ease;
    z-index: 1;
    opacity: 0.9;
}

/* PDF ready celebration effect */
@keyframes fm-light-sweep {
    0% { transform: translateX(-100%) skewX(-20deg); }
    100% { transform: translateX(250%) skewX(-20deg); }
}

@keyframes fm-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#format-magic-button.fm-success #button-progress-bg {
    background: linear-gradient(45deg, #00FF00, #4169E1, #8A2BE2, #00cc44, #4169E1);
    background-size: 300% 100%;
    animation: fm-gradient-shift 4s ease-in-out infinite;
}

#format-magic-button.fm-success .fm-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 40%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.25) 60%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
    animation: fm-light-sweep 0.8s ease-in-out infinite;
}

/* New file test */
@media (max-width: 767.98px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .row { 
        --bs-gutter-x: 0rem; 
    }
}

.drag-drop-zone {
    position: relative;
    width: 100%;
}

.drag-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.08), rgba(40, 167, 69, 0.06));
    border: 2px dashed #4169E1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    color: #2c3e50;
    pointer-events: none;
    z-index: 1000;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(65, 105, 225, 0.1);
}

.drag-drop-overlay i {
    font-size: 2.5em;
    margin-bottom: 15px;
    color: #4169E1;
    opacity: 0.9;
}

.drag-drop-zone.drag-over textarea {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Single overlay system - always visible */
.drag-drop-overlay {
    display: flex; /* Always show the overlay */
}

.drag-drop-zone textarea:focus ~ .drag-drop-overlay {
    display: none !important; /* Hide overlay when typing */
}

/* Text switching for drag states */
.drag-drop-zone.drag-over .default-overlay-text {
    display: none;
}

.drag-drop-zone.drag-over .drag-overlay-text {
    display: block !important;
}

.drag-drop-zone.drag-over .feature-text {
    display: none;
}

/* Responsive overlay adjustments */
@media (max-width: 768px) {
    /* Hide accordion extra text and pin icons on mobile */
    #dashboardsAccordion .accordion-button > span:not(.fw-bold) {
        display: none;
    }

    #dashboardsAccordion .pin-accordion,
    #savedDocumentsAccordion .pin-accordion,
    #reviseOutputAccordion .pin-accordion {
        display: none !important;
    }

    .drag-drop-overlay {
        padding: 12px;
        font-size: 0.9em;
    }
    
    .drag-drop-overlay i {
        font-size: 2em;
        margin-bottom: 10px;
    }
    
    /* Mobile-specific text sizing */
    .drag-drop-overlay .default-overlay-text > div:first-child {
        font-size: 1.1em !important; /* "Drag & drop file here" */
        margin-bottom: 8px !important;
    }
    
    .drag-drop-overlay .feature-text > div:first-child {
        font-size: 0.9em !important; /* "New Feature" text */
        margin-bottom: 5px !important;
    }
    
    .drag-drop-overlay .feature-text > div:last-child {
        font-size: 0.8em !important; /* Description text */
        line-height: 1.3 !important;
        max-width: 320px !important; /* Narrower width for mobile */
    }
    
    /* Ensure no background images show through on mobile */
    .drag-drop-zone textarea {
        background-image: none !important;
    }
    
    /* Mobile registration message styling */
    .drag-drop-overlay .feature-text > div:nth-child(2) {
        font-size: 0.85em !important; /* Registration message */
        margin-bottom: 5px !important;
    }
    
    /* Ensure proper stacking and no bleed-through */
    .drag-drop-overlay {
        z-index: 1001 !important;
        background: linear-gradient(135deg, rgba(65, 105, 225, 0.12), rgba(40, 167, 69, 0.08)) !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .drag-drop-overlay {
        padding: 10px;
    }
    
    .drag-drop-overlay .default-overlay-text > div:first-child {
        font-size: 1em !important; /* Main text */
    }
    
    .drag-drop-overlay .feature-text > div:first-child {
        font-size: 0.85em !important; /* "New Feature" */
    }
    
    .drag-drop-overlay .feature-text > div:last-child {
        font-size: 0.75em !important; /* Description text */
        max-width: 280px !important;
    }
    
    .drag-drop-overlay i {
        font-size: 1.8em;
        margin-bottom: 8px;
    }
}

/* Image Extraction Feature Highlight Styling */
.image-extraction-highlight {
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.08), rgba(138, 43, 226, 0.08));
    border: 1px solid rgba(65, 105, 225, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.image-extraction-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4169E1, #8A2BE2, #00CED1);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

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

.extraction-badge {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.extraction-badge i {
    color: #4169E1;
    font-size: 1.1em;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
}

.badge-text {
    color: #2c3e50;
    font-size: 0.9em;
    line-height: 1.3;
}

.badge-text strong {
    color: #4169E1;
    font-weight: 600;
}

.extraction-details {
    color: #6c757d;
    font-size: 0.85em;
    font-style: italic;
    padding-left: 24px;
    line-height: 1.2;
}

/* Hover effect for the highlight section */
.image-extraction-highlight:hover {
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.12), rgba(138, 43, 226, 0.12));
    border-color: rgba(65, 105, 225, 0.3);
    transform: translateY(-1px);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(65, 105, 225, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-extraction-highlight {
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    
    .badge-text {
        font-size: 0.85em;
    }
    
    .extraction-details {
        font-size: 0.8em;
        padding-left: 20px;
    }
}

.tagline-container {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 80px;
}

.tagline {
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.5px;
  background-image: linear-gradient(45deg, #00FF00, #4169E1, #8A2BE2);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  position: relative;
  padding: 0 10px;
  animation: shimmer 3s ease-in-out infinite;
}

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

.token-usage-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.token-stat {
    /* You can add padding here if needed e.g., padding: 0 0.25rem; */
}
        .token-divider {
            border-left: 1px solid #dee2e6; /* Standard Bootstrap border color */
            height: 1em;                   /* Adjust height to align well with text */
            margin-left: 0.75rem;
            margin-right: 0.75rem;
        }

        /* Skeleton loading styles for preventing CLS */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
            border-radius: 4px;
        }

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

        .skeleton-category-button {
            height: 50px;
            width: 120px;
            margin: 10px;
            display: inline-block;
        }

        .skeleton-template-gallery {
            height: 200px;
            margin-bottom: 20px;
        }

        .skeleton-selected-template {
            width: 300px;
            height: 350px;
            margin: 0 auto;
        }

        .skeleton-title {
            height: 20px;
            width: 200px;
            margin: 10px auto;
        }

        /* Reserve space to prevent CLS */
        #categoryButtons {
            min-height: 70px; /* Height of a button row */
        }
        #selectedTemplateImage {
            min-height: 300px; /* Height of selected image */
        }

        #subscription-options {
            min-height: 550px; /* Approx height of pricing cards */
        }

        .hidden {
            display: none !important;
        }

/* Custom CSS for index.html */

/* Premium feature callout alert */
.alert.premium-callout {
    position: relative;
    background-color: #faf5ff;
    border: 1px solid #e9d5ff;
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: #374151;
    padding-left: 1.25rem;
}

.alert.premium-callout::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to bottom, #8B5CF6, #EC4899, #F59E0B);
    border-radius: 8px 0 0 8px;
}

.alert.premium-callout .alert-link {
    color: #8B5CF6;
    text-decoration-color: #EC4899;
}

.alert.premium-callout .alert-link:hover {
    color: #6d28d9;
}

/* PDF status notifications - single consistent style for both states */
#pdfGenerationNotification,
#pdfGenerationNotification.alert-success {
    background:
        linear-gradient(#faf5ff, #faf5ff) padding-box,
        linear-gradient(to right, #8B5CF6, #EC4899, #F59E0B) border-box;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #374151;
}

#pdfGenerationNotification .spinner-border {
    color: #F59E0B;
}

#pdfGenerationNotification.alert-success .bi-check-circle-fill {
    color: #22c55e;
    font-size: 1.1rem;
}

/* Accordion Customizations */
.accordion-button {
    padding: 0.75rem 1rem; /* Reduced padding */
}

.accordion-body {
    padding: 0.75rem; /* Reduced padding */
}

/* Brand-tinted accordion headers for all accordions */
#dashboardsAccordion .accordion-button,
#savedDocumentsAccordion .accordion-button,
#reviseOutputAccordion .accordion-button,
#faqAccordion .accordion-button,
#imageLibraryFaqAccordion .accordion-button,
#savedDocsFaqAccordion .accordion-button {
    background-color: rgba(65, 105, 225, 0.07);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #00FF00, #4169E1, #8A2BE2) 1;
    transition: background-color 0.2s ease;
}

#dashboardsAccordion .accordion-button:not(.collapsed),
#savedDocumentsAccordion .accordion-button:not(.collapsed),
#reviseOutputAccordion .accordion-button:not(.collapsed),
#faqAccordion .accordion-button:not(.collapsed),
#imageLibraryFaqAccordion .accordion-button:not(.collapsed),
#savedDocsFaqAccordion .accordion-button:not(.collapsed) {
    background-color: rgba(65, 105, 225, 0.13);
    color: inherit;
    box-shadow: none;
}

#dashboardsAccordion .accordion-button:hover,
#savedDocumentsAccordion .accordion-button:hover,
#reviseOutputAccordion .accordion-button:hover,
#faqAccordion .accordion-button:hover,
#imageLibraryFaqAccordion .accordion-button:hover,
#savedDocsFaqAccordion .accordion-button:hover {
    background-color: rgba(65, 105, 225, 0.11);
}

/* Saved Documents List Customizations */
#document-list-container .list-group-item {
    padding: 0.5rem 0.75rem; /* Reduced padding */
}

#document-list-container .document-title h6 {
    font-size: 0.9rem; /* Smaller title font */
    margin-bottom: 0;
}

#document-list-container .text-muted {
    font-size: 0.75rem; /* Smaller date font */
}

#document-list-container .btn {
    padding: 0.15rem 0.4rem; /* Smaller buttons */
    font-size: 0.75rem; /* Smaller button font */
}

#document-list-container .btn i {
    font-size: 0.8rem; /* Smaller icons in buttons */
}

/* Primary action: Load button - solid brand blue */
#document-list-container .load-document-btn {
    background-color: #4169E1;
    border-color: #4169E1;
    color: white;
    font-weight: 600;
}

#document-list-container .load-document-btn:hover {
    background-color: #3458c4;
    border-color: #3458c4;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(65, 105, 225, 0.35);
}

/* Secondary actions: Rename & Share - outline style */
#document-list-container .rename-document-btn,
#document-list-container .share-document-btn {
    background-color: transparent;
    border: 1px solid #6b7280;
    color: #374151;
    font-weight: 500;
}

#document-list-container .rename-document-btn:hover,
#document-list-container .share-document-btn:hover {
    background-color: #f3f4f6;
    border-color: #4b5563;
    color: #1f2937;
    transform: translateY(-1px);
}

/* Shared state: subtle brand accent */
#document-list-container .share-document-btn.btn-shared {
    border-color: #4169E1;
    color: #4169E1;
}

/* Delete actions: outline red */
#document-list-container .delete-document-btn,
#document-list-container .btn-danger,
#bulk-delete-btn {
    background-color: transparent;
    border: 1px solid #DC2626;
    color: #DC2626;
}

#document-list-container .delete-document-btn:hover,
#document-list-container .btn-danger:hover,
#bulk-delete-btn:hover {
    background-color: #DC2626;
    border-color: #DC2626;
    color: white;
}

/* Delete dropdown split toggle inherits */
#document-list-container .btn-danger.dropdown-toggle {
    background-color: transparent;
    border: 1px solid #DC2626;
    color: #DC2626;
}

#document-list-container .btn-danger.dropdown-toggle:hover {
    background-color: #DC2626;
    color: white;
}

/* Brand-colored checkboxes */
#document-list-container #select-all-checkbox,
#document-list-container .document-checkbox {
    accent-color: #4169E1;
}

/* Green styling for loaded document button */
#document-list-container .load-document-btn.btn-success {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
    font-weight: bold;
}

#document-list-container .load-document-btn.btn-success:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    align-items: start;
    gap: 1rem;
    height: 400px; /* Fixed height instead of max-height */
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}

.image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
    border-radius: .25rem;
}

.image-wrapper.hidden {
    display: none;
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease-in-out, opacity .3s ease-in-out;
}

/* Lazy loading placeholder styling */
.image-wrapper img[data-src] {
    opacity: 0.3;
}

.image-wrapper img:hover {
    transform: scale(1.05);
}

.image-delete-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.image-wrapper:hover .image-delete-icon {
    opacity: 1;
}

.image-select-checkbox {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    width: 20px;
    height: 20px;
}

.image-wrapper input[type="checkbox"]:checked ~ img {
    border: 3px solid #0d6efd; /* A blue border to indicate selection */
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
}

/* Loading state that matches final content dimensions */
.image-library-loading {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    background-color: #f8f9fa;
}

/* Enhanced image styles for TinyMCE and PDF output */
.mce-content-body img,
.formatted-content img {
    max-width: 100%;
    height: auto;
}

/* Ensure image transformations work properly */
.mce-content-body img[style*="transform"],
.formatted-content img[style*="transform"] {
    display: inline-block;
    margin: 10px;
}

/* Make sure polaroid style images have proper spacing */
.mce-content-body img[style*="rotate"],
.formatted-content img[style*="rotate"] {
    margin: 20px;
}

/* Ensure shadow effects are visible in editor */
.mce-content-body img[style*="box-shadow"],
.formatted-content img[style*="box-shadow"] {
    margin: 15px;
}

/* Image Library List View Styles */
.image-gallery-list {
    display: flex;
    flex-direction: column;
    height: 400px; /* Fixed height instead of max-height */
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}

.image-list-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
    transition: background-color 0.2s ease-in-out;
    position: relative;
}

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

.image-list-item:hover {
    background-color: #f8f9fa;
}

.image-list-item.hidden {
    display: none;
}

.image-list-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.375rem;
    margin-right: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, opacity .3s ease-in-out;
    flex-shrink: 0;
}

/* Lazy loading placeholder for list thumbnails */
.image-list-thumbnail[data-src] {
    opacity: 0.3;
}

.image-list-thumbnail:hover {
    transform: scale(1.05);
}

.image-list-content {
    flex: 1;
    min-width: 0; /* Allows text truncation */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.image-list-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.image-list-title:hover {
    background-color: #f8f9fa;
}

.image-list-title.editable {
    background-color: #e9ecef;
    border: 1px solid #adb5bd;
}

.image-list-title.no-title {
    color: #6c757d;
    font-style: italic;
    font-weight: normal;
}

.image-list-title.no-title:hover {
    color: #495057;
    background-color: #f8f9fa;
}

.image-title-input {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin: 0;
    padding: 2px 4px;
    border: 2px solid #0d6efd;
    border-radius: 3px;
    background-color: #fff;
    width: 100%;
    outline: none;
}

.image-title-input:focus {
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.image-list-filename {
    font-size: 0.8rem;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-list-date {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.image-list-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.image-list-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.image-list-delete {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.image-list-item:hover .image-list-delete {
    opacity: 1;
}

.image-list-delete:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* View Controls Styles */
.image-view-controls .btn-group .btn {
    border-radius: 0.375rem;
}

.image-view-controls .btn-group .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.image-view-controls .btn-group .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.image-view-controls .btn.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}


.accordion-peek > .accordion-header > .accordion-button::after {
    animation: accordion-peek 1.5s ease-in-out;
}

/* Professional styling for revise hint popover */
.revise-hint-popover {
    --bs-popover-max-width: 300px;
    --bs-popover-border-color: #4169E1;
    --bs-popover-header-bg: linear-gradient(135deg, #00FF00, #4169E1, #8A2BE2);
    --bs-popover-header-color: white;
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 0.75rem;
    --bs-popover-border-radius: 12px;
    filter: drop-shadow(0 4px 12px rgba(65, 105, 225, 0.15));
    animation: popover-fade-in 0.3s ease-out;
}

@keyframes popover-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.revise-hint-popover .popover-header {
    background: linear-gradient(135deg, #00FF00, #4169E1, #8A2BE2);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.revise-hint-popover .popover-header::before {
    content: "✨";
    margin-right: 8px;
    font-size: 1.1rem;
}

.revise-hint-popover .popover-body {
    color: #2c3e50;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 0 0 12px 12px;
    font-weight: 500;
}

.revise-hint-popover .popover-arrow::before {
    border-top-color: #4169E1;
}

.revise-hint-popover .popover-arrow::after {
    border-top-color: #4169E1;
}

/* Responsive Design for Mobile (avoiding Bootstrap) */
@media (max-width: 768px) {
    .image-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 0.5rem;
        padding: 0.75rem;
        height: 300px; /* Fixed height instead of max-height */
    }
    
    .image-wrapper {
        padding-top: 100%; /* Maintain 1:1 aspect ratio */
    }
    
    .image-delete-icon {
        width: 24px;
        height: 24px;
        top: 3px;
        right: 3px;
    }
    
    .image-select-checkbox {
        width: 16px;
        height: 16px;
        top: 3px;
        left: 3px;
    }
    
    /* List view mobile adjustments */
    .image-gallery-list {
        height: 300px; /* Fixed height instead of max-height */
    }
    
    .image-library-loading {
        height: 300px; /* Match mobile gallery heights */
    }
    
    .image-list-item {
        padding: 0.5rem;
    }
    
    .image-list-thumbnail {
        width: 50px;
        height: 50px;
        margin-right: 0.75rem;
    }
    
    .image-list-content {
        gap: 0.125rem;
    }
    
    .image-list-title {
        font-size: 0.85rem;
    }
    
    .image-list-filename {
        font-size: 0.75rem;
    }
    
    .image-list-date {
        font-size: 0.7rem;
    }
    
    .image-list-delete {
        width: 28px;
        height: 28px;
    }
    
    .image-list-checkbox {
        width: 16px;
        height: 16px;
        margin-right: 0.375rem;
    }
    
    /* View controls mobile adjustments */
    .image-view-controls {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    
    .image-view-controls .btn-group .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }
    
    .image-view-controls .dropdown .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .image-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 0.375rem;
        padding: 0.5rem;
        height: 300px; /* Smaller height on mobile to fit screen better */
    }
    
    .image-gallery-list {
        height: 300px; /* Smaller height on mobile to fit screen better */
    }
    
    .image-library-loading {
        height: 300px; /* Match mobile gallery heights */
    }
    
    .image-list-thumbnail {
        width: 45px;
        height: 45px;
        margin-right: 0.5rem;
    }
    
    .image-list-item {
        padding: 0.375rem;
    }
    
    .image-list-title {
        font-size: 0.8rem;
    }
    
    .image-list-filename,
    .image-list-date {
        font-size: 0.7rem;
    }
}

/* TinyMCE Toolbar Customization */
/* Make the Image Library button green to draw attention */
.tox .tox-tbtn[aria-label*="Image Library"] svg,
.tox .tox-tbtn[title*="Image Library"] svg {
    fill: #28a745 !important; /* Bootstrap success green */
}

.tox .tox-tbtn[aria-label*="Image Library"]:hover svg,
.tox .tox-tbtn[title*="Image Library"]:hover svg {
    fill: #218838 !important; /* Darker green on hover */
}

/* Make the Image Styles button purple to distinguish it */
.tox .tox-tbtn[aria-label*="Image Styles"] svg,
.tox .tox-tbtn[title*="Image Styles"] svg {
    fill: #6f42c1 !important; /* Purple for styling */
}

.tox .tox-tbtn[aria-label*="Image Styles"]:hover svg,
.tox .tox-tbtn[title*="Image Styles"]:hover svg {
    fill: #5a32a3 !important; /* Darker purple on hover */
}

.tox .tox-tbtn[aria-label*="Image Library"],
.tox .tox-tbtn[title*="Image Library"] {
    position: relative;
}

/* Add a subtle glow effect to make it even more noticeable */
.tox .tox-tbtn[aria-label*="Image Library"]::after,
.tox .tox-tbtn[title*="Image Library"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tox .tox-tbtn[aria-label*="Image Library"]:hover::after,
.tox .tox-tbtn[title*="Image Library"]:hover::after {
    opacity: 1;
}

/* Hero video styles moved to static/css/hero-video.css (shared across pages). */
.try-it-link {
    color: #4169E1;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.try-it-link:hover {
    color: #2a4ec1;
    text-decoration: underline;
}

/* =============================================
   Video Section Card Styles
   ============================================= */
.video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border-color: #007bff !important;
}
.video-placeholder {
    transition: all 0.3s ease;
}
.video-card:hover .video-placeholder {
    transform: scale(1.02);
}
.video-card:hover .play-overlay {
    background: rgba(0,0,0,0.6) !important;
}
.video-card:hover .play-overlay i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}
.video-card.playing {
    cursor: default;
}
.video-card.playing:hover {
    transform: none;
    box-shadow: none !important;
}
.video-card.playing .video-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin-top: 1rem;
}
.video-card.playing .video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

/* Video section mobile responsiveness */
@media (max-width: 768px) {
    .video-card .row {
        flex-direction: column-reverse;
    }
    .video-placeholder {
        margin-bottom: 1rem;
    }
    .video-card .card-body {
        padding: 1.5rem !important;
    }
}

/* PDF action button row (Share / Download / Convert) — keep 3-up layout on mobile but
   swap long labels ("Share Document", "Download PDF", "Convert to Word") for short ones
   ("Share", "PDF", "Word") below 576px so text doesn't wrap. Spans are added in
   pdf-handlers.js where the buttons are built. */
.pdf-action-buttons .btn-label-short {
    display: none;
}
@media (max-width: 575.98px), ((max-width: 1024px) and (max-height: 575.98px)) {
    .pdf-action-buttons .btn-label-full {
        display: none;
    }
    .pdf-action-buttons .btn-label-short {
        display: inline;
    }
    .pdf-action-buttons {
        gap: 0.5rem !important;
    }
}

/* "Sample text" button hint — draws attention for anonymous users (mobile users in
   particular often can't easily paste, so the sample input is critical to first-use).
   The Jinja gate (`{% if not user %}`) in index.html only adds .sample-text-hint for
   logged-out users, so logged-in users never get the animation. A blue dot traces the
   button perimeter twice (~3.6s total) then fades out.

   - prefers-reduced-motion: swaps to a static blue glow ring (no movement → no
     vestibular trigger).
   - older browsers without offset-path: rect() support get the same static glow. */
.sample-text-hint {
    position: relative;
}
@supports (offset-path: rect(0% 100% 100% 0%)) {
    .sample-text-hint::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #3b82f6;
        box-shadow: 0 0 8px 3px rgba(59, 130, 246, 0.7);
        pointer-events: none;
        offset-path: rect(0% 100% 100% 0% round 0.25rem);
        offset-anchor: 50% 50%;
        offset-distance: 0%;
        animation: sample-hint-trace 1.8s linear 2,
                   sample-hint-fade 0.4s linear 3.6s forwards;
    }
}
@keyframes sample-hint-trace {
    to { offset-distance: 100%; }
}
@keyframes sample-hint-fade {
    to { opacity: 0; }
}
@supports not (offset-path: rect(0% 100% 100% 0%)) {
    .sample-text-hint::after {
        content: '';
        position: absolute;
        inset: -3px;
        border: 2px solid rgba(59, 130, 246, 0.6);
        border-radius: 0.375rem;
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
        pointer-events: none;
        animation: sample-hint-fade 0.4s linear 3.6s forwards;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sample-text-hint::after {
        animation: sample-hint-fade 0.4s linear 3.6s forwards !important;
        offset-path: none !important;
        top: -3px !important;
        left: -3px !important;
        right: -3px;
        bottom: -3px;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border: 2px solid rgba(59, 130, 246, 0.6);
        border-radius: 0.375rem;
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.4) !important;
    }
}

/* Drag-drop overlay copy swaps between desktop and mobile wording:
   desktop hints at drag-and-drop (which works there), mobile points at Browse
   (drag-and-drop isn't usable on touch). */
.overlay-cta-mobile {
    display: none;
}
@media (max-width: 575.98px), ((max-width: 1024px) and (max-height: 575.98px)) {
    .overlay-cta-desktop {
        display: none;
    }
    .overlay-cta-mobile {
        display: inline;
    }
    /* The "Auto Image Extraction" marketing block overflows the textarea on
       short viewports (landscape phones). Hidden on small/short screens; still
       visible on desktop and portrait phones. */
    .drag-drop-overlay .feature-text {
        display: none;
    }
}

/* Fullscreen button for the input textarea — matches TinyMCE's fullscreen UX so the
   two editing surfaces feel consistent. Floats top-right of the drag-drop-zone above
   the overlay (which has z-index: 1000). When activated, the zone is pinned to the
   viewport via .is-fullscreen and the textarea fills it. */
.textarea-fullscreen-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1001;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ced4da;
    color: #495057;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    font-size: 0.95rem;
}
.textarea-fullscreen-btn:hover,
.textarea-fullscreen-btn:focus {
    background: #ffffff;
    border-color: #4169E1;
    color: #4169E1;
    outline: none;
}
.drag-drop-zone.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.drag-drop-zone.is-fullscreen .custom-textarea {
    flex: 1;
    height: auto !important;
    width: 100%;
    box-sizing: border-box;
    resize: none;
}
.drag-drop-zone.is-fullscreen .drag-drop-overlay {
    display: none !important;
}
.drag-drop-zone.is-fullscreen .textarea-fullscreen-btn {
    top: 12px;
    right: 12px;
}