/* Phase 3 message media sizing */
.media-item img,
.media-item video {
  max-width: 300px;
  height: auto;
  display: block;
  cursor: pointer;
}
.field-error{margin-top:6px;color:#ff6b6b;font-size:12px;line-height:1.2;min-height:0}

    /* ================= VARIABLES.CSS - CSS CUSTOM PROPERTIES ================= */

    :root {
      /* Layout Dimensions */
      --sidebar-width: 260px;
      /* --header-height managed in topbar.css */
      --capsule-panel-width: 220px;

      /* Centered-modal vertical inset on mobile/tablet — reserves space
         for the top-nav and the bottom message-input so modals land in
         the visible canvas area. Used by *-library and share modals.
         Two gutter variants: 8px standard, 4px landscape-phone. */
      --mm-modal-padding-mobile: calc(max(var(--topbar-height-mobile, 56px), var(--input-section-height, 96px)) + 8px);
      --mm-modal-padding-landscape: calc(max(var(--topbar-height-mobile, 56px), var(--input-section-height, 96px)) + 4px);
      
      /* Minimal Grayscale Colors */
      --primary-bg: #0a0a0a;
      --secondary-bg: #141414;
      --tertiary-bg: #1a1a1a;
      --accent-color: #333333;
      
      /* Text Colors - Refined Grayscale */
      --text-primary: #ffffff;
      --text-secondary: #a0a0a0;
      --text-muted: #666666;
      /* --text-placeholder moved to placeholders.css */
      
      /* UI Colors - Clean Minimal */
      --border-color: #2a2a2a;
      --border-subtle: #1a1a1a;
      --hover-bg: #262626;
      --hover-subtle: #1f1f1f;
      /* --header-bg and --header-border managed in topbar.css */
      
      /* Interactive Elements */
      --button-primary: #ffffff;
      --button-primary-text: #000000;
      --button-secondary: #333333;
      --button-secondary-text: #ffffff;
      
      /* Status Colors - Muted */
      --danger-color: #ff4444;
      --success-color: #44ff44;
      --warning-color: #ffaa44;
      --error-color: #ff6b6b;
      
      /* Selection & Focus - Minimal */
      --selected-color: #ffffff;
      --selected-bg: rgba(59, 130, 246, 0.5); /* Changed to a visible light blue */
      --focus-ring: #666666;
      
      /* Tooltips & Overlays */
      --tooltip-bg: #1f1f1f;
      --tooltip-border: #333333;
      --overlay-bg: rgba(0, 0, 0, 0.9);
      
      /* Skeleton Loading */
      --skeleton-bg: #1a1a1a;
      --skeleton-shimmer: #2a2a2a;
      
      /* Responsive Units */
      --vh: 1vh;
      
      /* Professional Loading Gradients - subtle neutral */
      --loading-shimmer: rgba(255, 255, 255, 0.04);
      
      --diagonal-shine: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.02) 35%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(255, 255, 255, 0.02) 65%,
        transparent 70%
      );
    }

    /* ── Touch hit-target: range-input thumbs ─────────────────────────
       The visible thumb stays small (~20px); a 12px transparent border
       expands the hit zone to 44x44 to meet Apple HIG on touch devices.
       background-clip keeps the fill inside the padding box so the
       border remains invisible. Slider-track centering offsets stay in
       each slider's own CSS file (track height varies). */
    @media (hover: none) and (pointer: coarse) {
      .ff-slider::-webkit-slider-thumb,
      .pe-size-slider::-webkit-slider-thumb {
        width: 44px;
        height: 44px;
        border: 12px solid transparent;
        background-clip: padding-box;
        box-sizing: border-box;
      }

      .ff-slider::-moz-range-thumb,
      .pe-size-slider::-moz-range-thumb {
        width: 44px;
        height: 44px;
        border: 12px solid transparent;
        background-clip: padding-box;
        box-sizing: border-box;
      }
    }

    /* Dark Mode Enhancements */
    @media (prefers-color-scheme: dark) {
      :root {
        --loading-shimmer: rgba(255, 255, 255, 0.05);
      }
    }/* ================= BASE.CSS - RESET & CORE LAYOUT ================= */

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

    /* Body & Core Layout */
    body { 
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 400;
      background: var(--primary-bg);
      color: var(--text-primary);
      overflow-x: hidden;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: -0.01em;
    }

    /* Typography Hierarchy */
    h1, h2, h3, h4, h5, h6 {
      font-weight: 500;
      letter-spacing: -0.02em;
    }

    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
    h5 { font-size: 14px; }
    h6 { font-size: 12px; }

    /* Main Content Container */
    .main-content {
      overflow: hidden;
      margin-left: 0;
      margin-right: 0;
      transition: margin-left 0.2s ease, margin-right 0.2s ease;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      display: flex;
      flex-direction: column;
    }

    /* Desktop: both panels overlay content but push header (like iPad) */
    @media (min-width: 769px) {
      /* Make capsule panel 10% wider on desktop for better visibility */
      :root {
        --capsule-panel-width: 242px; /* 220px * 1.1 = 242px */
      }
      
      /* Don't push main content when sidebar is open - overlay instead */
      .main-content.sidebar-open {
        margin-left: 0 !important;
      }
      
      /* But push the header to the right when sidebar is open */
      .sidebar.open ~ .main-content .main-header {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Show dark overlay when sidebar is open on desktop */
      .sidebar.open ~ .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }
      
      /* Chat mode: push main content when capsules panel is open on desktop */
      body:not(.workspace-mode) .main-content.generations-open {
        margin-right: var(--capsule-panel-width);
        transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Workspace mode: FORCE main-content to NOT push (higher specificity) */
      body.workspace-mode .main-content.generations-open {
        margin-right: 0 !important;
      }
      
      /* Workspace mode: ONLY push the header, not the content */
      body.workspace-mode .main-content.generations-open .main-header {
        margin-right: var(--capsule-panel-width);
        transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Header does not need extra margin - it's pushed by the main-content */
      /* Removed duplicate rule that was causing double-push */
      
      /* When both panels are open, push content and header from both sides */
      .sidebar.open ~ .main-content.generations-open {
        margin-left: var(--sidebar-width);
        margin-right: var(--capsule-panel-width);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Header is pushed by the main-content margins, no separate rule needed */
      
      /* Push chat messages when sidebar is open, but keep input-section centered */
      .sidebar.open ~ .main-content .chat-messages {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Don't push input-section - let existing centering logic handle it */
      
      /* Push specific modules when sidebar is open (chat only at module level) */
      .sidebar.open ~ .main-content .message.module[data-module="projectChat"] {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Push gallery root container when sidebar is open */
      .sidebar.open ~ .main-content .message.module[data-module="privateGallery"] .pg-root {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        max-width: calc(100% - var(--sidebar-width));
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      

      /* Workspace mode: push active module content (Gallery + Editor) */
      .sidebar.open ~ .main-content .chat-container.workspace-active .workspace-stage .pg-root {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        max-width: calc(100% - var(--sidebar-width));
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .sidebar.open ~ .main-content .chat-container.workspace-active .workspace-stage .module-surface {
        margin-left: var(--sidebar-width);
        flex: 0 1 calc(100% - var(--sidebar-width));
        width: calc(100% - var(--sidebar-width));
        max-width: calc(100% - var(--sidebar-width));
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Push freeform content when sidebar is open */
      .sidebar.open ~ .main-content .message.module[data-module="freeform"] .module-surface {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Workspace mode: push freeform module content when sidebar is open */
      .sidebar.open ~ .main-content .chat-container.workspace-active .workspace-stage .message.module[data-module="freeform"] .module-surface,
      body[data-active-module="freeform"] .sidebar.open ~ .main-content .chat-container.workspace-active .workspace-stage .module-surface {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }


      /* Freeform iconBar sidebar push is handled in freeform.css / Toolbar.js */

      /* Push 3D editor left-side elements when sidebar is open */
      .sidebar.open ~ .main-content #m3d-iconBar {
        left: calc(var(--sidebar-width) + 16px) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .sidebar.open ~ .main-content .m3d-canvas-pills-left {
        left: calc(var(--sidebar-width) + 16px) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      
      /* Override: Don't push chat messages/input when freeform or 3dstudio is active (only push the module itself) */
      body[data-active-module="freeform"] .sidebar.open ~ .main-content .chat-messages,
      body[data-active-module="freeform"] .sidebar.open ~ .main-content .input-section {
        margin-left: 0 !important;
      }
      
      /* Explicitly don't push freeform and 3dstudio modules as whole messages (content is pushed separately) */
      .sidebar.open ~ .main-content .message.module[data-module="freeform"] {
        margin-left: 0 !important;
      }
    }

    /* Overlay for Mobile Sidebar */
    .sidebar-overlay {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.2);
      z-index: 1200; /* above header, below panels */
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .sidebar-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    @media (min-width: 700px) {
      body.workspace-mode:not([data-active-module="chat"]) .sidebar.open ~ .sidebar-overlay.active {
        opacity: 0;
        pointer-events: none;
      }
    }

    /* When offset-left is present on mobile only, position overlay to the right of the sidebar */
    @media (max-width: 768px) {
      .sidebar-overlay.offset-left {
        left: var(--sidebar-width);
        width: calc(100vw - var(--sidebar-width));
      }
    }
    
    /* On iPad/tablet, overlay covers entire screen but sidebar sits above it */
    @media (hover: none) and (pointer: coarse) and (min-width: 768px) {
      .sidebar-overlay.offset-left {
        left: var(--sidebar-width) !important; /* Start after sidebar, not covering it */
        width: calc(100vw - var(--sidebar-width)) !important;
      }
    }

    /* Small tablets (iPad Mini 5/6, equivalent): sidebar 20% smaller than desktop.
       Bounded purely by viewport width — dropped the (hover:none, pointer:coarse)
       gate so iPad + Magic Keyboard (reports pointer: fine) still gets the tablet
       width instead of the desktop 330px. Lower bound set to 700px so iPad Mini 6
       (744px) and iPad Mini 5 (768px) both qualify; phones (<=699px) fall through
       to the mobile rule that sets 80vw. */
    @media (min-width: 700px) and (max-width: 900px) {
      :root {
        --sidebar-width: 264px; /* 20% smaller than 330px (330 * 0.8 = 264) */
      }
    }

    /* iPad & Desktop: Make capsules search field use remaining space */
    @media (min-width: 768px) {
      /* Generations header/search layout is owned by topbar.css (single source of truth). */
    }

    /* iPad overlay mode: push header right when sidebar open, but keep content overlaying */
    @media (hover: none) and (pointer: coarse) and (min-width: 768px) {
      .sidebar.open ~ .main-content .main-header {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.2s ease;
      }
      
      /* Hide specific header user section items when sidebar is open on iPad (except user pill and upgrade button) */
      .sidebar.open ~ .main-content .main-header .header-user-section #tutorialsDropdown,
      .sidebar.open ~ .main-content .main-header .header-user-section #notificationsDropdown,
      .sidebar.open ~ .main-content .main-header .header-user-section #pricingPill,
      .sidebar.open ~ .main-content .main-header .header-user-section #signinBtn {
        opacity: 0;
        pointer-events: none;
        width: 0;
        min-width: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        transform: translateX(20px);
        transition: opacity 0.2s ease, transform 0.2s ease, width 0.2s ease, min-width 0.2s ease, margin 0.2s ease;
      }
      
      /* Keep upgrade button visible and adjust header-user-section to maintain its presence */
      .sidebar.open ~ .main-content .main-header .header-user-section {
        gap: 0;
        transition: gap 0.2s ease;
      }
      
      /* Expand main header title to take available space */
      .sidebar.open ~ .main-content .main-header .main-header-title {
        flex: 1;
        max-width: none;
        transition: flex 0.2s ease, max-width 0.2s ease;
      }
      
      /* No separate rule needed for capsule panel on iPad - main-content margin handles it */
      
      /* Hide specific header user items when capsules panel is open (chat and workspace) - keep user pill visible */
      body.capsule-header-open .main-header .header-user-section #tutorialsDropdown,
      body.capsule-header-open .main-header .header-user-section #notificationsDropdown,
      body.capsule-header-open .main-header .header-user-section #pricingPill,
      body.capsule-header-open .main-header .header-user-section #signinBtn {
        opacity: 0;
        pointer-events: none;
        width: 0;
        min-width: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        transform: translateX(-20px);
        transition: opacity 0.2s ease, transform 0.2s ease, width 0.2s ease, min-width 0.2s ease, margin 0.2s ease;
      }

      /* Header stays in place when capsules panel is open - no pushing */
      @media (min-width: 769px) {
        body.capsule-header-open .main-header {
          /* Don't push header - panel slides over it */
          padding-right: 20px;
          transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
      }
      
      /* Both panels open: main-content margins handle the push, no separate header rule needed */
      
      /* Inspirational prompt: never "fly in" from the left when sidebar opens */
      /* IMPORTANT: Style the wrapper (centering container), not the prompt itself */
      body:has(.sidebar.open) .inspirational-prompt-wrapper {
        opacity: 0.5 !important;
        transition: opacity 0.2s ease !important;
      }
      
      /* Also target the input section container to ensure it doesn't interfere */
      body:has(.sidebar.open) .input-section {
        z-index: auto !important; /* Don't create stacking context that would elevate children */
      }
    }

@media (max-width: 699px) {
  :root {
        --sidebar-width: 80vw;
      }
}

@media (max-width: 768px) {
      .sidebar-overlay {
        inset: 0; /* cover entire viewport on mobile */
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }

    /* Minimal Focus Styles */
    *:focus {
      outline: 1px solid var(--focus-ring);
      outline-offset: 1px;
    }

    *:focus:not(:focus-visible) {
      outline: none;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

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

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

    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
  }
  
    /* Selection Styling */
    ::selection {
      background: var(--selected-bg);
      color: var(--text-primary);
    }/* ================= SIDEBAR.CSS - NAVIGATION & MENU ================= */

    /* Sidebar Container */
  .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: var(--sidebar-width);
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      background: rgba(18, 18, 18, 0.7);
      border-right: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(-100%);
      transition: transform 0.2s ease;
      z-index: 2600; /* Above prompt bar (2400) and overlays (1200); keep below modals (100000+) */
      display: flex;
      flex-direction: column;
      box-shadow: 4px 0 45px rgba(0,0,0, 0.25);
    backdrop-filter: blur(40px) saturate(130%);
    -webkit-backdrop-filter: blur(40px) saturate(130%);
    contain: layout style;
  }

  /* Prefer dynamic viewport on modern Safari/Chromium to avoid iPad keyboard push */
  @supports (height: 100dvh) {
    .sidebar { height: 100dvh; }
  }

  /* iPad/mobile: keep sidebar pinned to full visual height, unaffected by keyboard */
  @media (max-width: 1024px) {
    .sidebar { height: 100svh; }
    body.input-focused .sidebar { height: 100svh; }
  }
  
  .sidebar.open {
    transform: translateX(0);
    }

  /* Mobile performance: reduce heavy blur while opening sidebar */
  @media (max-width: 768px) {
    .sidebar {
      backdrop-filter: blur(30px) saturate(130%);
      -webkit-backdrop-filter: blur(30px) saturate(130%);
      will-change: transform;
      contain: layout paint style;
    }
  }

    /* Sidebar header visuals are owned by topbar.css (single source of truth). */
    .sidebar-header {
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--app-header-height, 70px);
      min-height: var(--app-header-height, 70px);
      max-height: var(--app-header-height, 70px);
      flex-shrink: 0;
    }

    /* Sidebar Content - Split layout: Studios fixed, Projects scrollable */
    .sidebar-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
    }

    /* Top static sections (Library + Super Studios) — no divider between
       them so the left sidebar reads as one continuous area above Projects. */
    .sidebar-section:first-child {
      flex-shrink: 0;
      padding: 20px 0 12px 0;
      background: transparent;
      z-index: 1;
    }

    /* Projects Section - Scrollable, same frosted glass background */
    .sidebar-section#projectsSection {
      flex: 1;
      overflow-y: auto;
      padding: 12px 0 20px 0;
      background: transparent;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    }

    .sidebar-section#projectsSection::-webkit-scrollbar {
      width: 4px;
    }

    .sidebar-section#projectsSection::-webkit-scrollbar-track {
      background: transparent;
    }

    .sidebar-section#projectsSection::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 2px;
    }

    .sidebar-section#projectsSection::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .sidebar-section { 
      margin-bottom: 0; 
    }

    .sidebar-section-title {
      padding: 0 20px 8px;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    /* Collapsible projects section (phone fast-start) */
    .sidebar-section.collapsed #projectsList {
      display: none;
    }
    .sidebar-section.collapsed .sidebar-section-title .section-chevron {
      transform: rotate(0deg);
    }

    /* Phone welcome thinking dots */
    .thinking-dots span {
      animation: thinkDot 1.4s infinite;
      opacity: 0.2;
      font-size: 1.4em;
      letter-spacing: 2px;
    }
    .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
    .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes thinkDot {
      0%, 80%, 100% { opacity: 0.2; }
      40% { opacity: 1; }
    }

    /* Projects Subsections */
    .projects-subsection {
      margin-top: 16px;
    }

    .projects-subsection:first-child {
      margin-top: 0;
    }

    .projects-subsection-title {
      padding: 0 20px 8px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      opacity: 0.7;
      margin-bottom: 4px;
    }

    /* Project Loading Skeletons */
    #projectsList.projects-loading {
      pointer-events: none;
      user-select: none;
    }

    .project-skeleton {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      margin: 0 12px 4px 12px;
      border-radius: 6px;
      /* Remove gap to use specific margins matching sidebar-item */
      pointer-events: none;
    }

    /* Smooth transition: skeleton -> real projects (no blank gap) */
    #projectsList.projects-content-enter > * {
      opacity: 0;
      transform: translateY(4px);
    }

    #projectsList.projects-content-enter.projects-content-enter-active > * {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 180ms ease, transform 180ms ease;
      will-change: opacity, transform;
    }

    @media (prefers-reduced-motion: reduce) {
      #projectsList.projects-content-enter > *,
      #projectsList.projects-content-enter.projects-content-enter-active > * {
        transition: none !important;
        transform: none !important;
      }
    }

    .project-skeleton-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-left: 4px;
      margin-right: 12px;
      background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.03) 100%
      );
      background-size: 200% 100%;
      animation: skeletonShimmer 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    .project-skeleton-text {
      width: 65%;
      height: 10px;
      border-radius: 4px;
      background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.03) 100%
      );
      background-size: 200% 100%;
      animation: skeletonShimmer 2s ease-in-out infinite;
    }

    .project-skeleton:nth-child(2) .project-skeleton-text {
        width: 50%;
    }
    
    .project-skeleton:nth-child(3) .project-skeleton-text {
        width: 75%;
    }

    .project-skeleton:nth-child(4) .project-skeleton-text {
        width: 60%;
    }

    .project-skeleton:nth-child(2) .project-skeleton-icon,
    .project-skeleton:nth-child(2) .project-skeleton-text {
      animation-delay: 0.1s;
    }

    .project-skeleton:nth-child(3) .project-skeleton-icon,
    .project-skeleton:nth-child(3) .project-skeleton-text {
      animation-delay: 0.2s;
    }
    
    .project-skeleton:nth-child(4) .project-skeleton-icon,
    .project-skeleton:nth-child(4) .project-skeleton-text {
      animation-delay: 0.3s;
    }
    
    .project-skeleton:nth-child(5) .project-skeleton-icon,
    .project-skeleton:nth-child(5) .project-skeleton-text {
      animation-delay: 0.4s;
    }

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

    /* ============================================
       LAZY LOADING STYLES
       ============================================ */
    
    /* Project Placeholder (for lazy-loaded projects) */
    .project-placeholder {
      opacity: 0.6;
      pointer-events: none;
      cursor: default;
    }
    
    .project-placeholder:hover {
      background: transparent !important;
      box-shadow: none !important;
    }
    
    /* Shimmer effect for placeholders */
    .placeholder-shimmer {
      background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.03) 100%
      ) !important;
      background-size: 200% 100% !important;
      animation: placeholderShimmer 2s ease-in-out infinite !important;
      color: transparent !important;
    }
    
    @keyframes placeholderShimmer {
      0% {
        background-position: -200% 0;
      }
      100% {
        background-position: 200% 0;
      }
    }
    
/* Lazy load sentinel wrapper */
.lazy-load-sentinel-wrapper {
  width: 100%;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

/* Lazy load trigger (invisible) */
.lazy-load-trigger {
  height: 1px;
  width: 100%;
  pointer-events: none;
  margin: 0;
  padding: 0;
  opacity: 0;
}

/* Loading indicator for lazy batches */
.lazy-batch-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  color: var(--text-muted);
  font-size: 11px;
  opacity: 0.7;
  gap: 6px;
  pointer-events: none;
}

.lazy-batch-loader::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: var(--text-muted);
  border-radius: 50%;
  animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

    /* Sidebar Items */
    .sidebar-item {
      display: flex;
      align-items: center;
      padding: 8px 12px 8px 18px;
      margin: 0 8px;
      border-radius: 6px;
      cursor: pointer;
      transition:
        background 0.08s ease-out,
        box-shadow 0.08s ease-out,
        opacity 0.1s ease;
      font-size: 13px;
      font-weight: 400;
      position: relative;
      user-select: none;
      color: var(--text-primary);
      border-left: none;
      contain: layout style;
  }

    .sidebar-item:hover {
      background: rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    /* ========== ACTIVE PROJECT - Clean Professional Style ========== */
    /* Matches topbar frosted glass aesthetic - no colored bands */
    .sidebar-item.active {
      background: rgba(255, 255, 255, 0.08);
      color: #ffffff;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    /* Fast transitions for project items - responsive hover */
    .sidebar-item.project-item:not(.active) {
      transition:
        background 0.1s ease,
        box-shadow 0.1s ease,
        opacity 0.15s ease;
    }

    /* Smooth fade in for activating projects - subtle, professional */
    .sidebar-item.project-item.active:not(.active-click-feedback) {
      animation: projectActivate 0.4s ease forwards;
    }

    @keyframes projectActivate {
      0% {
        opacity: 0.7;
        background: rgba(255, 255, 255, 0.03);
      }
      100% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.08);
      }
    }

    /* Active project click feedback - subtle pulse, no color change */
    .sidebar-item.project-item.active.active-click-feedback {
      animation: activeProjectClickFeedback 0.35s ease !important;
      background: rgba(255, 255, 255, 0.08) !important;
    }

    @keyframes activeProjectClickFeedback {
      0% {
        transform: scale(1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      }
      50% {
        transform: scale(1.01);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
      }
      100% {
        transform: scale(1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      }
    }

    /* Active Project Indicator Dot - Monochrome white (consistent with modules) */
    .sidebar-item.project-item.active::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      box-shadow: 
        0 0 6px rgba(255, 255, 255, 0.4),
        0 0 12px rgba(255, 255, 255, 0.2);
      animation: activeProjectPulse 2.5s ease-in-out infinite;
      z-index: 1;
    }

    /* Ensure dot appears even when project has image loaded */
    .sidebar-item.project-item.active[data-project]::before {
      content: '' !important;
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      box-shadow: 
        0 0 6px rgba(255, 255, 255, 0.4),
        0 0 12px rgba(255, 255, 255, 0.2);
      animation: activeProjectPulse 2.5s ease-in-out infinite;
      z-index: 1;
    }

    /* Active Module Indicator Dot */
    .sidebar-item[data-module].active::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 16px rgba(255, 255, 255, 0.3);
      animation: activeProjectPulse 2s ease-in-out infinite;
      transition: all 0.2s ease;
      z-index: 1;
    }

    /* REMOVED: No dot enhancement on hover - dot only shows on active project, not on hover */

    /* Subtle pulse animation for the active dot */
    @keyframes activeProjectPulse {
      0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
      }
      50% {
        opacity: 0.7;
        transform: translateY(-50%) scale(1.1);
      }
    }

    /* ========== MODULE ITEMS - Modern Sleek Style ========== */
    
    /* Draggable Module Styling */
    .sidebar-item[data-module] {
      cursor: pointer;
      border-radius: 10px;
    }

    .sidebar-item[data-module]:active {
      cursor: pointer;
      opacity: 0.9;
    }

    /* Active module state - modern sleek */
    .sidebar-item[data-module].active {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border-left-color: transparent;
      box-shadow: none;
    }

    /* Active Module Indicator - clean subtle dot */
    .sidebar-item[data-module].active::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 4px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      transition: opacity 0.2s ease;
      z-index: 1;
    }

    /* Modern hover effects for modules - no scale, no blue */
    .sidebar-item[data-module]:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.95);
      box-shadow: none;
      border-left-color: transparent;
    }

    /* Coming Soon Module Styling */
    .sidebar-item.coming-soon {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    .sidebar-item.coming-soon:hover {
      background: transparent;
    }

    .sidebar-item.has-new-module .sidebar-item-text,
    .sidebar-item.has-free-module .sidebar-item-text,
    .sidebar-item.coming-soon .sidebar-item-text {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      white-space: nowrap;
      animation: none;
      text-shadow: none;
    }

    .sidebar-item .coming-soon-badge,
    .sidebar-item .new-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      height: 18px;
      padding: 0 8px;
      border: 1px solid rgba(209, 254, 23, 0.34);
      border-radius: 999px;
      background: rgba(209, 254, 23, 0.14);
      color: #d1fe17;
      font-size: 9px;
      font-weight: 760;
      line-height: 1;
      letter-spacing: 0.08em;
      margin-left: 2px;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: none;
      animation: none;
      vertical-align: middle;
    }

    .sidebar-item .coming-soon-badge {
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.58);
    }

    .sidebar-item .new-badge.new-badge-free {
      border-color: rgba(92, 190, 128, 0.34);
      background: rgba(92, 190, 128, 0.16);
      color: rgba(215, 247, 226, 0.96);
    }


    .sidebar-item[data-module].dragging {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.4) !important;
      opacity: 0.4;
      cursor: grabbing;
    }

    /* Drag over styling for module items */
    .sidebar-item[data-module].drag-over {
      background: rgba(255, 255, 255, 0.15) !important;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
      transition: all 0.2s ease;
    }

    /* Hover countdown animation */
    @keyframes hoverPulse {
      0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
      }
      50% { 
        box-shadow: 0 0 30px rgba(96, 165, 250, 0.6);
        transform: scale(1.08);
      }
    }

    .sidebar-item-icon {
      width: 18px;
      height: 18px;
      margin-right: 12px;
      margin-left: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .sidebar-item-icon.project-thumb {
      width: 28px;
      height: 28px;
      aspect-ratio: 1 / 1;
      flex: 0 0 28px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6);
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 12px;
      color: #fff;
      margin-left: 4px;
  }
  
    .sidebar-item-text { 
      flex: 1; 
      font-weight: 400;
    }

    /* Video Studio is a non-navigating domain with nested workflows. */
    .sidebar-module-group {
      margin: 2px 0;
    }

    .sidebar-item.sidebar-item-parent {
      min-height: 42px;
    }

    .sidebar-item.sidebar-item-parent[aria-expanded] {
      cursor: pointer;
    }

    .sidebar-module-expander {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      margin: -5px -7px -5px 4px;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      line-height: 1;
    }

    .sidebar-module-expander svg {
      width: 14px;
      height: 14px;
      transition: transform 0.16s ease;
    }

    .sidebar-module-expander:hover,
    .sidebar-module-expander:focus-visible {
      background: rgba(255, 255, 255, 0.1);
      outline: none;
    }

    .sidebar-module-group:not(.is-expanded) .sidebar-module-expander svg {
      transform: rotate(180deg);
    }

    .sidebar-module-children[hidden] {
      display: none;
    }

    .sidebar-item.sidebar-item-child {
      margin-left: 8px;
      /* Indent by the parent's complete icon slot (18px icon + 12px gap),
         so child icons begin exactly where the parent label begins. */
      padding-left: 48px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.68);
    }

    .sidebar-item.sidebar-item-child .sidebar-item-icon {
      width: 17px;
      height: 17px;
      margin-right: 10px;
      margin-left: 6px;
      opacity: 0.76;
    }

    .sidebar-item.sidebar-item-child.active {
      color: #fff;
    }

    .sidebar-item.sidebar-item-placeholder {
      opacity: 0.62;
      pointer-events: none;
      cursor: default;
    }

    .sidebar-item.sidebar-item-placeholder .sidebar-item-text {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      white-space: nowrap;
    }

    .sidebar-item-status {
      font-size: 10px;
      font-weight: 400;
      opacity: 0.68;
    }

    .sidebar-item-badge {
      background: var(--button-secondary);
      color: rgb(170, 170, 170);
      font-size: 9px;
      padding: 1px 4px;
      border-radius: 6px;
      font-weight: 400;
      border: 1px solid var(--border-color);
      margin-left: 14px;
      flex-shrink: 0;
    }

    /* New Project Button */
    .new-project-btn {
      margin: 2px 20px 8px 35px;
      width: 25px;
      height: 25px;
      padding: 0;
      background: #ffffff;
      border: none;
      border-radius: 50%;
      color: #333333;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: none;
      align-items: center;
      justify-content: flex-start;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      position: relative;
    }

    /* Show new project button only when projects are loaded */
    .new-project-btn.projects-loaded {
      display: flex;
    }

    .new-project-btn .plus-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;
      flex-shrink: 0;
    }

    .new-project-btn .project-text {
      white-space: nowrap;
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.3s ease;
      margin-left: 8px;
      font-size: 13px;
    }

    .new-project-btn:hover { 
      background: #666666; 
      color: #ffffff;
      width: 120px;
      border-radius: 14px;
    }

    .new-project-btn:hover .project-text {
      opacity: 1;
      transform: translateX(0);
    }

    /* Load More Projects Button */
    .load-more-projects-btn {
      margin: 8px 20px;
      padding: 8px 16px;
      background: var(--button-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(100% - 40px);
      opacity: 0.7;
    }

    .load-more-projects-btn:hover {
      opacity: 1;
      background: var(--button-secondary);
      border-color: var(--text-primary);
      transform: translateY(-1px);
    }

    .load-more-projects-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .load-more-projects-btn span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Load More Month Button */
    .load-more-month-btn {
      margin: 8px 20px;
      padding: 8px 16px;
      background: var(--button-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(100% - 40px);
      opacity: 0.7;
    }

    .load-more-month-btn:hover {
      opacity: 1;
      background: var(--button-secondary);
      border-color: var(--text-primary);
      transform: translateY(-1px);
    }

    .load-more-month-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* Load More Sentinel (invisible trigger for scroll loading) */
    .load-more-sentinel {
      visibility: hidden;
      pointer-events: none;
      height: 1px;
      width: 100%;
    }

    /* Project Bucket Sections */
    .project-bucket-section {
      margin-bottom: 8px;
    }

    .project-bucket-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 20px;
      cursor: pointer;
      user-select: none;
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: color 0.2s ease;
    }

    .project-bucket-header:hover {
      color: var(--text-primary);
    }

    .bucket-title {
      flex: 1;
    }

    .bucket-count {
      font-size: 10px;
      opacity: 0.6;
      font-weight: 500;
    }

    .bucket-chevron {
      font-size: 10px;
      transition: transform 0.2s ease;
      display: inline-block;
      width: 12px;
      text-align: center;
    }

    .bucket-chevron.expanded {
      transform: rotate(90deg);
    }

    .project-bucket-body {
      overflow: hidden;
      transition: max-height 0.3s ease, opacity 0.2s ease;
    }

    .project-bucket-body.expanded {
      max-height: 5000px;
      opacity: 1;
    }

    .project-bucket-body.collapsed {
      max-height: 0;
      opacity: 0;
    }
    
    /* Upgrade pill in project list - pricing hidden in studio */
    .project-bucket-body .project-upgrade-pill {
      display: none !important;
    }

    /* Project Items */
    .project-item { 
      position: relative;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform, opacity;
    }

    /* Smooth slide animation for project reorganization */
    .project-item.reorganizing {
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      z-index: 10;
    }

    /* Active project slide animation - DISABLED: replaced by projectActivate animation for smoother transitions */
    /* .project-item.active {
      animation: slideInActive 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    } */

    @keyframes slideInActive {
      0% {
        transform: translateX(-20px);
        opacity: 0.7;
      }
      50% {
        transform: translateX(5px);
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* Slide out animation for projects being moved */
    .project-item.sliding-out {
      animation: slideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes slideOut {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      100% {
        transform: translateX(-100%);
        opacity: 0;
      }
    }

    /* Slide in animation for projects being repositioned */
    .project-item.sliding-in {
      animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes slideIn {
      0% {
        transform: translateX(100%);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .project-actions-menu-container {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .project-actions-menu-container.active {
      z-index: 100;
    }

    .project-actions-toggle {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      font-size: 14px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      opacity: 0;
      letter-spacing: 0;
    }

    .project-actions-toggle:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.5);
      transform: scale(1.08);
      box-shadow:
        0 0 20px rgba(255, 255, 255, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.4);
    }

    .project-actions-toggle:active {
      transform: scale(0.95);
    }

    /* Hide toggle when menu is active */
    .project-actions-menu-container.active .project-actions-toggle {
      opacity: 0 !important;
      transform: scale(0.5);
      pointer-events: none;
    }

    .project-actions {
      position: absolute;
      right: 0;
      top: 50%;
      background: var(--tertiary-bg);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      padding: 2px 4px;
      display: none;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      min-width: auto;
      opacity: 0;
      transform: translateY(-50%) translateX(10px);
      transition: all 0.12s ease-out;
      pointer-events: none;
      z-index: 100;
    }

    .project-actions.expanded {
      display: flex;
      opacity: 1;
      transform: translateY(-50%) translateX(0);
      pointer-events: auto;
    }

    /* Desktop: instant hover response */
    @media (min-width: 769px) {
      .project-actions-toggle {
        opacity: 0;
        transition: opacity 0.08s ease, transform 0.1s ease;
      }
    }

    /* Mobile: hide toggle button and use mobile menu instead */
    @media (max-width: 768px) {
      .project-actions-menu-container {
        display: none;
      }
    }
    .project-mobile-menu {
      display: none;
      position: absolute;
      right: 36px; /* leave space for shared badge on the right */
      top: 50%;
      transform: translateY(-50%);
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      z-index: 6; /* above shared badge */
    }
    @media (max-width: 768px) {
      .project-actions { display: none; }
      .project-mobile-menu { display: flex; }
      .project-item:hover .project-actions { opacity: 0; }
      /* Mobile: maximize name space by pushing the kebab to the far right,
         and shifting the shared badge left so they don't collide. */
      .project-mobile-menu { right: 8px; }
      .project-item .project-shared-badge { right: 46px; }
    }

    .project-action-btn {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--text-secondary);
      cursor: pointer;
      padding: 5px;
      margin: 0;
      border-radius: 50%;
      font-size: 12px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .project-action-btn:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.5);
      transform: scale(1.08);
      box-shadow:
        0 0 20px rgba(255, 255, 255, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.4);
    }

    .project-action-btn:active {
      transform: scale(0.95);
    }

    .project-action-btn img {
      width: 12px;
      height: 12px;
      display: block;
      filter: brightness(1.08);
    }

    .project-action-btn:hover img {
      filter: brightness(1.2);
    }

    .project-action-btn.delete:hover { 
      color: var(--danger-color); 
    }

    .project-action-btn.share:hover { 
      color: var(--primary-color); 
    }

    /* Hide edit and delete buttons for viewer projects */
    .project-item[data-user-role="viewer"] .project-action-btn.edit,
    .project-item[data-user-role="viewer"] .project-action-btn.delete {
      display: none !important;
    }

    .project-shared-badge {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
      z-index: 5;
    }

    .project-shared-badge.showing {
      opacity: 1;
    }

    .project-shared-badge img {
      width: 14px;
      height: 14px;
      opacity: 0.6;
      filter: brightness(0.7) grayscale(0.3);
      transition: opacity 0.3s ease;
    }

    .project-item:hover .project-shared-badge {
      opacity: 0;
    }

    /* Invitation Status */
    .invitation-status {
      margin-top: 12px;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
    }

    .status-message.success {
      background: rgba(76, 175, 80, 0.1);
      color: #4caf50;
      border: 1px solid rgba(76, 175, 80, 0.3);
    }

    .status-message.error {
      background: rgba(244, 67, 54, 0.1);
      color: #f44336;
      border: 1px solid rgba(244, 67, 54, 0.3);
    }

    /* Pending Status Badge */
    .status-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-left: 8px;
    }

    .status-badge.pending {
      background: rgba(255, 193, 7, 0.1);
      color: #ff9800;
      border: 1px solid rgba(255, 193, 7, 0.3);
    }

    /* Cancel Invitation Button */
    .cancel-invitation-btn {
      background: rgba(244, 67, 54, 0.1);
      color: #f44336;
      border: 1px solid rgba(244, 67, 54, 0.3);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .cancel-invitation-btn:hover {
      background: rgba(244, 67, 54, 0.2);
      border-color: rgba(244, 67, 54, 0.5);
    }

    /* ================= PROJECT CONTEXT MENU — slim list ================= */

    .project-context-menu {
      position: fixed;
      z-index: 1000001; /* above overlays/panels */
      background: rgba(20, 23, 28, 0.96);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 10px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
      padding: 4px;
      min-width: 168px;
      opacity: 0;
      transform: translateY(-6px) scale(0.98);
      transition: opacity 0.16s ease, transform 0.16s ease;
      pointer-events: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Placeholder (generation) context menu – keep above overlays on mobile */
    .placeholder-context-menu {
      position: fixed;
      z-index: 1000001;
      background: rgba(20, 24, 33, 0.97);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }
    /* iOS Safari: ensure compositing above blur layers */
    @supports (-webkit-touch-callout: none) {
      .project-context-menu { transform: translateZ(0); }
    }

    .project-context-menu.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .project-context-menu::before { content: none; }

    .context-menu-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 10px;
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.82);
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease;
      position: relative;
      background: transparent;
      border: none;
      width: 100%;
      justify-content: flex-start;
      white-space: nowrap;
    }

    .context-menu-item::before { content: none; }

    .context-menu-item:hover {
      background: rgba(255, 255, 255, 0.06);
      color: #ffffff;
    }

    .context-menu-item:active {
      background: rgba(255, 255, 255, 0.09);
    }

    .context-menu-item.edit:hover {
      background: rgba(150, 195, 255, 0.10);
      color: #cfe0ff;
    }

    .context-menu-item.delete:hover {
      background: rgba(239, 68, 68, 0.12);
      color: #fca5a5;
    }

    .context-menu-icon {
      width: 14px;
      height: 14px;
      opacity: 0.7;
      transition: opacity 0.12s ease;
      flex-shrink: 0;
    }

    .context-menu-item:hover .context-menu-icon { opacity: 1; }

    /* Context menu animation keyframes */
    @keyframes contextMenuSlideIn {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes contextMenuSlideOut {
      from {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
      to {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
      }
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
      .project-context-menu {
        min-width: 156px;
        padding: 4px;
      }
      .context-menu-item {
        padding: 8px 10px;
        font-size: 12px;
        gap: 8px;
      }
      .context-menu-icon { width: 14px; height: 14px; }
    }

/* ================= HEADER.CSS - MAIN HEADER & USER PROFILE ================= */
    /* NOTE: .main-header styles are in topbar.css for maintainability */

    /* Menu toggle visuals/behavior moved to topbar.css (single source of truth). */

    /* Fix 2: Update header.css - Fix title font size */
    .main-header-title {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0;
      color: var(--text-primary);
      cursor: pointer;
      padding: 5px 16px;
      border-radius: 50px;
      transition: all 0.3s ease;
      margin: 0;
      min-height: auto;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
      max-width: fit-content;
  }
  
  /* Shiny glossy gradient effect on hover */
  .main-header-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.2) 50%, 
      transparent 100%);
    transition: left 0.5s ease;
    border-radius: 50px;
    z-index: 0;
  }
  
  .main-header-title:hover::before {
    left: 100%;
  }
  
  /* Ensure content is above shine effect */
  .main-header-title > * {
    position: relative;
    z-index: 1;
  }
  /* Hover effect for entire project section */
  .main-header-title:hover {
    background: linear-gradient(135deg, 
      rgba(245, 200, 120, 0.12) 0%, 
      rgba(255, 255, 255, 0.12) 50%,
      rgba(200, 200, 200, 0.08) 100%);
    border-color: rgba(245, 180, 80, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(245, 166, 35, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
  }
  .main-header-title h1 {
      font-size: 14px !important;
      font-weight: 600 !important;
      margin: 0 !important;
      padding: 0 !important;
      color: var(--text-primary) !important;
      letter-spacing: 0;
      line-height: 1.2 !important;
      max-width: 14ch;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: default;
      transition: color 0.2s ease, opacity 0.2s ease;
    }

    /* Hover effects for project name */
    .main-header-title h1:hover {
      opacity: 0.9;
    }
    
    /* Removed "Go to Project Chat" text - header title is no longer clickable */
    
    /* Remove any underline from header title */
    .main-header-title {
      text-decoration: none;
    }
    
    .main-header-title:hover {
      text-decoration: none;
    }
    
    .main-header-title h1 {
      text-decoration: none;
    }
    
    .main-header-title h1:hover {
      text-decoration: none;
    }

    @media (min-width: 1024px) {
      .main-header-title h1 {
        max-width: 25ch;             /* Allow longer project names on desktop */
      }
    }

    .main-header-title .project-thumb {
      width: 28px;
      height: 28px;
      aspect-ratio: 1 / 1;
      flex: 0 0 28px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      transform-origin: center;
      margin: 0;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Hover effects for project thumbnail */
    .main-header-title .project-thumb:hover {
      transform: scale(1.05);
      box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.35);
    }

    /* Formas Logo in Header */
    .main-header-title .formas-logo-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      margin-right: 8px;
      transition: opacity 0.2s ease;
    }

    .main-header-title .formas-logo-link:hover {
      opacity: 0.8;
    }

    .main-header-title .formas-logo {
      width: 24px;
      height: 24px;
      object-fit: contain;
      border: none;
      border-radius: 50%;
      background: rgba(128, 128, 128, 0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease;
    }

    .main-header-title .formas-logo:hover {
      background: rgba(128, 128, 128, 0.25);
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }


    /* User Profile */
    .user-profile {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--tertiary-bg) 0%, var(--secondary-bg) 100%);
      border: 2px solid var(--border-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
      overflow: hidden;
    }

    .user-profile:hover {
      border-color: rgba(245, 166, 35, 0.6);
      transform: scale(1.05);
      box-shadow: 0 4px 16px rgba(245, 166, 35, 0.2);
    }

    .user-initials {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .user-profile.has-image .user-initials {
      display: none;
    }

    .user-profile.has-image {
      background-size: cover;
      background-position: center;
    }

    



    /* Header dropdown visuals are owned by topbar.css (single source of truth). */


    .tutorials-loading,
    .tutorials-empty {
      padding: 16px;
      text-align: center;
      color: var(--text-secondary);
      font-style: italic;
    }

    .tutorial-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      text-decoration: none;
      color: var(--text-primary);
      text-align: left;
    }

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

    .tutorial-item:hover {
      background: var(--hover-bg);
      padding-left: 20px;
    }

    .tutorial-item:active {
      background: rgba(255, 255, 255, 0.05);
    }

    .tutorial-number {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      opacity: 0.6;
      font-family: 'Roboto Mono', monospace;
      min-width: 24px;
      flex-shrink: 0;
    }

    .tutorial-name {
      font-weight: 400;
      font-size: 13px;
      color: var(--text-primary);
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .coming-soon-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 18px;
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      padding: 0 8px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.58);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .new-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 18px;
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      padding: 0 8px;
      background: rgba(178, 102, 70, 0.16);
      color: rgba(246, 202, 178, 0.96);
      border: 1px solid rgba(178, 102, 70, 0.34);
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      animation: none;
      box-shadow: none;
    }


    .with-icon img {
      vertical-align: middle;
      margin-left: 5px;
    }

    /* Sign In Button */

    /* ===================================
       UPGRADE MODAL (Insufficient Credits)
       =================================== */
    
    .upgrade-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000002; /* ⚠️ ESSENTIAL: Above sidebar (2001) and context menu (1000001) */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .upgrade-modal.active {
      opacity: 1;
      pointer-events: all;
    }

    .upgrade-modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .upgrade-modal-content {
      position: relative;
      background: rgba(28, 28, 30, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 48px 40px 40px;
      max-width: 700px;
      width: 90%;
      text-align: center;
      box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
    }

    @keyframes modalSlideIn {
      0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .upgrade-modal-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      background: linear-gradient(135deg, rgba(255, 200, 87, 0.2), rgba(255, 170, 0, 0.1));
      border: 2px solid rgba(255, 170, 0, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: iconPulse 2s ease-in-out infinite;
    }

    .upgrade-modal-icon svg {
      stroke: rgba(255, 200, 87, 0.9);
    }

    @keyframes iconPulse {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.4);
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 170, 0, 0);
      }
    }

    .upgrade-modal-title {
      font-size: 28px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
      margin: 0 0 16px;
      letter-spacing: -0.5px;
    }

    .upgrade-modal-message {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin: 0 0 28px;
      max-width: 380px;
      margin-left: auto;
      margin-right: auto;
    }

    .upgrade-modal-renewal-info {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 16px 20px;
      margin: 0 0 32px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .upgrade-modal-renewal-label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .upgrade-modal-renewal-date {
      font-size: 18px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 0.3px;
    }

    .upgrade-modal-button {
      position: relative;
      width: 100%;
      background: linear-gradient(135deg, 
        rgba(255, 200, 87, 0.95), 
        rgba(255, 170, 0, 0.85), 
        rgba(255, 145, 0, 0.9));
      color: #000;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50px;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      box-shadow: 
        0 4px 20px rgba(255, 170, 0, 0.5),
        0 2px 8px rgba(255, 200, 87, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
      transition: all 0.2s ease;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .upgrade-modal-button:hover {
      background: linear-gradient(135deg, 
        rgba(255, 215, 110, 1), 
        rgba(255, 185, 20, 0.95), 
        rgba(255, 160, 10, 1));
      box-shadow: 
        0 6px 30px rgba(255, 170, 0, 0.7),
        0 3px 12px rgba(255, 200, 87, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      transform: translateY(-2px) scale(1.02);
    }

    .upgrade-modal-button:active {
      transform: translateY(0) scale(0.98);
      box-shadow: 
        0 2px 10px rgba(255, 170, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 2px 3px rgba(0, 0, 0, 0.2);
    }

    .upgrade-modal-dismiss {
      width: 100%;
      background: transparent;
      color: rgba(255, 255, 255, 0.5);
      border: none;
      border-radius: 50px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .upgrade-modal-dismiss:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.05);
    }

    .upgrade-modal-dismiss:active {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.08);
    }

    .upgrade-modal-learn-more {
      display: block;
      width: 100%;
      text-align: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      padding: 8px 24px;
      margin-top: 8px;
      transition: all 0.2s ease;
      border-radius: 8px;
    }

    .upgrade-modal-learn-more:hover {
      color: rgba(255, 200, 87, 0.8);
      background: rgba(255, 200, 87, 0.05);
      text-decoration: none;
    }

    .upgrade-modal-learn-more:active {
      color: rgba(255, 200, 87, 1);
      background: rgba(255, 200, 87, 0.1);
    }

    /* ▒▒ Upgrade Modal - Plan Options (v3) ▒▒ */
    .upgrade-modal-plans {
      display: flex;
      gap: 8px;
      margin: 16px 0 8px;
      width: 100%;
    }

    .upgrade-plan-option {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 14px 8px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1.5px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: rgba(255, 255, 255, 0.7);
      font-family: inherit;
    }

    .upgrade-plan-option:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .upgrade-plan-option.selected {
      background: rgba(255, 200, 87, 0.08);
      border-color: rgba(255, 200, 87, 0.6);
      color: #fff;
    }

    .upgrade-plan-badge {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #000;
      background: rgb(255, 200, 87);
      padding: 2px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .upgrade-plan-name {
      font-size: 14px;
      font-weight: 600;
    }

    .upgrade-plan-credits {
      font-size: 11px;
      opacity: 0.6;
    }

    .upgrade-plan-price {
      font-size: 16px;
      font-weight: 700;
      color: rgba(255, 200, 87, 0.9);
    }

    .upgrade-plan-option.selected .upgrade-plan-price {
      color: rgb(255, 200, 87);
    }

    @media (max-width: 480px) {
      .upgrade-modal-content {
        padding: 32px 20px 28px;
      }

      .upgrade-modal-plans {
        flex-wrap: wrap;
      }

      .upgrade-plan-option {
        flex: 1 1 calc(50% - 4px); /* 2×2 grid */
      }

      .upgrade-modal-button {
        font-size: 14px;
        padding: 14px 20px;
      }
    }

    /* ▒▒ Buy Credits Modal Styles (Similar to Upgrade Modal) ▒▒ */
    .buy-credits-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000002;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .buy-credits-modal.active {
      opacity: 1;
      pointer-events: all;
    }

    .buy-credits-modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .buy-credits-modal-content {
      position: relative;
      background: rgba(28, 28, 30, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 48px 40px 40px;
      max-width: 700px;
      width: 90%;
      text-align: center;
      box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .buy-credits-modal-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      background: linear-gradient(135deg, rgba(255, 200, 87, 0.2), rgba(255, 170, 0, 0.1));
      border: 2px solid rgba(255, 170, 0, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: iconPulse 2s ease-in-out infinite;
    }

    .buy-credits-modal-icon svg {
      stroke: rgba(255, 200, 87, 0.9);
    }

    .buy-credits-modal-title {
      font-size: 28px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
      margin: 0 0 16px;
      letter-spacing: -0.5px;
    }

    .buy-credits-modal-message {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin: 0 0 28px;
      max-width: 380px;
      margin-left: auto;
      margin-right: auto;
    }

    .buy-credits-modal-button {
      position: relative;
      width: 100%;
      background: linear-gradient(135deg, 
        rgba(255, 200, 87, 0.95), 
        rgba(255, 170, 0, 0.85), 
        rgba(255, 145, 0, 0.9));
      color: #000;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50px;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      box-shadow: 
        0 4px 20px rgba(255, 170, 0, 0.5),
        0 2px 8px rgba(255, 200, 87, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
      transition: all 0.2s ease;
      margin-bottom: 12px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .buy-credits-modal-button:hover {
      background: linear-gradient(135deg, 
        rgba(255, 215, 110, 1), 
        rgba(255, 185, 20, 0.95), 
        rgba(255, 160, 10, 1));
      box-shadow: 
        0 6px 30px rgba(255, 170, 0, 0.7),
        0 3px 12px rgba(255, 200, 87, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      transform: translateY(-2px) scale(1.02);
    }

    .buy-credits-modal-button:active {
      transform: translateY(0) scale(0.98);
      box-shadow: 
        0 2px 10px rgba(255, 170, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 2px 3px rgba(0, 0, 0, 0.2);
    }

    .buy-credits-modal-dismiss {
      width: 100%;
      background: transparent;
      color: rgba(255, 255, 255, 0.5);
      border: none;
      border-radius: 50px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .buy-credits-modal-dismiss:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.05);
    }

    .buy-credits-modal-dismiss:active {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.08);
    }

    .buy-credits-modal-checkbox {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
      cursor: pointer;
      user-select: none;
    }

    .buy-credits-modal-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: rgba(255, 200, 87, 0.8);
    }

    .buy-credits-modal-checkbox span {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
      transition: color 0.2s ease;
    }

    .buy-credits-modal-checkbox:hover span {
      color: rgba(255, 255, 255, 0.7);
    }

    /* ▒▒ Credit Pack Selector (v3) ▒▒ */
    .credit-packs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 16px 0;
      width: 100%;
    }

    .credit-pack-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: rgba(255, 255, 255, 0.95);
    }

    .credit-pack-card:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .credit-pack-card.selected {
      border-color: rgba(245, 166, 35, 1);
      background: rgba(245, 166, 35, 0.08);
      box-shadow: 0 0 0 1px rgba(245, 166, 35, 1);
    }

    .pack-badge {
      position: absolute;
      top: -8px;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      background: rgba(245, 166, 35, 1);
      color: #000;
      padding: 2px 8px;
      border-radius: 10px;
    }

    .pack-credits {
      font-size: 1.4rem;
      font-weight: 700;
    }

    .pack-credits-label {
      font-size: 0.7rem;
      opacity: 0.6;
      margin-bottom: 8px;
    }

    .pack-price {
      font-size: 1rem;
      font-weight: 600;
      color: rgba(245, 166, 35, 1);
    }

    /* ▒▒ Black Friday Promo Modal ▒▒ */
    .blackfriday-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000004;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .blackfriday-modal.active {
      opacity: 1;
      pointer-events: all;
    }

    .blackfriday-modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .blackfriday-modal-content {
      position: relative;
      background: linear-gradient(145deg, 
        rgba(20, 20, 22, 0.98) 0%,
        rgba(15, 15, 18, 0.99) 100%);
      border: 2px solid;
      border-image: linear-gradient(135deg, 
        rgba(255, 200, 87, 0.6) 0%,
        rgba(255, 100, 100, 0.4) 50%,
        rgba(255, 200, 87, 0.6) 100%) 1;
      border-radius: 28px;
      padding: 50px 45px 45px;
      max-width: 750px;
      width: 90%;
      text-align: center;
      box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 200, 87, 0.15),
        0 0 100px rgba(255, 100, 100, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      animation: blackfridaySlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: visible;
    }

    @keyframes blackfridaySlideIn {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .blackfriday-modal-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.5px;
      padding: 6px 20px;
      border-radius: 20px;
      box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
      animation: badgePulse 2s ease-in-out infinite;
    }

    @keyframes badgePulse {
      0%, 100% { transform: translateX(-50%) scale(1); }
      50% { transform: translateX(-50%) scale(1.05); }
    }

    .blackfriday-modal-icon {
      width: 90px;
      height: 90px;
      margin: 10px auto 20px;
      background: linear-gradient(135deg, 
        rgba(255, 200, 87, 0.25) 0%,
        rgba(255, 170, 0, 0.15) 100%);
      border: 2px solid rgba(255, 200, 87, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: iconGlow 3s ease-in-out infinite;
    }

    @keyframes iconGlow {
      0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 200, 87, 0.3),
                    0 0 40px rgba(255, 200, 87, 0.1);
      }
      50% { 
        box-shadow: 0 0 30px rgba(255, 200, 87, 0.5),
                    0 0 60px rgba(255, 200, 87, 0.2);
      }
    }

    .blackfriday-modal-icon svg {
      stroke: rgba(255, 200, 87, 1);
      filter: drop-shadow(0 0 8px rgba(255, 200, 87, 0.5));
    }

    .blackfriday-modal-title {
      font-size: 26px;
      font-weight: 800;
      background: linear-gradient(135deg, #fff 0%, #ffc857 50%, #fff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0 0 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .blackfriday-flash {
      display: inline-block;
      animation: flashPulse 1.5s ease-in-out infinite;
    }

    @keyframes flashPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.9); }
    }

    .blackfriday-modal-subtitle {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.75);
      margin: 0 0 25px;
      font-weight: 500;
    }

    .blackfriday-modal-promo {
      background: linear-gradient(135deg, 
        rgba(255, 200, 87, 0.12) 0%,
        rgba(255, 170, 0, 0.08) 100%);
      border: 1px solid rgba(255, 200, 87, 0.25);
      border-radius: 18px;
      padding: 20px 25px;
      margin: 0 0 28px;
    }

    .blackfriday-modal-discount {
      display: inline-block;
      font-size: 36px;
      font-weight: 900;
      background: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #ffd700 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 2px;
      margin-bottom: 12px;
      text-shadow: 0 0 30px rgba(255, 200, 87, 0.3);
    }

    .blackfriday-modal-code-wrapper {
      margin-top: 8px;
    }

    .blackfriday-modal-code-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: block;
      margin-bottom: 8px;
    }

    .blackfriday-modal-code {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(0, 0, 0, 0.4);
      border: 1px dashed rgba(255, 200, 87, 0.5);
      border-radius: 10px;
      padding: 12px 18px;
      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
      font-size: 16px;
      font-weight: 700;
      color: #ffc857;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .blackfriday-modal-code:hover {
      background: rgba(255, 200, 87, 0.1);
      border-color: rgba(255, 200, 87, 0.7);
    }

    .blackfriday-copy-btn {
      background: rgba(255, 200, 87, 0.15);
      border: none;
      border-radius: 6px;
      padding: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .blackfriday-copy-btn:hover {
      background: rgba(255, 200, 87, 0.3);
    }

    .blackfriday-copy-btn svg {
      stroke: rgba(255, 200, 87, 0.8);
    }

    .blackfriday-copy-btn.copied svg {
      stroke: #4ade80;
    }

    .blackfriday-modal-button {
      position: relative;
      width: 100%;
      background: linear-gradient(135deg, 
        #ffc857 0%,
        #ff9500 50%,
        #ff6b00 100%);
      color: #000;
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 50px;
      padding: 18px 36px;
      font-size: 17px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: 
        0 6px 25px rgba(255, 170, 0, 0.5),
        0 3px 10px rgba(255, 200, 87, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 14px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .blackfriday-modal-button:hover {
      background: linear-gradient(135deg, 
        #ffe066 0%,
        #ffaa00 50%,
        #ff7700 100%);
      box-shadow: 
        0 8px 35px rgba(255, 170, 0, 0.65),
        0 4px 15px rgba(255, 200, 87, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      transform: translateY(-3px) scale(1.02);
    }

    .blackfriday-modal-button:active {
      transform: translateY(0) scale(0.98);
      box-shadow: 
        0 3px 12px rgba(255, 170, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .blackfriday-modal-dismiss {
      width: 100%;
      background: transparent;
      color: rgba(255, 255, 255, 0.45);
      border: none;
      border-radius: 50px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .blackfriday-modal-dismiss:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.05);
    }

    .blackfriday-modal-dismiss:active {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.08);
    }

    .blackfriday-modal-checkbox {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
      cursor: pointer;
      user-select: none;
    }

    .blackfriday-modal-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: rgba(255, 200, 87, 0.9);
    }

    .blackfriday-modal-checkbox span {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.45);
      transition: color 0.2s ease;
    }

    .blackfriday-modal-checkbox:hover span {
      color: rgba(255, 255, 255, 0.65);
    }

    /* Mobile responsive for Black Friday Modal */
    @media (max-width: 520px) {
      .blackfriday-modal-content {
        padding: 45px 25px 35px;
        border-radius: 22px;
      }

      .blackfriday-modal-title {
        font-size: 22px;
      }

      .blackfriday-modal-discount {
        font-size: 30px;
      }

      .blackfriday-modal-code {
        font-size: 13px;
        padding: 10px 14px;
      }

      .blackfriday-modal-button {
        padding: 16px 28px;
        font-size: 15px;
      }
    }

    /* Popup Blocker Modal */
    .popup-blocker-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000003;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .popup-blocker-modal.active {
      opacity: 1;
      pointer-events: all;
    }

    .popup-blocker-modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .popup-blocker-modal-content {
      position: relative;
      background: rgba(28, 28, 30, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 48px 40px 40px;
      max-width: 750px;
      width: 90%;
      text-align: center;
      box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
      transform: translateY(20px);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .popup-blocker-modal.active .popup-blocker-modal-content {
      transform: translateY(0);
    }

    .popup-blocker-modal-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      background: linear-gradient(135deg, rgba(255, 100, 100, 0.2), rgba(255, 50, 50, 0.1));
      border: 2px solid rgba(255, 100, 100, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: iconPulse 2s ease-in-out infinite;
    }

    .popup-blocker-modal-icon svg {
      stroke: rgba(255, 100, 100, 0.9);
    }

    .popup-blocker-modal-title {
      font-size: 28px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
      margin: 0 0 16px;
      letter-spacing: -0.5px;
    }

    .popup-blocker-modal-message {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin: 0 0 24px;
    }

    .popup-blocker-modal-steps {
      text-align: left;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 20px;
      margin: 0 0 28px;
    }

    .popup-blocker-modal-steps p {
      margin: 0 0 12px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
    }

    .popup-blocker-modal-steps ol {
      margin: 0;
      padding-left: 20px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      line-height: 1.8;
    }

    .popup-blocker-modal-steps li {
      margin-bottom: 8px;
    }

    .popup-blocker-modal-button {
      width: 100%;
      background: linear-gradient(135deg, rgba(255, 200, 87, 0.95), rgba(255, 170, 0, 0.85));
      color: #000;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50px;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .popup-blocker-modal-button:hover {
      background: linear-gradient(135deg, rgba(255, 215, 110, 1), rgba(255, 185, 20, 0.95));
      transform: translateY(-2px);
    }

    .popup-blocker-modal-button:active {
      transform: translateY(0);
    }

    .popup-blocker-modal-checkbox {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
      cursor: pointer;
      user-select: none;
    }

    .popup-blocker-modal-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: rgba(255, 200, 87, 0.8);
    }

    .popup-blocker-modal-checkbox span {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
      transition: color 0.2s ease;
    }

    .popup-blocker-modal-checkbox:hover span {
      color: rgba(255, 255, 255, 0.7);
    }


    /* Panel toggle arrow visuals are owned by topbar.css (single source of truth). */


    .panel-resize-handle:hover {
      background: rgba(255, 255, 255, 0.5);
      width: 6px;
    }

    .panel-resize-handle:active {
      background: rgba(255, 255, 255, 0.7);
    }

    .panel-resize-handle {
      position: absolute;
      top: 50%;
      left: -5px;
      transform: translateY(-50%);
      width: 5px;
      height: 80px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px 0 0 3px;
      display: none;
      cursor: ew-resize;
      z-index: 1000;
      transition: all 0.2s ease;
    }




    /* ================= CHAT.CSS - CHAT MESSAGES & CONVERSATION ================= */

    /* Chat Container */
    .chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--primary-bg);
      overflow: hidden;
      position: relative;
    }

    /* Chat Messages Area — layout defined in chat.css (column-reverse).
       Do NOT set flex-direction or padding here; chat.css is the source of truth. */

    /* .chat-messages.loading defined in chat.css */

    #chatTopSentinel {
      height: 1px;
    }

    .chat-top-loader {
      position: sticky;
      top: 0;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to bottom, rgba(10,10,10,0.9), rgba(10,10,10,0));
      z-index: 5;
    }

    .chat-top-loader.hidden {
      display: none;
    }

    .chat-top-loader .spinner {
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: chat-spin 1s linear infinite;
    }

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

    /* .chat-messages.drag-over defined in chat.css */


.chat-date-bubble {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10; /* This line is new */
}
    .chat-date-bubble.show {
      opacity: 1;
    }

    

    /* Long message collapse / expand */
    .msg-ellipsis {
      opacity: 0.45;
    }
    .msg-expand-toggle {
      display: block;
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      font-size: 11px;
      font-weight: 600;
      font-family: system-ui, -apple-system, sans-serif;
      letter-spacing: 0.3px;
      cursor: pointer;
      padding: 4px 0 0;
      text-align: right;
      transition: color 0.15s ease;
    }
    .msg-expand-toggle:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Module Messages */
    .message.module {
      display: flex;
      justify-content: center;
      width: 100%;
      max-width: none;
    }

    .message.module .message-content {
      background: var(--secondary-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      padding: 16px;
      width: 100%;
      max-width: 800px;
      position: relative;
      overflow: hidden;
    }

    /* Module Header */
    .module-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .module-icon {
      width: 40px;
      height: 40px;
      background: var(--tertiary-bg);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .module-info {
      flex: 1;
    }

    .module-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .module-description {
      font-size: 13px;
      color: var(--text-secondary);
      font-weight: 400;
    }

    .module-badge {
      background: var(--button-secondary);
      color: var(--text-primary);
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 400;
      border: 1px solid var(--border-color);
    }

    .module-minimize {
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      width: 28px;
      height: 28px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .module-minimize:hover {
      background: var(--hover-subtle);
      color: var(--text-primary);
    }

    /* Module Interface */
    .module-interface {
      background: var(--primary-bg);
      border-radius: 8px;
      padding: 20px;
      border: 1px solid var(--border-subtle);
    }

    .module-interface.drag-over {
      background: var(--hover-subtle);
      border: 1px dashed var(--border-color);
      transition: background 0.15s, border 0.15s;
    }

    /* Canvas Interface */
    .canvas-interface {
      text-align: center;
      padding: 40px 20px;
    }

    .canvas-interface h3 {
      color: var(--text-primary);
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 500;
    }

    .canvas-controls {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .canvas-btn {
      background: var(--button-secondary);
      color: var(--button-secondary-text);
      border: 1px solid var(--border-color);
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 400;
      transition: all 0.15s ease;
    }

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

    /* Interior Interface */
    .interior-interface {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .interior-section h4 {
      color: var(--text-primary);
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 500;
    }

    .interior-option {
      background: var(--tertiary-bg);
      padding: 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      border: 1px solid var(--border-subtle);
      font-size: 13px;
      color: var(--text-primary);
    }

    .interior-option:hover {
      background: var(--hover-subtle);
      border-color: var(--border-color);
    }


    /* Message Images */
    .message img {
      max-width: 100%;
      border-radius: 6px;
      margin-top: 4px;
      cursor: pointer;
      transition: opacity 0.15s ease;
    }

    .message video {
      width: 100%;
      border-radius: 6px;
      margin-top: 4px;
    }

    /* User images now follow unified wrapper sizing */

    .message.user video {
      width: 100%;
      height: auto;
      border-radius: 20px;
      object-fit: cover;
    }

    .message img:hover {
      opacity: 0.9;
    }

    .chat-model-wrapper {
      position: relative;
      display: inline-block;
      margin-bottom: 0;
      border-radius: 6px;
      overflow: hidden;
    }

    .message.assistant .chat-model-wrapper {
      max-width: 600px; /* SAME MAXIMUM WIDTH as other images */
      width: auto; /* Allow natural width up to max-width */
      height: auto; /* Allow natural height */
      min-height: 307px; /* Minimum height for 3D viewer */
      background: var(--secondary-bg);
      aspect-ratio: 1 / 1; /* Keep square aspect for 3D models */
    }

    /* Large screen adjustments for 3D models */
    @media (min-width: 1024px) {
      .message.assistant .chat-model-wrapper {
        max-width: 800px; /* SAME MAXIMUM WIDTH as large screen images */
        min-height: 400px; /* Larger minimum height on big screens */
      }
    }

    /* Mobile adjustments for 3D models */
    @media (max-width: 768px) {
      .message.assistant .chat-model-wrapper {
        max-width: 400px; /* SAME MAXIMUM WIDTH as mobile images */
        min-height: 200px;
      }
    }

    .chat-model-container {
      position: relative;
      width: 100%;
      height: auto;
      /* Ensure the container doesn't exceed the wrapper bounds */
      max-width: 100%;
      /* Ensure proper positioning context for retry button */
      min-height: 200px;
    }

    .chat-model-thumb {
      width: 100%;
      height: 100%;
      object-fit: contain; /* was 'cover' in Option 2 */
      display: block;
      cursor: pointer;
    }


    .chat-model-container canvas,
    .chat-model-container model-viewer {
      width: 100% !important;
      height: auto !important;
      max-width: 100% !important;
      display: block;
      pointer-events: none;
      /* Ensure the canvas respects the container bounds */
      object-fit: contain;
    }

    .chat-model-overlay {
      position: absolute;
      inset: 0;
      cursor: pointer;
    }

    /* Ensure 3D models have the same responsive behavior as images */
    .chat-model-wrapper {
      /* Keep the proper sizing from chat.css - don't override with 100% */
      /* The sizing is controlled by the specific .message.assistant .chat-model-wrapper rules */
    }

    /* Force canvas elements to respect container bounds */
    .chat-model-container canvas[style*="width: 800px"],
    .chat-model-container canvas[style*="height: 800px"] {
      width: 100% !important;
      height: auto !important;
      max-width: 100% !important;
    }

    .message.assistant .chat-img-wrapper {
      position: relative;
      display: block;
      width: 100%;
      margin-bottom: 0;
      border-radius: 8px;
      overflow: hidden;
      transition: width 0.3s ease, height 0.3s ease;
    }

    .message.assistant .chat-img-wrapper:hover::before,
    .message.assistant .chat-model-wrapper:hover::before,
    .message.user .chat-img-wrapper:hover::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      border-radius: inherit;
      pointer-events: none;
    }

    .message.user:not(.multi-image) .chat-img-wrapper {
      border-radius: 20px;
      margin-left: auto;
      margin-bottom: 8px;
      display: block;
      width: 160px;
      height: 160px;
      aspect-ratio: 1 / 1;
      align-self: flex-end;
      overflow: hidden;
      position: relative;
    }

    /* Multi-image user message grid/layout lives in chat.css as the single source of truth. */


 .message-text.cursor::after {
  content: '_';
  display: inline-block;
}

.message-text.typing::after {
  animation: blinkCursor 0.6s steps(2, start) infinite;
}

/* combined.css */

/* Find this existing rule */
.message-text.collapsible {
  display: block;
  overflow: hidden;
  padding-right: 20px;
  /* Match container clipping to avoid spillover during animation */
  will-change: max-height;
  /* Transition both the text and the bubble smoothly */
  transition: max-height 0.28s ease, padding-top 0.28s ease, padding-bottom 0.28s ease, margin-top 0.28s ease;
  position: relative;
}

/* Add this new rule below it */
.message-text.collapsible:not(.expanded) {
  /* When collapsed, remove vertical padding and margin to prevent extra space */
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  /* Fallback clamp so collapse works even before JS sets max-height */
  max-height: 7.5em; /* ~5 lines at 1.5 line-height */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.message-text.collapsible:not(.expanded)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--message-bg, #373737));
  z-index: 1;
}

.message-text.collapsible.expanded {
  overflow: hidden; /* keep within bubble while max-height animates */
}

.message-collapse-toggle {
  position: absolute;
  bottom: 6px; /* slightly above corner radius */
  right: 8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%; /* circular button */
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(6px);
}

.message-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}

.message-collapse-toggle svg {
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,0.9);
  transition: transform 0.25s ease;
}

.message-collapse-toggle.expanded svg {
  transform: rotate(180deg); /* down arrow flips upward when expanded */
}
/* === END COLLAPSIBLE TEXT STYLES === */

/* Enhanced lazy-load wrapper with proper aspect ratio handling */
.chat-img-wrapper.lazy-load {
  background: var(--secondary-bg);
  /* Remove fixed 1:1 aspect ratio - let it be determined by content or inline styles */
}
    .chat-img-wrapper.lazy-load img,
    .chat-img-wrapper.lazy-load video {
      opacity: 0;
      transform: scale(0.98);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .chat-img-wrapper.lazy-load.loaded {
      /* Keep aspect ratio consistent - don't change it on load */
      background: transparent; /* Remove loading background */
    }

    .chat-img-wrapper.lazy-load.loaded img,
    .chat-img-wrapper.lazy-load.loaded video {
      opacity: 1;
      transform: scale(1);
    }

    .chat-img-wrapper.lazy-load .spinner-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .chat-img-wrapper.lazy-load.loaded .spinner-ring {
      opacity: 0;
    }

    .message.assistant .chat-img-wrapper {
      width: 100%;
    }

    .message.assistant .chat-img-wrapper.lazy-load {
      background: #373737;
    }

    /* Generation placeholder styles moved to placeholders.css */

    /* Ensure the image-generation-placeholder div doesn't expand beyond container */
    .image-generation-placeholder {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      z-index: 1;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }

    .message.assistant .chat-img-wrapper.lazy-load.loaded {
      aspect-ratio: auto;
      background: transparent;
      min-height: 0;
      height: auto;
    }

    /* Assistant images - large, responsive width */
    .message.assistant .chat-img-wrapper {
      max-width: 600px; /* MAXIMUM WIDTH - all images same maximum size */
      width: auto; /* Allow natural width up to max-width */
      height: auto;
      display: block;
    }

    /* User images - square format (already defined above) */

    /* Large screen adjustments - LARGER MAXIMUM WIDTH for assistant only */
    @media (min-width: 1024px) {
      .message.assistant .chat-img-wrapper {
        max-width: 800px; /* LARGER MAXIMUM WIDTH on desktop */
      }
    }

    /* Mobile adjustments - SMALLER MAXIMUM WIDTH for assistant only */
    @media (max-width: 768px) {
      .message.assistant .chat-img-wrapper {
        max-width: 400px; /* SMALLER MAXIMUM WIDTH on mobile */
      }
    }

    .message.assistant .chat-img-wrapper img,
    .message.assistant .chat-img-wrapper video {
      width: 100%;
      height: auto; /* Allow height to adjust based on aspect ratio */
      object-fit: contain; /* Preserve aspect ratio without cropping */
      position: relative;
      z-index: 1;
      display: block;
    }

    .message.user .chat-img-wrapper img,
    .message.user .chat-img-wrapper video {
      width: 100%;
      height: 100%; /* Fill the square container */
      object-fit: cover; /* Crop to fill the square */
      position: relative;
      z-index: 1;
      display: block;
    }

    /* Chat image placeholder styles moved to placeholders.css */

    /* Missing image placeholder */
    .chat-img-wrapper.error {
      width: 96px;
      height: 96px;
    }

    .dropped-prompt {
      font-style: italic;
      font-size: 0.85em;

    }


    /* AI Thinking Animation */
    .ai-thinking {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 400;
    }

    .thinking-dots {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .thinking-dot {
      width: 4px;
      height: 4px;
      background: var(--text-muted);
      border-radius: 50%;
      animation: thinking 1.4s infinite ease-in-out;
    }

    .thinking-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .thinking-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    .thinking-dots.inline {
      display: inline-flex;
      margin-left: 4px;
    }

    /* Drag Preview Styling */
    .drag-preview {
      display: flex;
      align-items: center;
      transform-origin: center;
    }

    .drag-preview .sidebar-item-icon {
      width: 18px;
      height: 18px;
      margin-right: 10px;
      margin-left: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .drag-preview .sidebar-item-text {
      flex: 1;
      font-size: 13px;
    }

    .drag-preview .sidebar-item-badge {
      background: var(--button-secondary);
      color: rgb(170, 170, 170);
      font-size: 9px;
      padding: 1px 4px;
      border-radius: 6px;
      font-weight: 400;
      margin-left: 14px;
      flex-shrink: 0;
    }




    /* ================= CHAT.CSS - ENHANCED MODULE STYLES ================= */

    /* Module Messages - Better spacing */
    .message.module {
      display: flex;
      justify-content: center;
      width: 100%;
      max-width: none;
      margin-bottom: 16px; /* Reduced from 24px */
    }

    .message.module .message-content {
      background: var(--secondary-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 26px;
      padding: 16px; /* Reduced from 24px */
      width: 100%;
      max-width: 900px; /* Increased from 800px */
      position: relative;
      overflow: hidden;
    }

    /* Enhanced Module Header */
    .module-header {
      display: flex;
      align-items: center;
      gap: 12px; /* Reduced gap */
      margin-bottom: 12px; /* Reduced margin */
      padding-bottom: 12px; /* Reduced padding */
      border-bottom: 1px solid var(--border-subtle);
    }

    .module-icon {
      width: 36px; /* Slightly smaller */
      height: 36px;
      background: var(--tertiary-bg);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

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

    .module-title {
      font-size: 15px; /* Slightly smaller */
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 2px; /* Reduced margin */
    }

    .module-description {
      font-size: 12px; /* Smaller description */
      color: var(--text-secondary);
      font-weight: 400;
    }

    .module-badge {
      background: var(--button-secondary);
      color: var(--text-primary);
      padding: 3px 6px; /* Smaller badge */
      border-radius: 10px;
      font-size: 10px;
      font-weight: 400;
      border: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    /* Enhanced Module Controls */
    .module-controls {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .module-control-btn {
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      width: 24px; /* Smaller buttons */
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .module-control-btn:hover {
      background: var(--hover-subtle);
      color: var(--text-primary);
      transform: scale(1.05);
    }

    .module-fullscreen:hover {
      background: var(--accent-color);
      color: white;
    }

    .module-fullscreen.active {
      background: var(--accent-color);
      color: white;
    }

    /* Keep existing module-minimize for backward compatibility */
    .module-minimize {
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      width: 24px; /* Match new controls */
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .module-minimize:hover {
      background: var(--hover-subtle);
      color: var(--text-primary);
    }

    /* Module Interface - Better spacing */
    .module-interface {
      background: var(--primary-bg);
      border-radius: 8px;
      padding: 8px; /* Reduced padding */
      border: 1px solid var(--border-subtle);
      min-height: 200px; /* Minimum height */
      max-height: 70vh; /* Prevent excessive height */
      overflow-y: auto;
    }

    .module-interface.drag-over {
      background: var(--hover-subtle);
      border: 1px dashed var(--border-color);
      transition: background 0.15s, border 0.15s;
    }

    /* Module Interface Variants - More compact */
    .canvas-interface,
    .interior-interface {
      text-align: center;
      padding: 16px; /* Reduced padding */
    }

    .canvas-interface h3 {
      color: var(--text-primary);
      margin-bottom: 12px; /* Reduced margin */
      font-size: 14px; /* Smaller heading */
      font-weight: 500;
    }

    .canvas-controls {
      display: flex;
      gap: 8px; /* Reduced gap */
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 12px; /* Reduced margin */
    }

    .canvas-btn {
      background: var(--button-secondary);
      color: var(--button-secondary-text);
      border: 1px solid var(--border-color);
      padding: 6px 12px; /* Smaller buttons */
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px; /* Smaller font */
      font-weight: 400;
      transition: all 0.15s ease;
    }

    .canvas-btn:hover {
      background: var(--hover-bg);
      transform: translateY(-1px);
    }

    /* Interior Interface - Grid layout */
    .interior-interface {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px; /* Reduced gap */
      padding: 12px;
    }

    .interior-section h4 {
      color: var(--text-primary);
      margin-bottom: 8px; /* Reduced margin */
      font-size: 13px; /* Smaller heading */
      font-weight: 500;
    }

    .interior-option {
      background: var(--tertiary-bg);
      padding: 8px 10px; /* Smaller padding */
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      border: 1px solid var(--border-subtle);
      font-size: 12px; /* Smaller font */
      color: var(--text-primary);
      margin-bottom: 6px; /* Added margin between options */
    }

    .interior-option:hover {
      background: var(--hover-subtle);
      border-color: var(--border-color);
      transform: translateY(-1px);
    }


    /* Module fullscreen active state */
    .module-fullscreen-active {
      opacity: 0.5;
      pointer-events: none;
    }

    .module-fullscreen-active .message-content {
      border-color: rgba(245, 166, 35, 0.5);
      box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.15);
    }
    /* ================= INPUT.CSS - MESSAGE INPUT & FILE UPLOAD ================= */

    /* Input Section Container */
    .input-section {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      /* No backdrop-filter on parent - let the pill handle its own blur */
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(0, 0, 0, 0);
      border-top: 1px solid transparent;
      z-index: 2400;
      padding: 20px;
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      overflow: visible; /* Ensure dropdown can appear above container */
      /* Smooth transitions for blur and background */
      transition: backdrop-filter 0.4s ease, 
                  -webkit-backdrop-filter 0.4s ease,
                  background 0.4s ease,
                  border-top-color 0.4s ease,
                  opacity 0.5s ease 0.5s; /* 0.5s fade-in after 0.5s delay */
      /* Allow clicks to pass through empty areas of the bar */
      pointer-events: none;
      /* Start hidden */
      opacity: 0;
      /* Prevent layout shift by keeping space */
      visibility: hidden;
      animation: fadeInPromptBar 0.5s ease 0.5s forwards; /* 0.5s delay, then 0.5s fade-in */
  }
  
  /* Keyframe animation for fade-in with delay */
  @keyframes fadeInPromptBar {
    0% {
      opacity: 0;
      visibility: hidden;
    }
    1% {
      visibility: visible;
    }
    100% {
      opacity: 1;
      visibility: visible;
    }
  }
  
  /* Focused state - frosted band appears */
  .input-section:focus-within {
      backdrop-filter: blur(34px) saturate(140%);
      -webkit-backdrop-filter: blur(34px) saturate(140%);
      background: rgba(10, 12, 18, 0.32);
      border-top: 1px solid var(--border-subtle);
  }
  
  .input-container {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      /* Keep pointer-events off — only the visible pill should capture clicks */
      pointer-events: none;
  }
  
    /* Image Input */
  .image-input-container {
      margin-bottom: 0;
      pointer-events: auto;
    }

    /* Only add spacing when the container actually has visible thumbnails */
    .image-input-container.image-selected {
      margin-bottom: 8px;
      transition: margin-bottom 250ms ease;
    }
    .input-section:focus-within .image-input-container.image-selected {
      margin-bottom: 16px;
      transition: margin-bottom 250ms ease;
    }

    .file-input {
      display: none;
  }
  .file-input-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      background: var(--secondary-bg);
      border: 1px dashed var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      font-size: 13px;
      color: var(--text-secondary);
      font-weight: 400;
    }

    .file-input-button:hover {
      border-color: var(--text-muted);
      background: var(--hover-subtle);
      color: var(--text-primary);
    }

    .file-input-button.has-image {
      background: var(--button-secondary);
      border-color: var(--border-color);
      color: var(--text-primary);
    }

    /* Image Preview */
    .image-preview {
      display: none;
      position: relative;
      margin-bottom: 16px;
      pointer-events: auto;
    }

    .image-preview img {
      max-width: 200px;
      max-height: 150px;
      border-radius: 8px;
      cursor: pointer;
    }

    .clear-image-btn {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 20px;
      height: 20px;
      background: var(--danger-color);
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
    font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .clear-image-btn:hover {
      background: #cc2222;
      transform: scale(1.1);
    }

    /* Message Input Container */
    .message-input-container {
      display: flex;
      gap: 8px;
      align-items: center;
      /* Glass blur effect - matching freeform toolbar pills */
      background: rgba(5, 5, 5, 0.75);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 322px;
      padding: 8px;
      position: relative;
      box-shadow: 0 0 8px rgba(100, 100, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.35);
      transition: background 0.3s ease, border-color 0.3s ease;
      /* Force GPU compositing for blur */
      transform: translateZ(0);
      isolation: isolate;
      /* Re-enable interactions on the actual visible prompt pill */
      pointer-events: auto;
    }

    /* Character counter — only visible when approaching limit */
    .char-counter {
      display: none;
      position: absolute;
      bottom: -18px;
      right: 12px;
      font-size: 10px;
      font-family: system-ui, -apple-system, sans-serif;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: rgba(255, 255, 255, 0.4);
      pointer-events: none;
      transition: color 0.2s ease, opacity 0.2s ease;
      z-index: 1;
    }
    .char-counter.visible {
      display: block;
    }
    .char-counter.warning {
      color: rgba(255, 180, 60, 0.8);
    }
    .char-counter.critical {
      color: rgba(255, 90, 90, 0.9);
    }

    /* Context Mode Active State - Orange/yellow (Formas style) */
    .message-input-container.context-mode-active {
      background: rgba(255, 160, 0, 0.15); /* orange tint */
      border-color: rgba(255, 140, 0, 0.5);
      box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.15);
    }

    .message-input-container.context-mode-active .message-input {
      color: #FFB366; /* orange text */
    }

    /* Send button orange in context mode */
    .message-input-container.context-mode-active .send-button {
      background: rgba(255, 140, 0, 0.9);
      color: #1a0f00;
    }
    .message-input-container.context-mode-active .send-button:hover {
      background: rgba(255, 165, 50, 1);
      box-shadow: 0 0 6px rgba(255, 140, 0, 0.3);
    }

    /* Multimodal Agent Active State - Orange (same as context mode) */
    .message-input-container.multimodal-agent-active {
      background: rgba(255, 160, 0, 0.15); /* orange tint */
      border-color: rgba(255, 140, 0, 0.5);
      box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.15);
    }

    .message-input-container.multimodal-agent-active .message-input {
      color: #FFB366; /* brighter orange text cue */
    }

    /* Send button turns orange while in multimodal agent mode */
    .message-input-container.multimodal-agent-active .send-button {
      background: #FF8C00;
      color: #331a00;
    }
    .message-input-container.multimodal-agent-active .send-button:hover {
      background: #E67A00;
    }

    /* Send button icon styling */
    .send-button-icon {
      width: 22px;
      height: 22px;
      object-fit: contain;
    }

    /* Invert brain icon to black when in Context Mode */
    .send-button-icon.context-mode-icon {
      filter: invert(1) brightness(0);
      transition: filter 0.2s ease;
    }

    /* Ensure icon stays black on hover */
    .send-button.context-mode-icon-active:hover .send-button-icon {
      filter: invert(1) brightness(0);
    }

    /* Both Context Mode and Multimodal Agent Active - Solid Orange */
    .message-input-container.context-mode-active.multimodal-agent-active .send-button {
      background: rgba(255, 140, 0, 0.95);
      color: #1a0f00;
      position: relative;
    }

    .message-input-container.context-mode-active.multimodal-agent-active .send-button:hover {
      background: rgba(255, 165, 50, 1);
      box-shadow: 0 0 8px rgba(255, 140, 0, 0.4);
    }

    /* Message input placeholder styles moved to placeholders.css */

    /* Send Button - Default: Precise mode grey-white */
    /* 🎯 SAME SIZE as plus button for symmetry */
    .send-button {
      width: 48px;
      height: 48px;
      background: rgba(200, 200, 200, 0.9);
      border: none;
      border-radius: 50%;
      margin-right: -2px; /* 2px right for symmetric placement */
      color: #333;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      touch-action: manipulation;
      position: relative;
      overflow: visible;
      /* NO transition initially to prevent flash - JS adds transitions-enabled class */
      transition: none;
    }
    
    .send-button.transitions-enabled {
      transition: all 0.15s ease;
    }

    .send-button:hover {
      background: rgba(220, 220, 220, 0.95);
      transform: scale(1.05);
    }

    .send-button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }

    /* Blast Animation - Precise mode: grey */
    .send-button.blast::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200, 200, 200, 0.6) 0%, rgba(200, 200, 200, 0.3) 30%, transparent 70%);
      transform: translate(-50%, -50%) scale(0);
      animation: blastWave 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      pointer-events: none;
      z-index: -1;
    }

    /* Context Mode Blast - Orange */
    .message-input-container.context-mode-active .send-button.blast::after {
      background: radial-gradient(circle, rgba(255, 140, 0, 0.6) 0%, rgba(255, 140, 0, 0.3) 30%, rgba(255, 179, 102, 0.15) 50%, transparent 70%);
    }

    /* Multimodal Agent Blast - Orange */
    .message-input-container.multimodal-agent-active .send-button.blast::after {
      background: radial-gradient(circle, rgba(255, 140, 0, 0.6) 0%, rgba(255, 140, 0, 0.3) 30%, rgba(255, 179, 102, 0.15) 50%, transparent 70%);
    }

    /* ============================================
       HOVER-EXPAND PILL SEND BUTTON (Freeform / 3D Editor)
       Circle by default, morphs to pill on hover to show mode label
       Height FIXED at 48px, border-radius = 24px for perfect circles
       Uses fixed width values for smooth bidirectional animation
       ============================================ */
    
    /* Base state - circle with just arrow */
    .send-button.mode-pill-hover {
      /* FIXED height - never changes */
      height: 48px !important;
      width: 48px;
      padding: 0;
      /* CRITICAL: border-radius = height/2 for perfect circular shape */
      border-radius: 24px !important;
      overflow: hidden;
      transform: scale(1, 1);
      /* Collapse transition - gentle bounce back */
      transition: width 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
                  padding 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
                  transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
                  background 0.3s ease,
                  box-shadow 0.3s ease;
    }
    
    /* Hover state - expand to fixed pill width */
    .send-button.mode-pill-hover:hover {
      width: 105px;
      padding: 0 16px 0 14px;
      /* Subtle elastic: stretch X slightly, compress Y slightly */
      transform: scale(1.015, 0.985);
      /* Expand transition - snappier */
      transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                  padding 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                  transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                  background 0.3s ease,
                  box-shadow 0.3s ease;
    }
    
    /* Content container */
    .send-button .mode-pill-content {
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    
    /* Label - hidden by default, appears on hover */
    .send-button .mode-pill-label {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
      color: #333;
      width: 0;
      opacity: 0;
      overflow: hidden;
      transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity 0.25s ease,
                  color 0.3s ease;
    }
    
    .send-button.mode-pill-hover:hover .mode-pill-label {
      width: 50px;
      opacity: 1;
    }
    
    .send-button .mode-pill-arrow {
      font-size: 17px;
      flex-shrink: 0;
      transition: color 0.3s ease;
    }
    
    /* Precise mode - grey */
    .send-button.mode-pill-hover.mode-precise {
      background: rgba(200, 200, 200, 0.95);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .send-button.mode-pill-hover.mode-precise:hover {
      background: rgba(220, 220, 220, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    /* Context mode - PRO golden tones */
    .send-button.mode-pill-hover.mode-context {
      background: rgba(212, 175, 55, 0.95);  /* Metallic Gold */
      box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
    }
    
    .send-button.mode-pill-hover.mode-context .mode-pill-label {
      color: #333;
    }
    
    .send-button.mode-pill-hover.mode-context .mode-pill-arrow {
      color: #333;
    }
    
    .send-button.mode-pill-hover.mode-context:hover {
      background: rgba(218, 165, 32, 1);  /* Goldenrod */
      box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
    }

    /* Agent mode - cool blue tone */
    .send-button.mode-pill-hover.mode-agent {
      background: rgba(122, 167, 255, 0.95);
      box-shadow: 0 2px 8px rgba(74, 124, 255, 0.32);
      color: #0f1d44;
    }

    .send-button.mode-pill-hover.mode-agent .mode-pill-label,
    .send-button.mode-pill-hover.mode-agent .mode-pill-arrow {
      color: #0f1d44;
    }

    .send-button.mode-pill-hover.mode-agent:hover {
      background: rgba(136, 176, 255, 1);
      box-shadow: 0 4px 12px rgba(74, 124, 255, 0.45);
    }

    @keyframes blastWave {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.9;
      }
      15% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
      }
      35% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0.6;
      }
      60% {
        transform: translate(-50%, -50%) scale(4.5);
        opacity: 0.3;
      }
      85% {
        transform: translate(-50%, -50%) scale(6.5);
        opacity: 0.1;
      }
      100% {
        transform: translate(-50%, -50%) scale(8);
        opacity: 0;
      }
    }

    /* Error Messages */
    .error-message {
      display: none;
      color: var(--danger-color);
      font-size: 12px;
      margin-top: 8px;
      font-weight: 400;
    }

    /* Upload Progress */
    .upload-progress {
      display: none;
      height: 0;
      background: var(--border-color);
      border-radius: 1px;
      overflow: hidden;
      margin: 0;
    }

    .upload-progress-bar {
      height: 100%;
      background: var(--accent-color);
      width: 0%;
      transition: width 0.3s ease;
    }

    /* ── Prompt thumbnails ───────────────────────────────────── */
    :root {
        --thumb-size-expanded: 96px;
        --thumb-size-collapsed: 96px;
        --thumb-gap-expanded: 8px;
        --thumb-gap-collapsed: 8px;
        --thumb-offset-x-collapsed: 0px; /* Keep same horizontal position */
        --thumb-offset-y-collapsed: 0px;
    }

    .input-section {
        --thumb-size: var(--thumb-size-expanded);
        --thumb-gap: var(--thumb-gap-expanded);
        --thumb-offset-x: 0px;
        --thumb-offset-y: 0px;
        --thumb-border-radius: 10px;
        --thumb-opacity: 1;
    }

    .input-section[data-thumb-state="hidden"] .thumb-strip {
        display: none !important;
    }

    .input-section[data-thumb-state="collapsed"] {
        --thumb-size: var(--thumb-size-collapsed);
        --thumb-gap: var(--thumb-gap-collapsed);
        --thumb-offset-x: var(--thumb-offset-x-collapsed);
        --thumb-offset-y: var(--thumb-offset-y-collapsed);
        --thumb-border-radius: 10px;
        --thumb-opacity: 1;
    }

    .input-section[data-thumb-state="dragging"] {
        --thumb-offset-x: 0px;
        --thumb-offset-y: 0px;
        --thumb-opacity: 1;
    }

    .thumb-strip {
        display: flex;
        flex-wrap: wrap;
        gap: var(--thumb-gap);
        padding: 8px;
        margin-top: 0;
        border-radius: 16px;
        transform: translate(var(--thumb-offset-x), var(--thumb-offset-y));
        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                    gap 200ms ease,
                    opacity 180ms ease;
        position: relative;
        z-index: 1;
    }

    .thumb-strip[hidden] {
        display: none !important;
    }

    .thumb {
        position: relative;
        display: inline-flex;
        flex: 0 0 var(--thumb-size);
        width: var(--thumb-size);
        height: var(--thumb-size);
        border: 1px solid var(--border-color);
        border-radius: var(--thumb-border-radius);
        overflow: hidden;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        touch-action: none;
        opacity: var(--thumb-opacity);
        background: var(--secondary-bg, #101010);
        transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    height 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    border-radius 200ms ease,
                    opacity 200ms ease,
                    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 220ms ease;
    }

    .thumb:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }

    .thumb img,
    .thumb video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        -webkit-user-drag: none;
        user-select: none;
    }

    .thumb .thumb-order {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent-color, #4a9eff);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .thumb .remove {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--danger-color, #dc2626);
        color: #fff;
        font-size: 16px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999 !important;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.92);
        transition: opacity 160ms ease, transform 160ms ease,
                    box-shadow 160ms ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }

    .thumb .remove:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .thumb .remove:active {
        transform: scale(0.85);
    }

    .thumb.is-dragging {
        opacity: 0;
        cursor: grabbing;
        box-shadow: none;
    }

    .thumb-strip.is-reordering {
        /* Preserve the exact pre-drag layout, including wrapped 3/4-image rows. */
        flex-wrap: wrap;
        overflow: visible;
        transition: none !important;
    }

    .thumb-strip.is-reordering .thumb {
        transform: translate3d(
            var(--thumb-reorder-x, 0px),
            var(--thumb-reorder-y, 0px),
            0
        ) !important;
        transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 160ms ease !important;
        will-change: transform;
    }

    .thumb-strip.is-reordering .thumb.is-dragging {
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
        box-shadow: none !important;
    }

    .thumb-drag-overlay {
        opacity: 1 !important;
        cursor: grabbing;
        pointer-events: none !important;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        contain: layout paint style;
    }

    body.prompt-thumb-reordering,
    body.prompt-thumb-reordering * {
        cursor: grabbing !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .thumb.is-drop-target::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 2px solid var(--accent-color, #4a9eff);
        border-radius: inherit;
        pointer-events: none;
        box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
    }

    .thumb-strip.is-reordering .thumb.is-drop-target::after {
        opacity: 0;
    }

    .thumb .image-spinner-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1; /* Lower than remove button */
        transition: opacity 200ms ease;
        pointer-events: none; /* Don't block clicks */
    }

    .thumb .image-spinner-overlay .spinner-ring {
        width: 24px;
        height: 24px;
    }

    .thumb .image-spinner-overlay .spinner-ring::before {
        width: 24px;
        height: 24px;
    }

    .input-section[data-thumb-state="expanded"] .thumb {
        border-radius: 10px;
        opacity: 1;
    }

    .input-section[data-thumb-state="collapsed"] .thumb .thumb-order {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        visibility: visible;
    }

    .thumb:focus-within .remove,
    .thumb .remove:focus-visible,
    .thumb .remove:active {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }

    @media (hover: hover) {
        .input-section[data-thumb-state="expanded"] .thumb:hover {
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
            transform: translateY(-2px);
        }

        .input-section[data-thumb-state="collapsed"] .thumb:hover {
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
            transform: translateY(-2px);
            opacity: 1;
            z-index: auto;
        }

        .thumb:hover .remove {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1);
        }

        .thumb .remove:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 10px rgba(220, 38, 38, 0.4);
        }
    }

    @media (max-width: 768px) {
        .thumb {
            min-width: 44px;
            min-height: 44px;
            touch-action: none;
        }

        .thumb .remove {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1);
        }

        .input-section[data-thumb-state="collapsed"] {
            --thumb-offset-x: 0px; /* Keep same horizontal position on mobile too */
        }
    }
    /* ================= MODULES.CSS - DRAGGABLE MODULES & INTERACTIVE UI ================= */

    /* Module-specific drag and drop enhancements are already covered in sidebar.css and chat.css */
    /* This file can contain additional module-specific styling */

    /* Module Animation on Drop */
@keyframes moduleDropIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
    /* Add these styles to your existing dialogs.css */

    /* ================= MODULE FULLSCREEN OVERLAY ================= */

    /* Fullscreen Overlay for Modules */
    .module-fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.95);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
  }

    .module-fullscreen-overlay.active {
    opacity: 1;
      visibility: visible;
    }

    /* Fullscreen Container */
    .fullscreen-module-container {
      width: 95vw;
      height: 95vh;
      background: var(--secondary-bg);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--border-color);
    }

    /* Fullscreen Header */
    .fullscreen-module-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: var(--tertiary-bg);
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    .fullscreen-module-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .fullscreen-module-title .module-icon {
      width: 32px;
      height: 32px;
      font-size: 16px;
    }

    .fullscreen-module-controls {
      display: flex;
      gap: 8px;
    }

    .fullscreen-control-btn {
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      width: 32px;
      height: 32px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fullscreen-control-btn:hover {
      background: var(--hover-bg);
      color: var(--text-primary);
    }

    .exit-fullscreen-btn:hover {
      background: var(--danger-color);
      color: white;
    }

    .minimize-btn:hover {
      background: var(--accent-color);
      color: white;
    }

    /* Fullscreen Content */
    .fullscreen-module-content {
      flex: 1;
      padding: 10px;
      overflow: hidden;
      background: var(--primary-bg);
    }

    .fullscreen-module-content .module-interface {
      max-height: none; /* Remove height restriction in fullscreen */
      height: 100%;
      padding: 0;
      border: none;
      background: transparent;
    }

    .fullscreen-module-content .fullscreen-interface {
      max-height: none;
      height: 100%;
      overflow: hidden;
    }

    /* Mobile Responsive for Fullscreen */
    @media (max-width: 768px) {
      .fullscreen-module-container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
      }
      
      .fullscreen-module-header {
        padding: 12px 16px;
      }
      
      .fullscreen-module-title {
        font-size: 14px;
      }
      
      .fullscreen-module-title .module-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
      }
      
      .fullscreen-control-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }
    }/* ═══════════════════════════════════════════════════════════
       GENERATIONS PANEL - CAPSULE THUMBNAIL SYSTEM
       ═══════════════════════════════════════════════════════════
       
       Architecture:
       ├─ .generations-panel (fixed 220px width, slides in/out)
       ├─ .generations-list (scrollable container)
       └─ .generation-item (capsule container)
           └─ .capsule-images (wrapper)
               └─ .capsule-image (square thumbnail container)
                   └─ img/video (media, absolutely positioned)
       
       Key Principles:
       - Thumbnails are ALWAYS square (aspect-ratio: 1)
       - Panel width is FIXED (never changes, only slides)
       - Simplicity over complexity (minimal properties)
       - Cross-browser compatible (Chrome + Safari tested)
       ═══════════════════════════════════════════════════════════ */

    /* Panel Structure */
    .generations-panel {
      position: fixed;
      right: 0;
      top: 0;
      width: var(--capsule-panel-width);
      min-width: var(--capsule-panel-width);
      max-width: var(--capsule-panel-width);
      height: 100vh;
      background: rgba(18, 18, 20, 0.92);
      border-left: 1px solid rgba(255, 255, 255, 0.06);
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
      z-index: 150000 !important; /* Above topbar and dropdowns (up to 100000) */
      display: flex;
      flex-direction: column;
      box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
      pointer-events: auto !important;
      backdrop-filter: blur(20px) saturate(1.2);
      -webkit-backdrop-filter: blur(20px) saturate(1.2);
    }

    /* Tablet/mobile overlay mode: ensure the panel header (search + X) is NOT hidden under the top bar */
    body.capsule-panel-overlay .generations-panel {
      z-index: 150000 !important; /* Above everything including topbar and notifications */
    }

    /* Outside-tap backdrop (created by panelControls.js) */
    .generations-panel-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 10050; /* Below panel (10060), above header (10001) */
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .generations-panel-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    /* iPad/Tablet: Remove blur from backdrop entirely for better visibility */
    /* Use touch detection to cover ALL iPad sizes including iPad Pro */
    @media (hover: none) and (pointer: coarse) and (min-width: 768px) {
      .generations-panel-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important; /* No dark overlay on iPad - panel has its own background */
        pointer-events: none; /* CRITICAL: Must be none when hidden, only auto when .show is added */
      }
      
      /* Only capture taps when backdrop is shown (panel is open) */
      .generations-panel-backdrop.show {
        pointer-events: auto;
      }
      
      .generations-panel {
        backdrop-filter: blur(10px) saturate(1.1);
        -webkit-backdrop-filter: blur(10px) saturate(1.1);
      }
    }
    
    /* Mobile: Also remove blur for performance */
    @media (max-width: 767px) {
      .generations-panel-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.5);
      }
      
      .generations-panel {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
    }

    .generations-panel.open {
      transform: translateX(0);
    }

    /* Header + search UI is owned by topbar.css (single source of truth). */

    /* Content Area */
    .generations-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      min-height: 0;
      height: 100%;
      pointer-events: auto !important;
    }

    /* Scrollable List */
    .generations-list {
      flex: 1;
      position: relative;
      overflow-y: auto !important;
      overflow-x: hidden;
      padding: 2px;
      padding-bottom: 2px;
      height: auto;
      max-height: none;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: y proximity;
      scroll-padding-top: 10px;
      min-height: 0; /* Ensure flex child can shrink */
      scroll-padding-bottom: 2px;
      pointer-events: auto !important; /* Ensure scrolling works */
      cursor: default; /* avoid text cursor */
      touch-action: pan-y; /* Allow vertical scrolling on mobile */
      
      /* Force scrolling capability */
      contain: none !important;
      /* REMOVED: will-change: scroll-position - causes Chrome to defer rendering during scroll */
      min-height: 0 !important;
      flex-basis: 0 !important;
      flex-grow: 1 !important;
      
      /* Custom scrollbar - neutral colors */
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    }

    .generations-list::-webkit-scrollbar {
      width: 5px;
    }

    .generations-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .generations-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.12);
      border-radius: 4px;
      transition: background 0.2s ease;
    }

    .generations-list::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    /* Generation Items - Capsule Container */
    .generation-item {
      width: 100%;
      background: rgba(28, 28, 32, 0.7);
      border-radius: 1px;
      overflow: hidden;
      cursor: pointer !important;
      margin-bottom: 2px;
      border: 1px solid rgba(255, 255, 255, 0.055);
      transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                  box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                  border-color 0.25s ease;
      position: relative;
      transform-origin: center;
      scroll-snap-align: center;
      isolation: isolate;
      backface-visibility: hidden;
      pointer-events: auto !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    }

    /* Removed staggered animation delays - causes blinking on reload */

    /* Highlight effect for newly generated capsules - subtle neutral glow,
       plus a quick double "blink" to call attention to the fresh result. */
    .generation-item.newly-generated {
      animation: newGenerationGlow 2s ease-out, newGenerationBlink 0.85s ease-in-out;
    }

    /* Blinks the new capsule twice (dips at 20% and 60%) so it grabs attention. */
    @keyframes newGenerationBlink {
      0%   { opacity: 1; }
      20%  { opacity: 0.25; }
      40%  { opacity: 1; }
      60%  { opacity: 0.25; }
      80%  { opacity: 1; }
      100% { opacity: 1; }
    }

    @keyframes newGenerationGlow {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25), 0 4px 20px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.15);
      }
      40% {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.35);
        border-color: rgba(255, 255, 255, 0.1);
      }
      100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-color: rgba(255, 255, 255, 0.04);
      }
    }

    .generation-item:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.36);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .generation-item:hover .capsule-image {
      /* No scale transform - cleaner look */
    }

    .generation-item:active {
      transform: scale(0.998);
      transition: transform 0.1s ease;
    }

    .generation-item.loading {
      opacity: 0.7;
    }

    /* Selection States */
    .generation-item.selected {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(38, 38, 44, 0.9);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.35);
      transform: none;
      z-index: 2;
      position: relative;
    }

    .generation-item.dimmed {
      opacity: 1;
      transform: none;
      z-index: 1;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .generation-item.selected:hover {
      transform: translateY(-1px);
    }

    .generation-item:not(.selected) {
      z-index: 1;
    }

    /* Selection Indicator */
    .generation-item.selected::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 0 1px 1px 0;
      z-index: 1;
    }
    
    /* Keyboard focus ring for accessibility */
    .generation-item.selected:focus-visible,
    .generation-item.selected[data-keyboard-focus="true"] {
      outline: 2px solid rgba(255, 255, 255, 0.3);
      outline-offset: 2px;
    }

    /* ================= SKELETON PLACEHOLDERS ================= */
    /* Initial loading skeletons before capsules are fetched */

    .skeleton-placeholder {
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .skeleton-placeholder.fade-out {
      opacity: 0;
    }

    .skeleton-placeholder.generation-item {
      cursor: default !important;
      background: rgba(18, 19, 22, 0.88);
      border-color: rgba(255, 255, 255, 0.045);
      box-shadow: none;
    }

    .generations-list.is-initial-loading .skeleton-placeholder {
      pointer-events: none !important;
    }

    .skeleton-placeholder.is-loading-anchor {
      position: relative;
    }

    .skeleton-placeholder.generation-item:hover {
      transform: none;
      border-color: rgba(255, 255, 255, 0.045);
      box-shadow: none;
    }

    .skeleton-images {
      width: 100%;
      aspect-ratio: auto;
      position: relative;
      overflow: hidden;
      border-radius: 1px;
      padding: 0;
      box-sizing: border-box;
    }

    .skeleton-image {
      width: 100%;
      aspect-ratio: 1;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        rgba(39, 40, 44, 0.82);
      position: relative;
      overflow: hidden;
      border-radius: 1px;
    }

    .skeleton-placeholder .skeleton-image::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255, 255, 255, 0.025);
      pointer-events: none;
    }

    .skeleton-shimmer {
      display: none; /* Replaced by subtle pulse on .skeleton-image */
    }

    @keyframes skeletonPulse {
      0%, 100% {
        opacity: 0.4;
      }
      50% {
        opacity: 0.7;
      }
    }

    @keyframes skeletonFadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    /* Capsule Images Container */
    .capsule-images {
      display: block;
      width: 100%;
      position: relative;
      pointer-events: auto !important;
      border-radius: 1px;
      overflow: hidden;
    }

    /* Capsule Image - Square Thumbnail Container */
    .capsule-image {
      /* Layout */
      position: relative;
      display: block;
      width: 100%;
      overflow: hidden;
      
      /* Square aspect ratio enforcement */
      aspect-ratio: 1;
      
      /* Appearance */
      background: rgba(22, 22, 26, 0.8);
      
      /* Interaction */
      pointer-events: auto !important;
      cursor: pointer !important;
      
      /* Animation - smooth and subtle */
      transition: opacity 0.25s ease;
    }
    
    /* ========================================
       POINTCLOUD BINARY NOISE MASK EFFECT
       ======================================== */
    
    .capsule-image.pointcloud-capsule {
      isolation: isolate;
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.08), transparent 58%),
        linear-gradient(180deg, rgba(18,18,18,0.98), rgba(8,8,8,0.99));
      transition: transform 0.3s ease;
    }

    .capsule-image.pointcloud-capsule img {
      z-index: 0;
      filter: grayscale(1) saturate(0) contrast(1.08) brightness(0.96) !important;
    }

    .capsule-image.pointcloud-capsule.splat-capsule::before,
    .capsule-image.pointcloud-capsule.splat-capsule::after {
      content: none !important;
      background: none !important;
      filter: none !important;
    }

    /* Splat capsules: warm orange identity with a sharp center and soft Gaussian edges. */
    .capsule-image.splat-capsule {
      isolation: isolate;
      background: rgba(56, 31, 13, 0.62);
    }

    .capsule-image.splat-capsule::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      background:
        radial-gradient(ellipse at center, rgba(242, 132, 38, 0.44) 0%, rgba(242, 132, 38, 0.48) 48%, rgba(242, 132, 38, 0.54) 100%);
      mix-blend-mode: color;
      pointer-events: none;
    }

    .capsule-image.splat-capsule::after {
      content: '';
      position: absolute;
      inset: -12%;
      z-index: 1;
      border-radius: inherit;
      background-image:
        linear-gradient(rgba(242, 132, 38, 0.14), rgba(242, 132, 38, 0.14)),
        var(--splat-preview-image, linear-gradient(135deg, rgba(242, 132, 38, 0.24), rgba(20, 14, 11, 0.9)));
      background-size: cover;
      background-position: center;
      filter: blur(11px) saturate(1.2) contrast(1.04);
      opacity: 0.96;
      transform: scale(1.08);
      pointer-events: none;
      -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.64) 68%, #000 100%);
      mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.64) 68%, #000 100%);
    }

    .capsule-image.splat-capsule img {
      z-index: 0;
      filter: saturate(1.18) contrast(1.03) brightness(1.02);
    }
    
    /* Pointcloud particles container - 300x300 like placeholder, not clickable */
    .pointcloud-particles-container {
      position: relative;
      width: 300px !important;
      height: 300px !important;
      border-radius: 8px;
      overflow: hidden;
      cursor: default;
      pointer-events: none; /* Disable all interaction */
      transition: none; /* No transitions */
    }
    
    /* No hover effect on particles container */
    .pointcloud-particles-container:hover {
      transform: none;
    }
    
    /* Glassmorphic hover pill - HIDDEN until editor module is ready */
    .pointcloud-hover-pill {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 24px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 24px;
      color: rgba(255, 255, 255, 0.95);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.3px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0 !important; /* Force hidden */
      visibility: hidden; /* Extra safety */
      transition: opacity 0.3s ease, transform 0.3s ease;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      z-index: 10;
    }
    
    /* Hover pill stays hidden until editor module is available */
    .pointcloud-particles-container:hover .pointcloud-hover-pill {
      opacity: 0 !important;
      visibility: hidden;
      transform: translate(-50%, -50%) scale(1.05);
    }
    
    /* Pointcloud source image in chat - 300x300 like placeholder */
    .pointcloud-source-image {
      filter: url(#pointcloud-posterize);
      width: 300px !important;
      height: 300px !important;
      max-width: 300px;
      max-height: 300px;
      object-fit: cover; /* Crop to square if needed */
      border-radius: 8px;
      cursor: default; /* Not clickable */
      transition: transform 0.2s ease, filter 0.3s ease;
      display: block;
      pointer-events: none; /* Disable all interaction */
    }
    
    /* Pointcloud source video in chat - 300x300 like placeholder */
    .pointcloud-source-video {
      width: 300px !important;
      height: 300px !important;
      max-width: 300px;
      max-height: 300px;
      object-fit: cover; /* Crop to square if needed */
      border-radius: 8px;
      cursor: default; /* Not clickable */
      display: block;
      pointer-events: none; /* Disable all interaction */
      background: #000;
    }
    
    /* Pointcloud fallback text - shown when no valid URL */
    .pointcloud-fallback-text {
      width: 300px !important;
      height: 300px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.5);
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      text-align: center;
    }
    
    /* No hover effect on source image */
    .pointcloud-source-image:hover {
      transform: none;
      filter: url(#pointcloud-posterize);
    }

    /* Loading States */
    .capsule-image.loading {
      background: rgba(22, 22, 26, 0.8);
      position: relative;
      overflow: hidden;
    }

    /* Simplified loading state - no flashy shimmer animations */
    .capsule-image.loading::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
      );
      background-size: 200% 100%;
      animation: subtleShimmer 2s infinite ease-in-out;
      z-index: 1;
    }
    
    @keyframes subtleShimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    .capsule-image.loading::after {
      display: none;
    }

    /* Border Radius for Flush Design - precise square thumbnail stack */
    .capsule-image:first-child {
      border-radius: 1px 1px 0 0;
    }

    .capsule-image:last-child {
      border-radius: 0 0 1px 1px;
    }

    .capsule-image:only-child {
      border-radius: 1px;
    }

    /* Capsule Image - Media Elements */
    .capsule-image img,
    .capsule-image video {
      /* Positioning - Fill parent square container */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      /* Appearance */
      object-fit: cover;
      display: block;
      border-radius: inherit;
      
      /* Initial state - Hidden until loaded */
      opacity: 0;
      transform: scale(1.05);
      
      /* Animation */
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      backface-visibility: hidden;
      
      /* Interaction */
      cursor: pointer !important;
      pointer-events: auto !important;
    }
    
    /* Loaded state - class on img or on parent container */
    .capsule-image img.loaded,
    .capsule-image.loaded img,
    .capsule-image.loaded video {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }

    /* Hover Effects */
    /* Subtle hover overlay - no animation, just darken */
    .capsule-image::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.02);
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .generation-item:hover .capsule-image::after {
      opacity: 1;
    }

    /* Spinner */
    .image-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: opacity 0.35s ease, transform 0.35s ease;
      opacity: 1;
      width: 32px;
      height: 32px;
      background: transparent;
      border-radius: 50%;
    }

    .image-spinner .spinner-ring {
      width: 24px;
      height: 24px;
    }

    .image-spinner .spinner-ring::before {
      width: 24px;
      height: 24px;
    }

    .image-spinner .spinner-ring::after {
      width: 5px;
      height: 5px;
    }

    .image-spinner.error {
      color: var(--error-color);
    }

    .image-spinner .error-icon {
      font-size: 20px;
      opacity: 0.6;
    }

    .spinner-ring {
      width: 28px;
      height: 28px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .spinner-ring::before {
      content: '';
      position: absolute;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 60deg,
        rgba(255, 255, 255, 0.03) 120deg,
        rgba(255, 255, 255, 0.08) 180deg,
        rgba(255, 255, 255, 0.2) 270deg,
        rgba(255, 255, 255, 0.5) 330deg,
        rgba(255, 255, 255, 0.8) 360deg
      );
      mask: radial-gradient(transparent 55%, black 56%);
      -webkit-mask: radial-gradient(transparent 55%, black 56%);
      animation: elegantSpin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      filter: blur(0.3px);
    }

    /* Spinner overlay for thumbnails with preview images */
    .image-spinner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: 8px;
      z-index: 10;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .spinner-ring::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      box-shadow:
        0 0 8px rgba(255, 255, 255, 0.4),
        0 0 16px rgba(255, 255, 255, 0.2);
      animation: glowPulse 1.8s ease-in-out infinite;
    }

    .spinner-pulse {
      display: none; /* Replaced by the ::after glow */
    }

    /* Load More Indicator */
    .loading-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      margin: 8px 0;
      opacity: 0.8;
      transition: opacity 0.2s ease;
      border-radius: 12px;
      background: transparent;
    }

    .loading-indicator:hover {
      opacity: 1;
    }

    .load-more-spinner {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .loading-text {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
      letter-spacing: 0.3px;
      transition: color 0.2s ease;
    }

    .loading-indicator:hover .loading-text {
      color: rgba(255, 255, 255, 0.6);
    }

    .load-more-spinner .spinner-ring {
      width: 24px;
      height: 24px;
    }

    .load-more-spinner .spinner-ring::before {
      width: 24px;
      height: 24px;
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 120deg,
        rgba(255, 255, 255, 0.05) 180deg,
        rgba(255, 255, 255, 0.15) 270deg,
        rgba(255, 255, 255, 0.4) 330deg,
        rgba(255, 255, 255, 0.6) 360deg
      );
      mask: radial-gradient(transparent 52%, black 53%);
      -webkit-mask: radial-gradient(transparent 52%, black 53%);
    }

    .load-more-spinner .spinner-ring::after {
      width: 5px;
      height: 5px;
      box-shadow:
        0 0 6px rgba(255, 255, 255, 0.35),
        0 0 12px rgba(255, 255, 255, 0.18);
    }

    /* Initial Loading Indicator */
    .loading-indicator.initial-loading {
      width: auto;
      min-width: 0;
      max-width: none;
      aspect-ratio: 1 / 1;
      padding: 0;
      margin: 0;
      opacity: 1;
      position: absolute;
      top: 50%;
      left: 2px;
      right: 2px;
      z-index: 30;
      transform: translateY(-50%);
      pointer-events: none;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: visible;
    }

    .skeleton-placeholder.is-loading-anchor .loading-indicator.initial-loading {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      aspect-ratio: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: none;
    }

    .generation-loading-shell {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      min-height: 0;
      width: min(220px, calc(100% - 48px));
      max-width: calc(100% - 48px);
      padding: 0;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }

    .generation-loading-mark,
    .generation-loading-copy {
      position: relative;
      z-index: 1;
    }

    .generation-loading-mark {
      width: 30px;
      height: 30px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .generation-loading-mark .spinner-ring {
      width: 26px;
      height: 26px;
    }

    .generation-loading-mark .spinner-ring::before {
      width: 26px;
      height: 26px;
      background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.96) 0deg,
        rgba(255, 255, 255, 0.96) 270deg,
        rgba(255, 255, 255, 0.08) 270deg,
        rgba(255, 255, 255, 0.08) 360deg
      );
      mask: radial-gradient(transparent 58%, black 59%);
      -webkit-mask: radial-gradient(transparent 58%, black 59%);
      animation: generationCrownSpin 0.82s linear infinite;
      filter: none;
    }

    .generation-loading-mark .spinner-ring::after {
      display: none;
    }

    .generation-loading-copy {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .generation-loading-kicker {
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      color: rgba(255, 255, 255, 0.42);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .generation-loading-copy .loading-text {
      font-size: 14px;
      font-weight: 650;
      line-height: 1.22;
      color: rgba(255, 255, 255, 0.9);
      text-align: left;
      letter-spacing: 0;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: none;
      animation: none;
    }

    .generation-loading-copy .loading-subtext {
      font-size: 11px;
      line-height: 17px;
      color: rgba(255, 255, 255, 0.48);
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .loading-text {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
      text-align: center;
      animation: none;
    }

    @keyframes subtleTextFade {
      0%, 100% {
        opacity: 0.5;
      }
      50% {
        opacity: 0.8;
      }
    }

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

    /* Error States */
    .capsule-image.error {
      background: linear-gradient(135deg, 
        rgba(255, 107, 107, 0.08) 0%, 
        var(--tertiary-bg) 50%,
        rgba(255, 107, 107, 0.05) 100%
      );
      border: 1px dashed rgba(255, 107, 107, 0.3);
      position: relative;
    }

    .capsule-image.error::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 107, 107, 0.05) 50%,
        transparent 70%
      );
      animation: errorPulse 2s ease-in-out infinite;
    }

    /* Success State */
    .capsule-image.loaded {
      position: relative;
      overflow: hidden;
    }

    .capsule-image.loaded::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(74, 158, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(74, 158, 255, 0.1) 60%,
        transparent 70%
      );
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .generation-item:hover .capsule-image.loaded::after {
      opacity: 1;
      animation: successShimmer 1s ease-in-out;
    }

    /* ============================================
       VIDEO VERSION PILLS (Top Right Corner)
       Version buttons for video capsules (max 5)
       ============================================ */
    .capsule-video-versions {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 4px;
      z-index: 11;
      pointer-events: auto;
    }

    .capsule-video-version-pill {
      position: relative;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.7);
      color: rgba(255, 255, 255, 0.92);
      font-size: 9px;
      font-weight: 600;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }

    .capsule-video-version-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.7);
    }

    .capsule-video-version-pill.active {
      background: rgba(255, 255, 255, 0.95);
      color: rgba(10, 10, 12, 0.95);
      border-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    }

    .capsule-video-version-tooltip {
      position: absolute;
      top: -8px;
      right: 50%;
      transform: translate(50%, -100%) scale(0.98);
      background: rgba(20, 24, 33, 0.92);
      color: #e7ebf0;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 6px 8px;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.3;
      white-space: normal;
      min-width: 180px;
      max-width: 260px;
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
      transition: opacity 0.15s ease, transform 0.15s ease;
      z-index: 12;
    }

    .capsule-video-version-pill:hover .capsule-video-version-tooltip {
      opacity: 1;
      transform: translate(50%, -100%) scale(1);
    }

    .generation-item.has-video-versions .capsule-type-pill {
      top: 34px;
    }

    @media (max-width: 768px) {
      .capsule-video-versions {
        top: 8px;
        right: 8px;
      }
      .capsule-video-version-pill {
        width: 16px;
        height: 16px;
        font-size: 8px;
      }
      .generation-item.has-video-versions .capsule-type-pill {
        top: 30px;
      }
    }

    /* ============================================
       TYPE PILL BADGES (Top Right Corner)
       Beautiful glassy pills showing capsule type
       ============================================ */
    .capsule-type-pill {
      position: absolute;
      top: 6px;
      right: 6px;
      padding: 3px 7px;
      border-radius: 1px;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.2px;
      text-transform: uppercase;
      z-index: 10;
      pointer-events: none;
      backdrop-filter: blur(16px) saturate(150%);
      -webkit-backdrop-filter: blur(16px) saturate(150%);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      transition: opacity 0.2s ease, transform 0.2s ease;
      opacity: 0;
    }

    /* Show pill on hover for clean default look */
    .generation-item:hover .capsule-type-pill {
      opacity: 1;
    }

    /* Uniform dark blur pills */
    .capsule-type-pill.type-image,
    .capsule-type-pill.type-video,
    .capsule-type-pill.type-3dmodel,
    .capsule-type-pill.type-pointcloud,
    .capsule-type-pill.type-splat,
    .capsule-type-pill.type-panorama {
      background: rgba(0, 0, 0, 0.5);
      color: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .capsule-type-pill.type-panorama {
      background: rgba(20, 58, 82, 0.78);
      color: rgba(245, 252, 255, 0.96);
      border-color: rgba(154, 218, 255, 0.32);
      opacity: 1;
      box-shadow: 0 3px 10px rgba(15, 64, 96, 0.28);
    }

    .capsule-type-pill.type-splat {
      background: rgba(242, 132, 38, 0.78);
      color: rgba(32, 16, 4, 0.95);
      border-color: rgba(255, 205, 150, 0.58);
      opacity: 1;
      box-shadow: 0 3px 10px rgba(180, 83, 9, 0.3);
    }

    .capsule-type-pill.type-pointcloud {
      background: rgba(16, 16, 16, 0.78);
      color: rgba(245, 245, 245, 0.94);
      border-color: rgba(255, 255, 255, 0.22);
      letter-spacing: 0;
      opacity: 1;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.26);
    }

    .capsule-type-pill.type-hd {
      background: rgba(240, 164, 17, 0.85);
      color: rgba(18, 12, 0, 0.95);
      border: 1px solid rgba(255, 225, 165, 0.55);
      opacity: 1;
      box-shadow: 0 3px 10px rgba(186, 120, 0, 0.35);
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
      .capsule-type-pill {
        font-size: 8px;
        padding: 2px 6px;
        top: 4px;
        right: 4px;
        opacity: 1; /* Always show on mobile since no hover */
      }
    }

    /* ============================================
       POINTCLOUD & 3D MODEL FALLBACK / OVERLAYS
       Centered cube icon for placeholders
       ============================================ */
    
    /* Icon overlay that appears on loaded images */
    .pointcloud-icon-overlay,
    .model-icon-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 5;
      opacity: 0.8;
    }

    /* Fallback placeholder when no image is available */
    .pointcloud-fallback,
    .model-fallback {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #4a4a4a;
      border-radius: 8px;
      min-height: 200px;
    }

    .model-icon {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    .model-ext {
      margin-top: 12px;
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 1px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    /* Empty State */
    .generations-list .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
      color: var(--text-muted);
    height: 100%;
      animation: fadeIn 0.5s ease;
    }

    .empty-state .emoji {
      font-size: 32px;
      margin-bottom: 16px;
      animation: bounce 2s ease-in-out infinite;
    }

    /* Tooltip */
    .capsule-tooltip {
      position: fixed !important;
      background: var(--tooltip-bg) !important;
      border: 1px solid var(--tooltip-border) !important;
      border-radius: 8px !important;
      padding: 12px !important;
      color: var(--text-primary) !important;
      font-size: 12px !important;
      z-index: 10000 !important;
      max-width: 280px !important;
      display: none !important;
      opacity: 0 !important;
      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      pointer-events: none !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05) !important;
      backdrop-filter: blur(10px) !important;
    }/* ================= DIALOGS.CSS - MODALS, OVERLAYS & TOOLTIPS ================= */

    /* Dialog Overlay */
    .dialogOverlay {
      position: fixed;
    top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .dialogOverlay.active {
      display: flex;
    }

    /* Dialog Modal */
    .dialogModal {
      background: var(--secondary-bg);
      border-radius: 12px;
      padding: 24px;
      max-width: 400px;
      width: 90%;
      position: relative;
      color: var(--text-primary);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      animation: dialogSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Dialog Buttons */
    .closeDialogButton, 
    .dialogBackButton {
      background: var(--accent-color);
      border: none;
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .closeDialogButton:hover,
    .dialogBackButton:hover {
      background: #3b82f6;
      transform: translateY(-1px);
    }

    .closeDialogButton {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    /* Dialog Content */
    .dialogIconContainer {
      text-align: center;
      margin-bottom: 16px;
    }

    .dialogIcon {
      width: 40px;
      height: 40px;
    }

    .troubleLink {
      color: var(--accent-color);
      font-size: 12px;
      text-decoration: underline;
      transition: color 0.2s ease;
    }

    .troubleLink:hover {
      color: #3b82f6;
    }

    /* Fullscreen Overlay */
    .fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: calc(var(--vh, 1vh) * 100);
      background: rgba(0, 0, 0, 0.95);
      z-index: 3000; /* Ensure fullscreen viewer sits above prompt bar */
      display: none;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: opacity 0.3s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      touch-action: none;
    }

    .fullscreen-overlay.active {
      display: flex;
      opacity: 1;
    }

    /* Fullscreen Image Container */
    .fullscreen-image-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      padding-top: calc(20px + env(safe-area-inset-top, 0));
      padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
    }

    .fullscreen-image {
      position: relative;
      z-index: 1;
      max-width: 100%;
      max-height: calc(var(--vh, 1vh) * 100 - 120px);
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      transition: transform 0.2s ease;
    }

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

    /* Fullscreen Close Button */
    .fullscreen-close-btn {
      position: absolute;
      top: calc(20px + env(safe-area-inset-top, 0));
      right: 20px;
      width: 40px;
      height: 40px;
      background: var(--danger-color);
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all 0.2s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      z-index: 2;
    }

    .fullscreen-close-btn:hover {
      background: #dc2626;
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    }

    /* Edit Controls */
    .edit-controls-top,
    .edit-controls-left,
    .edit-controls-bottom {
      position: absolute;
      display: flex;
      gap: 10px;
      z-index: 2;
    }

    .edit-controls-top {
      top: calc(20px + env(safe-area-inset-top, 0));
      left: 50%;
      transform: translateX(-50%);
      flex-wrap: wrap;
      justify-content: center;
    }

    .edit-controls-left {
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      flex-direction: column;
    }

    .edit-controls-bottom {
      bottom: calc(20px + env(safe-area-inset-bottom, 0));
      left: 50%;
      transform: translateX(-50%);
      flex-wrap: wrap;
      justify-content: center;
    }

    .edit-control-btn {
      background: var(--accent-color);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .edit-control-btn:hover {
      background: #3b82f6;
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    }

    .edit-control-btn:active {
    transform: translateY(0);
    }

    /* Brush Controls */
    .brush-size-slider {
      writing-mode: vertical-lr;
      direction: rtl;
      width: 8px;
      height: 100px;
      background: var(--secondary-bg);
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .brush-size-slider:hover {
      background: var(--hover-bg);
    }

    .brush-size-preview {
      width: 20px;
      height: 20px;
      background: var(--accent-color);
      border-radius: 50%;
      margin-top: 10px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3);
    }

    /* Color Picker */
    .color-picker {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .color-btn {
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .color-btn.active {
      border: 2px solid white;
      transform: scale(1.1);
      box-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
    }

    .color-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    /* Tooltip Component */
    .tooltip {
      position: relative;
      display: inline-block;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: var(--tooltip-bg);
      color: var(--text-primary);
      text-align: center;
      border-radius: 6px;
      padding: 8px;
      position: absolute;
      z-index: 1001;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
      font-size: 12px;
      border: 1px solid var(--border-color);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: var(--tooltip-bg) transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }

    /* Context Menu */
    .context-menu {
      position: fixed;
      background: var(--secondary-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 8px 0;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      z-index: 4000;
      min-width: 180px;
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .context-menu.active {
      opacity: 1;
      transform: scale(1);
    }

    .context-menu-item {
      padding: 10px 16px;
      cursor: pointer;
      font-size: 14px;
      color: var(--text-primary);
      transition: background 0.2s ease;
      display: flex;
      align-items: center;
      gap: 10px;
    }

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

    .context-menu-item.disabled {
      color: var(--text-muted);
      cursor: not-allowed;
    }

    .context-menu-item.disabled:hover {
      background: transparent;
    }

    .context-menu-separator {
      height: 1px;
      background: var(--border-color);
      margin: 4px 0;
    }

    /* Loading Overlay */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .loading-overlay.active {
      display: flex;
    }

    .loading-content {
      text-align: center;
      color: var(--text-primary);
    }

    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid rgba(255, 255, 255, 0.1);
      border-top: 4px solid var(--accent-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 16px;
    }

    .loading-message {
      font-size: 16px;
      font-weight: 500;
    }

    /* Notification Toast */
    .notification-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      background: var(--secondary-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 16px;
      max-width: 350px;
      z-index: 5000;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      transform: translateX(400px);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .notification-toast.show {
      transform: translateX(0);
    }

    .notification-toast.success {
      border-left: 4px solid var(--success-color);
    }

    .notification-toast.error {
      border-left: 4px solid var(--danger-color);
    }

    .notification-toast.warning {
      border-left: 4px solid var(--warning-color);
    }

    .notification-toast .notification-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .notification-toast .notification-title {
      font-weight: 600;
      color: var(--text-primary);
    }

    .notification-close {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }

    .notification-close:hover {
      background: var(--hover-bg);
      color: var(--text-primary);
    }
    .notification-message {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.4;
    }
    /* Dialog Animations */
    @keyframes dialogSlideIn {
      from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* ================= BEAUTIFUL EMAIL SENT DIALOG ================= */
    .email-sent-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      z-index: 2000000 !important; /* Must be above login modal (1000002) and everything else */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      isolation: isolate; /* Create new stacking context */
    }

    .email-sent-overlay.active {
      opacity: 1;
    }

    .email-sent-modal {
      background: var(--secondary-bg);
      border-radius: 20px;
      padding: 0;
      max-width: 750px;
      width: 90%;
      position: relative;
      box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
      transform: translateY(20px) scale(0.95);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .email-sent-overlay.active .email-sent-modal {
      transform: translateY(0) scale(1);
    }

    .email-sent-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 1;
    }

    .email-sent-close:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.1);
    }

    .email-sent-close img {
      width: 14px;
      height: 14px;
      opacity: 0.8;
    }

    .email-sent-content {
      padding: 40px 32px 32px;
      text-align: center;
    }

    .email-sent-icon {
      margin-bottom: 24px;
      display: flex;
      justify-content: center;
    }

    .email-sent-icon img {
      width: 64px;
      height: 64px;
      filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.3));
    }

    .email-sent-title {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 16px 0;
      line-height: 1.3;
    }

    .email-sent-message {
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin: 0 0 32px 0;
      max-width: 380px;
      margin-left: auto;
      margin-right: auto;
    }

    .email-sent-actions {
      display: flex;
      justify-content: center;
    }

    .email-sent-button {
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
      border: none;
      color: white;
      padding: 12px 32px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
    }

    .email-sent-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4);
    }

    .email-sent-button:active {
      transform: translateY(0);
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
      .email-sent-modal {
        margin: 20px;
        width: calc(100% - 40px);
      }

      .email-sent-content {
        padding: 32px 24px 24px;
      }

      .email-sent-title {
        font-size: 20px;
      }

      .email-sent-message {
        font-size: 14px;
      }

      .email-sent-icon img {
        width: 56px;
        height: 56px;
      }
    }



    /* ================= PREMIUM LOGIN MODAL - SOPHISTICATED PLASMA DESIGN ================= */

    .modal-overlay::before,
    .modal-overlay::after {
        pointer-events: none; /* make decorative layers click-through */
    }

    .login-modal {
        position: relative;
        z-index: 1; /* keep modal content above overlay layers */
        pointer-events: auto;
    }

    /* ================= PREMIUM LOGIN MODAL - CLASSY DARK GREY WITH BLUE ACCENT ================= */

    .modal-overlay {
      --glow-speed: 22s;
      --glow-speed-2: 28s;
      --glow-opacity: 0.63;
      --glow-opacity-2: 0.495;
      --plasma-sat: 0.75;
      --plasma-bright: 0.80;
      --plasma-hue-shift: 215deg; /* subtle dark blue tone */

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000002; /* ⚠️ ESSENTIAL: Above sidebar (2001) and context menu (1000001) */
      opacity: 0;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);

      /* Rich dark grey background with blue undertone */
      background: 
        radial-gradient(circle at 20% 80%, rgba(30, 34, 40, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(38, 42, 48, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(24, 28, 34, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, 
          rgba(20, 22, 28, 0.16) 0%,
          rgba(28, 30, 128, 0.24) 25%,
          rgba(48, 20, 66, 0.25) 50%,
          rgba(24, 26, 34, 0.23) 75%,
          rgba(16, 18, 24, 0.27) 100%
        );

      backdrop-filter: blur(10px)
                      saturate(var(--plasma-sat))
                      brightness(var(--plasma-bright));
      -webkit-backdrop-filter: blur(10px)
                      saturate(var(--plasma-sat))
                      brightness(var(--plasma-bright));
    }

    .modal-overlay::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(180px 220px at 20% 75%, rgba(90, 100, 120, 0.28), transparent 60%),
        radial-gradient(240px 200px at 80% 25%, rgba(70, 80, 100, 0.22), transparent 60%),
        radial-gradient(300px 320px at 45% 45%, rgba(60, 70, 90, 0.20), transparent 60%);
      filter: blur(35px) hue-rotate(var(--plasma-hue-shift));
      opacity: var(--glow-opacity);
      animation: plasmaDrift var(--glow-speed) ease-in-out infinite alternate;
      mix-blend-mode: screen;
    }

    .modal-overlay::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(140px 160px at 25% 30%, rgba(100, 110, 130, 0.18), transparent 60%),
        radial-gradient(180px 180px at 75% 70%, rgba(80, 100, 120, 0.16), transparent 60%);
      filter: blur(35px) hue-rotate(var(--plasma-hue-shift));
      opacity: var(--glow-opacity-2);
      animation: plasmaDrift2 var(--glow-speed-2) ease-in-out infinite alternate;
      mix-blend-mode: screen;
    }

    @keyframes plasmaDrift {
      0%   { transform: translate(-2%, 1%) scale(1.02); }
      50%  { transform: translate(2%, -1%) scale(1.05) hue-rotate(calc(var(--plasma-hue-shift) * 0.5)); }
      100% { transform: translate(-1%, 2%) scale(1.03) hue-rotate(var(--plasma-hue-shift)); }
    }

    @keyframes plasmaDrift2 {
      0%   { transform: translate(2%, -2%) scale(0.98) hue-rotate(calc(var(--plasma-hue-shift) * -0.4)); }
      50%  { transform: translate(-1%, 1%) scale(1.00); }
      100% { transform: translate(1%, -1%) scale(0.99) hue-rotate(calc(var(--plasma-hue-shift) * -1)); }
    }

    .modal-overlay.active {
      display: flex;
      opacity: 1;
    }


    /* Premium Frosted Glass Modal */
    .login-modal {
      position: relative;
      width: 90%;
      max-width: 700px;
      margin: 20px;
      padding: 0;
      border-radius: 24px;
      overflow: hidden;
      background: rgba(15, 23, 23, 0.85);
      backdrop-filter: blur(40px) saturate(0.5) brightness(1.1);
      -webkit-backdrop-filter: blur(40px) saturate(1.5) brightness(1.1);
      box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transform: translateY(40px) scale(0.9);
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .modal-overlay.active .login-modal {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* Close Button */
    .close-modal {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 2;
      backdrop-filter: blur(10px);
    }

    .close-modal:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.9);
      transform: scale(1.05);
    }

    /* Logo & Header */
    .login-logo {
      text-align: center;
      margin: 40px 0 30px;
      padding: 0 40px;
    }

    .login-logo img {
      width: 56px;
      height: auto;
      filter: brightness(1.1) saturate(1.2);
    }

    .login-header {
      text-align: center;
      margin-bottom: 32px;
      padding: 0 40px;
    }

    .login-header h2 {
      font-size: 28px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
      margin-bottom: 8px;
    }

    .login-header p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 16px;
    }

    /* Methods & Forms */
    .login-methods {
      padding: 0 40px 40px;
      display: grid;
      gap: 20px;
    }

    .social-login {
      display: grid;
    }

    .social-login .social-btn {
      width: 100%;
      height: 56px;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      color: #1a1a1a;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .social-login .social-btn:hover {
      background: rgba(255, 255, 255, 1);
      transform: translateY(-2px) scale(1.02);
    }

    .social-login .social-btn img {
      width: 24px;
      height: 24px;
    }

    .login-divider {
      display: flex;
      align-items: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 14px;
    }

    .login-divider::before,
    .login-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
      );
    }

    .login-divider span {
      padding: 0 24px;
      background: rgba(15, 23, 42, 0.6);
      border-radius: 12px;
    }

    .login-form,
    #signupForm {
      display: grid;
      gap: 20px;
    }

    .form-group {
      display: grid;
      gap: 8px;
    }

    .form-group label {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
    }

    .form-group input {
      height: 56px;
      padding: 0 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      color: rgba(255, 255, 255, 0.95);
      font-size: 16px;
    }

    /* Form placeholder styles moved to placeholders.css */

    .form-group input:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.3);
    }

    /* Submit Button */
    .submit-btn {
      height: 56px;
      background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.9) 0%,
        rgba(79, 70, 229, 0.9) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      color: white;
      font-size: 16px;
      font-weight: 600;
    }

    .submit-btn:hover {
      background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 1) 0%,
        rgba(79, 70, 229, 1) 100%
      );
      transform: translateY(-2px) scale(1.02);
    }

    /* Footer Links */
    .form-footer {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .form-footer a {
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
    }

    .form-footer a:hover {
      color: rgba(99, 102, 241, 0.9);
    }

    /* Error Message */
    .error-message {
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 12px;
      color: rgba(255, 180, 180, 0.9);
      padding: 16px;
      font-size: 14px;
      text-align: center;
      display: none;
    }

    .error-message.visible {
      display: block;
    }

    .error-message.success {
      background: rgba(34, 197, 94, 0.15);
      border-color: rgba(34, 197, 94, 0.3);
      color: rgba(180, 255, 180, 0.9);
    }

    .error-message a {
      color: #88c8ff;
      text-decoration: underline;
      font-weight: 500;
      transition: color 0.2s ease;
      cursor: pointer;
    }
    
    .error-message a:hover {
      color: #aad8ff;
    }

    /* Mobile Tweaks */
    @media (max-width: 600px) {
      .login-modal {
        width: calc(100% - 40px);
        border-radius: 20px;
      }
    }


    /* ================= ANIMATIONS.CSS - ALL KEYFRAMES & TRANSITIONS ================= */

    /* Professional Text Shine Effect for Processing States */
    @keyframes textShine {
      0% {
        background-position: -200% center;
        opacity: 0.3;
      }
      25% {
        opacity: 0.6;
      }
      50% {
        background-position: 0% center;
        opacity: 1;
      }
      75% {
        opacity: 0.6;
      }
      100% {
        background-position: 200% center;
        opacity: 0.3;
      }
    }

    @keyframes textShinePulse {
      0%, 100% {
        background-position: -200% center;
        opacity: 0.4;
      }
      50% {
        background-position: 200% center;
        opacity: 1;
      }
    }

    /* Enhanced Processing Text Styles */
    .processing-text {
      position: relative;
      display: inline-block;
      background: linear-gradient(
        90deg,
        var(--text-secondary) 0%,
        var(--text-primary) 25%,
        var(--text-primary) 50%,
        var(--text-secondary) 75%,
        var(--text-secondary) 100%
      );
      background-size: 200% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textShine 2.5s ease-in-out infinite;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .processing-text.pulse {
      animation: textShinePulse 1.8s ease-in-out infinite;
    }

    .processing-text.fast {
      animation-duration: 1.2s;
    }

    .processing-text.slow {
      animation-duration: 3s;
    }

    /* Professional Processing Container */
    .processing-container {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(4px);
    }

    .processing-container .processing-text {
      font-size: 13px;
      line-height: 1.4;
    }

    /* Thinking Animation - Updated with shine effect */
    .thinking-dots {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .thinking-dot {
      width: 4px;
      height: 4px;
      background: var(--text-muted);
      border-radius: 50%;
      animation: thinking 1.4s infinite ease-in-out;
    }

    .thinking-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .thinking-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    .thinking-dots.inline {
      display: inline-flex;
      margin-left: 4px;
    }

    /* Enhanced thinking text with shine effect */
    .thinking-text {
      background: linear-gradient(
        90deg,
        var(--text-secondary) 0%,
        var(--text-primary) 25%,
        var(--text-primary) 50%,
        var(--text-secondary) 75%,
        var(--text-secondary) 100%
      );
      background-size: 200% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textShine 2.5s ease-in-out infinite;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    /* Progressive Thinking Animation */
    .ai-thinking.progressive {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0;
      align-items: flex-start; /* Left-align the entire container */
      width: auto;
      max-width: 100%;
    }

    .thinking-line {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 0;
      transition: opacity 0.3s ease;
      width: auto;
      max-width: 100%;
      justify-content: flex-start; /* Left-align the content */
      min-height: 24px;
    }

    .thinking-line.active {
      color: var(--text-primary);
    }

    .thinking-line.active .thinking-text {
      color: var(--text-primary);
      background: transparent;
      -webkit-text-fill-color: currentColor;
      animation: thinkingTextPulse 1.6s ease-in-out infinite;
      font-weight: 500;
    }

    .thinking-line.completed {
      color: #999999; /* Lighter grey for better visibility */
      opacity: 0.9; /* More visible */
    }

    .thinking-line.completed .thinking-text {
      font-style: normal;
      font-weight: 400;
      color: #999999; /* Standardized finished text */
      /* Remove capsule and rounded corners to avoid clipping */
      background: none;
      border-radius: 0;
      padding: 0;
      z-index: 1;
      /* Override shine effect from base .thinking-text */
      animation: none !important;
      background-clip: border-box;
      -webkit-background-clip: border-box;
      -webkit-text-fill-color: currentColor;
    }

    .thinking-line.completed .thinking-dots {
      opacity: 1; /* Keep checkmark clearly visible */
    }

    .thinking-line .thinking-dots {
      flex-shrink: 0;
      width: 24px; /* Fixed width for consistent alignment */
    }

    .thinking-line .thinking-text {
      flex: 0 1 auto;
      font-size: 13px;
      line-height: 1.4;
      min-height: 18px;
      border-radius: 0; /* Remove radius to avoid corner clipping */
    }

    /* Horizontal dots for generating state */
    .thinking-dots.horizontal {
      gap: 6px;
    }

    .thinking-dots.horizontal .thinking-dot {
      animation: thinkingPulseHorizontal 1.2s ease-in-out infinite both;
    }

    .thinking-dots.horizontal .thinking-dot:nth-child(1) { animation-delay: -0.24s; }
    .thinking-dots.horizontal .thinking-dot:nth-child(2) { animation-delay: -0.12s; }
    .thinking-dots.horizontal .thinking-dot:nth-child(3) { animation-delay: 0s; }

    @keyframes thinkingPulseHorizontal {
      0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.4;
      }
      40% {
        transform: scale(1.1);
        opacity: 1;
      }
    }

    /* Ensure thinking messages maintain flex layout with avatar space */
    .message.assistant.thinking {
      display: flex !important;
      justify-content: flex-start !important;
      align-items: flex-end !important;
      gap: var(--chat-gap, 8px) !important;
      width: auto !important;
      max-width: min(560px, calc(100vw - 150px)) !important;
      margin-top: 6px !important;
    }

    /* Compact, left-aligned thinking bubble (no background) */
    .message.assistant.thinking .message-content {
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
      width: auto !important;
      max-width: 100% !important;
      box-shadow: none !important;
    }

    .message.assistant.thinking .ai-thinking.progressive {
      padding: 0 !important;
      gap: 2px !important;
      align-items: flex-start;
      width: auto !important;
      max-width: 100% !important;
    }

    .message.assistant.thinking .thinking-line {
      gap: 12px !important;
      padding: 0 !important;
      min-height: 0 !important;
      width: auto !important;
      max-width: 100% !important;
    }

    .message.assistant.thinking .thinking-dots {
      width: 18px; /* tighter alignment */
    }

    .message.assistant.thinking .thinking-dot {
      width: 3px;
      height: 3px;
    }
    .message.assistant.thinking .thinking-line .thinking-text {
      padding: 0 !important;
      margin: 0 !important;
      /* Keep background available for active shine; chat.css adds a capsule background, so clear only color layer */
      background-color: transparent !important;
    }
    .message.assistant.thinking .thinking-line.completed .thinking-text {
      background: none !important;
      padding: 0 !important;
    }

    /* Processing states for different actions */
.generating-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 25%,
    var(--text-primary) 50%,
    var(--text-secondary) 75%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 2s ease-in-out infinite;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.analysing-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 25%,
    var(--text-primary) 50%,
    var(--text-secondary) 75%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 1.8s ease-in-out infinite;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.refining-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 25%,
    var(--text-primary) 50%,
    var(--text-secondary) 75%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 2.2s ease-in-out infinite;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.uploading-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 25%,
    var(--text-primary) 50%,
    var(--text-secondary) 75%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 1.5s ease-in-out infinite;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.creating-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 25%,
    var(--text-primary) 50%,
    var(--text-secondary) 75%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 2.3s ease-in-out infinite;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.applying-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 25%,
    var(--text-primary) 50%,
    var(--text-secondary) 75%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 1.9s ease-in-out infinite;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.processing-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 25%,
    var(--text-primary) 50%,
    var(--text-secondary) 75%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 2.1s ease-in-out infinite;
  font-weight: 500;
  letter-spacing: 0.02em;
}

    /* Thinking Animation */
    @keyframes thinking {
      0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
      }
      40% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Fade In Effects */
    @keyframes fadeInUp {
  from {
    opacity: 0;
        transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

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

    /* Slide Effects */
    @keyframes slideIn {
      from {
        height: 0;
        top: 50%;
      }
      to {
        height: 100%;
        top: 0;
      }
    }

    /* Shimmer Effect */
    @keyframes shimmer {
      0% { 
        transform: translateX(-100%); 
  }
  100% { 
        transform: translateX(100%); 
      }
    }

    /* Bounce Effect */
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-10px);
      }
      60% {
        transform: translateY(-5px);
      }
    }/* ================= RESPONSIVE.CSS - MOBILE & TABLET BREAKPOINTS ================= */

    /* Mobile Styles (768px and below) */
    /* --sidebar-width is defined earlier: 80vw at <=699px (phones) and
       264px at 700-900px (small tablets incl. iPad Mini). Leaving this
       block's selector at 768px so mobile sidebar overlay/overlay-positioning
       behaviors also apply to iPad Mini portrait (264px sidebar overlaying
       content — pushing would leave too little content area). */
    @media (max-width: 768px) {
      /* Sidebar Adjustments */
      .main-content.sidebar-open {
        margin-left: 0;
      }

      .sidebar.open {
        width: var(--sidebar-width);
      }

      .sidebar-overlay.active {
        display: block;
        left: var(--sidebar-width);
        width: calc(100vw - var(--sidebar-width));
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      /* Header Adjustments - .main-header styles in topbar.css */

      .header-user-section {
        gap: 8px;                  /* Reduce gap on small screens */
      }

      /* Chat Area — side padding only; bottom padding managed by JS via --chat-bottom-pad */
      .chat-messages {
        padding-left: 12px;
        padding-right: 12px;
      }
      
      .input-section {
        padding: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
      }

      /* padding is handled dynamically via JS; keyboard-open class no longer used */

      /* Module Adjustments */
      .message.module,
      .message.module .message-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
      }

      .module-interface {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px;
        overflow-x: hidden;
      }

      .module-interface canvas,
      .module-interface img,
      .module-interface video,
      .module-interface iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
      }

      .interior-interface {
        grid-template-columns: 1fr;
      }

      .canvas-controls {
        flex-direction: column;
        align-items: center;
      }

      .canvas-controls,
      .edit-controls-top,
      .edit-controls-bottom {
        flex-wrap: wrap;
        justify-content: center;
      }

      /* Lock touch-scroll inside module bubbles */
      .module-interface {
        touch-action: none;
        overscroll-behavior: contain;
      }



      /* User Profile Mobile */
      .user-profile {
        width: 28px;
        height: 28px;
      }

      .user-initials {
        font-size: 11px;
      }

      /* Generations Panel - Show on Mobile */
      .generations-panel {
        display: block;
      }
      
      /* Panel toggle arrow visuals/visibility are owned by topbar.css + JS (single source of truth). */
    }

    /* Extra Small Screens (375px and below) */
    @media (max-width: 375px) {
    }

    /* Landscape Mobile */
    @media (max-width: 768px) and (orientation: landscape) {}

    /* Tablet Styles (769px to 1024px) */
    @media (min-width: 769px) and (max-width: 1024px) {
      .generations-panel {
        min-width: 200px;
        max-width: 250px;
      }
    }

    /* ============================================================================
   FREEFORM CANVAS PILLS - SMOOTH TRANSITION WHEN CAPSULE PANEL OPENS
   ============================================================================ */

/* Canvas pills container - positioned top-right */
/* FIX: z-index must be high enough to stay above overlays/modals */
#canvasPills {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 100000 !important;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Exclude transform from transitions to prevent slowdown during zoom */
  transition-property: right !important;
}

/* Quality dropdown menu - positioned below pills */
#qualityDropdown {
  position: absolute !important;
  top: 60px !important;
  right: 20px !important;
  z-index: 100001 !important;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Push pills AND dropdown left when capsule panel is open */
@media (min-width: 769px) {
  .main-content.generations-open #canvasPills {
    right: calc(var(--capsule-panel-width) + 20px) !important;
  }
  
  .main-content.generations-open #qualityDropdown {
    right: calc(var(--capsule-panel-width) + 20px) !important;
  }
}

/* Mobile: keep pills and dropdown in place */
@media (max-width: 768px) {
  .main-content.generations-open #canvasPills,
  .main-content.generations-open #qualityDropdown {
    right: 20px;
  }
  
  /* Mobile: Keep overlay behavior - don't push main content */
  .main-content.generations-open {
    margin-right: 0 !important;
  }
  
  .sidebar.open ~ .main-content.generations-open {
    margin-right: 0 !important;
  }
}

/* ============================================================================
   END CANVAS PILLS TRANSITION
   ============================================================================ */

    /* Large Desktop */
    @media (min-width: 1440px) {
      .generations-panel {
        min-width: 220px;
        max-width: 300px;
      }
      
      .generation-item {
        margin-bottom: 2px;
      }
    }

    /* High DPI Optimizations */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .capsule-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }

      /* Sharper spinner on high DPI displays */
      .spinner-ring::before {
        filter: blur(0.2px);
      }
    }

    /* Dark Mode Responsive Adjustments */
    @media (prefers-color-scheme: dark) {
      .generations-panel {
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
      }

      .generation-item.selected {
        box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.45), 0 4px 14px rgba(245, 166, 35, 0.22);
      }

      .generation-item.loading {
        filter: brightness(1.08);
      }
    }

    /* Add these styles to your existing responsive.css */

    /* Mobile Module Enhancements */
    @media (max-width: 768px) {
      /* Enhanced Module Adjustments */
      .message.module .message-content {
        padding: 12px; /* Even more compact on mobile */
        max-width: 100% !important;
      }
      
      .module-header {
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 10px;
      }
      
      .module-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
      }
      
      .module-title {
        font-size: 14px;
      }
      
      .module-description {
        font-size: 11px;
      }
      
      .module-control-btn,
      .module-minimize {
        width: 20px;
        height: 20px;
        font-size: 10px;
      }
      
      .module-interface {
        padding: 8px;
        min-height: 150px;
        max-height: 60vh;
      }
      
      /* Canvas interface mobile */
      .canvas-interface {
        padding: 12px;
      }
      
      .canvas-interface h3 {
        font-size: 13px;
        margin-bottom: 10px;
      }
      
      .canvas-controls {
        gap: 6px;
        margin-top: 10px;
      }
      
      .canvas-btn {
        padding: 5px 10px;
        font-size: 11px;
      }
      
      /* Interior interface mobile */
      .interior-interface {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
      }
      
      .interior-section h4 {
        font-size: 12px;
        margin-bottom: 6px;
      }
      
      .interior-option {
        padding: 6px 8px;
        font-size: 11px;
        margin-bottom: 2px;
      }
      
    }

    /* Tablet adjustments */
    @media (min-width: 769px) and (max-width: 1024px) {
      .message.module .message-content {
        max-width: 95%;
        padding: 14px;
      }
      
      .module-interface {
        padding: 14px;
        max-height: 65vh;
      }
    }
    /* ================= ACCESSIBILITY.CSS - FOCUS STATES & REDUCED MOTION ================= */

    /* Focus States */
    .generation-item:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .generations-close:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .panel-toggle-arrow:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .sidebar-item:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .send-button:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .menu-toggle:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .sidebar-close:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .new-project-btn:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .project-action-btn:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .file-input-button:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .clear-image-btn:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .canvas-btn:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .interior-option:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }


    .module-minimize:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .fullscreen-close-btn:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .edit-control-btn:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .color-btn:focus {
      outline: 2px solid white;
      outline-offset: 2px;
    }

    .closeDialogButton:focus,
    .dialogBackButton:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    /* High Contrast Support */
    @media (prefers-contrast: high) {
      :root {
        --border-color: #ffffff;
        --text-secondary: #cccccc;
        --hover-bg: #333333;
      }
      
      .sidebar-item:hover,
      .generation-item:hover {
        background: #333333;
        border: 2px solid #ffffff;
      }
      
    }

    /* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
      * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
      }
      
      .generation-item:hover,
      .panel-toggle-arrow:hover,
      .sidebar-item:hover,
      .new-project-btn:hover,
      .send-button:hover {
        transform: none !important;
      }
      
      .spinner {
        animation: spin 1s linear infinite !important;
      }

      .spinner-ring::before {
        animation: elegantSpin 2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
      }

      .spinner-ring::after {
        animation: glowPulse 3s ease-in-out infinite !important;
      }
      
      .capsule-image.loading::before,
      .capsule-image.loading::after {
        animation: none !important;
        opacity: 0.3 !important;
      }
      
      .thinking-dot {
        animation: none !important;
      }
      
      .message.module .message-content {
        animation: none !important;
      }
      
      .generation-item {
        animation: none !important;
      }
      
      .empty-state .emoji {
        animation: none !important;
      }
      
      .loading-text {
        animation: none !important;
      }
    }

    /* Screen Reader Support */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--accent-color);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
      transition: top 0.2s;
}

.skip-link:focus {
  top: 6px;
      outline: 2px solid white;
      outline-offset: 2px;
    }

    /* ARIA Live Regions */
    .live-region {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    /* Focus Visible Support (for browsers that support it) */
    @supports selector(:focus-visible) {
      .generation-item:focus:not(:focus-visible),
      .sidebar-item:focus:not(:focus-visible),
      .message-input:focus:not(:focus-visible),
      .send-button:focus:not(:focus-visible),
      .menu-toggle:focus:not(:focus-visible) {
        outline: none;
      }
    }

    /* Keyboard Navigation Indicators */
    .keyboard-user .generation-item:focus,
    .keyboard-user .sidebar-item:focus {
      background: var(--hover-bg);
      border-color: var(--accent-color);
    }

    /* Voice Control Support */
    [data-voice-command] {
      position: relative;
    }

    [data-voice-command]::after {
      content: attr(data-voice-command);
      position: absolute;
      top: -20px;
      left: 0;
      font-size: 10px;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.2s;
    }

    .voice-commands-visible [data-voice-command]::after {
      opacity: 1;
    }


    /* Add these styles to your existing accessibility.css */

    /* ================= MODULE ACCESSIBILITY ENHANCEMENTS ================= */

    /* Focus States for Module Controls */
    .module-control-btn:focus,
    .module-fullscreen:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .fullscreen-control-btn:focus,
    .fullscreen-module-header button:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    /* Fullscreen overlay focus management */
    .module-fullscreen-overlay:focus {
      outline: none;
    }

    /* High contrast support for modules */
    @media (prefers-contrast: high) {
      .module-control-btn,
      .module-minimize {
        border: 2px solid var(--text-primary);
      }
      
      .module-control-btn:hover,
      .module-minimize:hover {
        background: var(--text-primary);
        color: var(--primary-bg);
      }
      
      .fullscreen-control-btn {
        border: 2px solid var(--text-primary);
      }
      
      .module-interface {
        border: 2px solid var(--border-color);
      }
    }

    /* Reduced motion for module animations */
    @media (prefers-reduced-motion: reduce) {
      .module-control-btn,
      .module-minimize,
      .fullscreen-control-btn {
        transition: none !important;
        transform: none !important;
      }
      
      .module-control-btn:hover,
      .module-minimize:hover,
      .fullscreen-control-btn:hover {
        transform: none !important;
      }
      
      .module-fullscreen-overlay {
        transition: opacity 0.1s !important;
      }
      
      .fullscreen-module-container {
        animation: none !important;
      }
      
      .canvas-btn,
      .interior-option {
        transform: none !important;
        transition: background 0.1s !important;
      }
      
      .canvas-btn:hover,
      .interior-option:hover {
        transform: none !important;
      }
    }

    /* Screen reader support for module states */
    .module-fullscreen[aria-expanded="true"]::after {
      content: " (expanded to fullscreen)";
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .module-minimize[aria-expanded="false"]::after {
      content: " (minimized)";
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    /* Focus visible support for modules */
    @supports selector(:focus-visible) {
      .module-control-btn:focus:not(:focus-visible),
      .module-minimize:focus:not(:focus-visible),
      .fullscreen-control-btn:focus:not(:focus-visible) {
        outline: none;
      }
    }

    /* Keyboard navigation for modules */
    .keyboard-user .module-control-btn:focus,
    .keyboard-user .module-minimize:focus,
    .keyboard-user .fullscreen-control-btn:focus {
      background: none;
      border: 0px;
    }

    /* Capsule Image Viewer Overlay */
    /* Capsule overlay styles moved to viewer.css */

    .capsule-overlay-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 0px;
      touch-action: auto;
      margin-top: 0;
    }

    /* Media styles moved to viewer.css */

    .capsule-overlay-media .compare-slider {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 0px;
      background: transparent;
      cursor: ew-resize;
      z-index: 3;
      touch-action: none;
      will-change: left;
    }

    .capsule-overlay-media .compare-slider::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -12px;
      width: 24px;
      height: 24px;
      background: transparent;
      border: 0;
      border-radius: 0%;
      transform: translateY(-50%);
    }

    .capsule-overlay-model {
      /* Mobile: center horizontally and vertically with proper margins */
      width: 90%;
      height: 90%;
      max-width: 90%;
      max-height: 90%;
      border-radius: 0px;
      margin: 0 auto; /* Center horizontally */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1; /* Ensure 3D canvas is visible above overlay backdrop */
      position: relative;
      cursor: pointer; /* Indicate clickable for focus mode */
    }
    
    /* Hover effect for 3D model containers */
    .chat-model-container:hover,
    .chat-model-container-clean:hover {
      box-shadow: 0 4px 12px rgba(108, 168, 255, 0.2);
    }
    
    /* Focus mode class for 3D models */
    .model-focus-mode {
      cursor: default !important;
  /* ensure the canvas can receive pointer interactions */
  pointer-events: auto;
    }
    
    .model-focus-mode canvas {
      cursor: grab !important;
  pointer-events: auto;
    }
    
    .model-focus-mode canvas:active {
      cursor: grabbing !important;
    }

    /* Desktop: maximize space usage with proper margins */
    @media (min-width: 769px) {
      .capsule-overlay-model {
        width: calc(100% - 40px); /* Full width minus margins */
        height: calc(100% - 40px); /* Full height minus margins */
        max-width: calc(100% - 40px);
        max-height: calc(100% - 40px);
        margin: 20px; /* Consistent margins on all sides */
        margin-right: calc(360px + 20px); /* Account for info panel + margin */
      }
    }

    /* Mobile specific adjustments */
    @media (max-width: 768px) {
      .capsule-overlay-model {
        width: calc(100% - 20px); /* Full width minus smaller margins */
        height: calc(100% - 20px); /* Full height minus smaller margins */
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        margin: 10px; /* Smaller margins on mobile */
      }
    }

    .capsule-overlay-info {
      position: absolute;
      right: 30px;
      bottom: calc(var(--overlay-nav-offset, 8vh) + env(safe-area-inset-bottom, 0));
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      max-width: 280px;
      color: #fff;
      font-size: 14px;
      z-index: 3001; /* Keep overlay info above fullscreen viewer */
    }

    .capsule-overlay-actions {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(var(--overlay-nav-offset, 8vh) + env(safe-area-inset-bottom, 0));
      display: flex;
      justify-content: space-evenly;
      padding: 0 5%;
      gap: 5%;
      z-index: 3001;
    }

    .capsule-overlay-actions .message-action-btn {
      width: 38px;
      height: 38px;
      transition: background-color 0.2s ease;
      border-radius: 8px;
    }

    .capsule-overlay-actions .message-action-btn img {
      width: 26px;
      height: 26px;
    }

    .capsule-image-overlay.zoomed .capsule-overlay-actions .message-action-btn {
      background-color: rgba(20, 20, 20, 0.2);
    }

    .capsule-image-overlay.zoomed .capsule-overlay-close {
      background-color: rgba(20, 20, 20, 0.2);
    }

    .capsule-overlay-info .overlay-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      line-height: 1.2;
      font-size: 12px;
    }

    .capsule-overlay-info .overlay-expiry {
      color: #ff4d4d;
    }

    .capsule-overlay-info .overlay-project-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--tertiary-bg);
      color: #fff;
      border: none;
      padding: 4px 8px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 12px;
    }

    .capsule-overlay-info .overlay-project-btn img {
      width: 16px;
      height: 16px;
      border-radius: 3px;
    }

    .capsule-overlay-info .overlay-prompt {
      font-style: italic;
      text-align: right;
      font-size: 13px;
    }

    .capsule-overlay-info .overlay-resolution {
      font-style: italic;
      text-align: right;
      font-size: 11px;
      display: none;
    }


    .capsule-overlay-close {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      background: var(--tertiary-bg);
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      transition: background 0.2s ease;
      z-index: 9999; /* Keep close button above overlay content */
    }

    .capsule-overlay-close:hover {
      background: var(--hover-bg);
    }

    .capsule-overlay-active {
      overflow: hidden;
    }

    /* Mobile and responsive styles moved to viewer.css */

    /* Plus Menu */
    .plus-menu-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-left: 0; /* No margin: symmetric padding positions button concentrically */
    }

    /* 🎯 Plus button - sized for visibility */
    .plus-menu-btn {
      width: 51px;
      height: 51px;
      border-radius: 50%;
      border: none;
      background: rgba(0.2,0.2,0.2,0.25);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0;
      /* Default: Precise mode grey rim - shown before JS loads */
      box-shadow: 0 0 0 2px rgba(200, 200, 200, 0.8);
      /* NO transition initially - added via JS after load to prevent flash */
      transition: none;
    }

    .plus-menu-icon {
      display: block;
      width: 21px;
      height: 21px;
    }
    
    /* Add transition only after page is loaded (JS will add this class) */
    .plus-menu-btn.transitions-enabled {
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
    }

    .plus-menu-btn:hover {
      background: #565869;
      transform: scale(1.1);
    }

    /* + Button rim color based on context mode */
    /* Precise Mode (context OFF) = Light grey-white rim, minimal glow */
    .plus-menu-btn.context-mode-inactive {
      box-shadow: 0 0 0 2px rgba(200, 200, 200, 0.8);
      transition: box-shadow 0.3s ease, background 0.2s ease, transform 0.2s ease;
    }

    /* Context Mode (context ON) = Orange/yellow rim, minimal glow */
    .plus-menu-btn.context-mode-active {
      box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.8);
      color: rgb(255, 140, 0);
      border-color: rgba(255, 140, 0, 0.3);
      transition: box-shadow 0.3s ease, background 0.2s ease, transform 0.2s ease, color 0.3s ease;
    }

    .plus-menu-btn.context-mode-inactive:hover {
      box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.95), 
                  0 0 4px rgba(200, 200, 200, 0.2);
    }

    .plus-menu-btn.context-mode-active:hover {
      box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.95),
                  0 0 4px rgba(255, 140, 0, 0.2);
      color: rgb(255, 165, 0);
      border-color: rgba(255, 165, 0, 0.4);
    }

    /* Initial glow animation for first-time Freeform users - minimal glow (grey) */
    @keyframes plusButtonPulseGlow {
      0%, 100% {
        box-shadow: 0 0 0 2px rgba(200, 200, 200, 0.7);
      }
      50% {
        box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.95), 
                    0 0 6px rgba(200, 200, 200, 0.3);
      }
    }

    .plus-menu-btn.first-time-glow {
      animation: plusButtonPulseGlow 1.5s ease-in-out infinite;
    }

    .plus-menu-dropdown {
      position: absolute;
      bottom: 55px;
      left: 0;
      min-width: 255px;
      /* Flat design matching topbar aesthetic */
      background: rgba(12, 14, 18, 0.95);
      backdrop-filter: blur(40px) saturate(150%);
      -webkit-backdrop-filter: blur(40px) saturate(150%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 8px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 
                  inset 0 1px 0 rgba(255, 255, 255, 0.04);
      display: flex;
      flex-direction: column;
      gap: 6px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px) scale(0.97);
      transition: opacity 0.2s ease-out, 
                  transform 0.2s ease-out;
      z-index: 99999;
      will-change: transform, opacity;
    }

    .plus-menu-dropdown.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .plus-menu-item {
      /* Capsule / Pill Design */
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      color: rgba(255, 255, 255, 0.88);
      height: 44px;
      padding: 0 18px;
      text-align: left;
      font-size: 13px;
      white-space: nowrap;
      font-weight: 500;
      letter-spacing: 0.2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    .plus-menu-item::before {
      display: none;
    }

    .plus-menu-item:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .plus-menu-item:hover::before {
      display: none;
    }

    .plus-menu-item.active {
      background: rgba(200, 200, 200, 0.2);
      border-color: rgba(200, 200, 200, 0.4);
      color: #ffffff;
      box-shadow: 0 0 12px rgba(200, 200, 200, 0.25), inset 0 0 0 1px rgba(200, 200, 200, 0.3);
    }

    /* Override styling for multimodal agent option when active - PRO golden tones */
    .plus-menu-item.active#multimodalAgentOption {
      background: rgba(212, 175, 55, 0.25) !important;
      border-color: rgba(184, 134, 11, 0.4) !important;
      color: #333333 !important;
      box-shadow: inset 0 0 0 1px rgba(184, 134, 11, 0.3);
    }

    /* Ensure multimodal agent option stays styled when active (Context Mode) */
    #multimodalAgentOption.active,
    #multimodalAgentOption.multimodal-agent-active {
      background: rgba(212, 175, 55, 0.25) !important;
      border-color: rgba(184, 134, 11, 0.4) !important;
      color: #333333 !important;
      box-shadow: inset 0 0 0 1px rgba(184, 134, 11, 0.3);
    }

    /* Precise Mode: light grey styling when NOT active (default mode) */
    #multimodalAgentOption:not(.active):not(.multimodal-agent-active) {
      background: rgba(200, 200, 200, 0.15) !important;
      color: #ffffff !important;
      box-shadow: inset 0 0 0 1px rgba(200, 200, 200, 0.2);
      border-color: rgba(200, 200, 200, 0.3);
    }

    /* Override styling for context mode option when active - flat design */
    .plus-menu-item.active#contextModeOption {
      background: rgba(50, 205, 50, 0.2) !important;
      border-color: rgba(50, 205, 50, 0.4) !important;
      color: #ffffff !important;
      box-shadow: inset 0 0 0 1px rgba(50, 205, 50, 0.3);
    }

    /* Ensure context mode option stays styled in all states */
    #contextModeOption.active,
    #contextModeOption.context-mode-active {
      background: rgba(50, 205, 50, 0.2) !important;
      border-color: rgba(50, 205, 50, 0.4) !important;
      color: #ffffff !important;
      box-shadow: inset 0 0 0 1px rgba(50, 205, 50, 0.3);
    }

    /* Icon styling for consistent positioning */
    .plus-menu-item img {
      width: 16px !important;
      height: 16px !important;
      flex-shrink: 0;
      margin: 0 !important;
      margin-right: 0 !important;
      opacity: 0.85;
      filter: brightness(1.1);
      transition: opacity 0.15s ease, filter 0.15s ease;
    }

    .plus-menu-item:hover img {
      opacity: 1;
      filter: brightness(1.2);
    }

    .plus-menu-item.active img {
      filter: brightness(1.3);
      opacity: 1;
    }

    /* Icon styling for multimodal agent when active - dark icon */
    .plus-menu-item.active#multimodalAgentOption img,
    #multimodalAgentOption.active img,
    #multimodalAgentOption.multimodal-agent-active img {
      filter: brightness(0.2);
      opacity: 1;
      transition: filter 0.15s ease;
    }

    /* Icon in Precise Mode */
    #multimodalAgentOption:not(.active):not(.multimodal-agent-active) img {
      filter: brightness(1.1);
      opacity: 0.9;
      transition: filter 0.15s ease;
    }

    /* Icon styling for context mode when active */
    .plus-menu-item.active#contextModeOption img,
    #contextModeOption.active img,
    #contextModeOption.context-mode-active img {
      filter: brightness(1.2);
      opacity: 1;
      transition: filter 0.15s ease;
    }

    .plus-menu-item.disabled {
      opacity: 0.4;
      cursor: not-allowed;
      color: rgba(255, 255, 255, 0.5);
      position: relative;
    }

    .plus-menu-item.disabled:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: none;
    }

    /* ============================================
       MODE TOGGLE - Capsule / Pill Style
       ============================================ */
    .mode-toggle-container {
      position: relative;
      display: flex;
      align-items: center;
      /* Flat design matching other menu items */
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      padding: 3px;
      gap: 0;
      width: 100%;
      height: 44px; /* Consistent with menu items */
      box-sizing: border-box;
    }

    .mode-toggle-slider {
      position: absolute;
      top: 3px;
      left: 3px;
      width: calc(50% - 3px);
      height: calc(100% - 6px);
      border-radius: 999px;
      /* Precise mode: Light grey, minimal shadow */
      background: rgba(200, 200, 200, 0.9);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                  background 0.25s ease, 
                  box-shadow 0.25s ease;
      z-index: 0;
    }

    /* Slider moves to right when Context mode is active */
    .mode-toggle-container.context-active .mode-toggle-slider {
      transform: translateX(100%);
      /* Context mode: PRO golden tones, minimal shadow */
      background: rgba(212, 175, 55, 0.95);
      box-shadow: 0 1px 4px rgba(184, 134, 11, 0.25);
    }

    /* 3D Studio model selector (Precise / Context) */
    .model3d-mode-toggle-container {
      display: none;
      position: relative;
      overflow: hidden;
    }

    .model3d-mode-toggle-container .model3d-mode-toggle-slider {
      width: calc(50% - 3px);
      background: rgba(200, 200, 200, 0.9);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
      transform: translateX(0%);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                  background 0.25s ease,
                  box-shadow 0.25s ease;
    }

    .model3d-mode-toggle-container.mode3d-context-active .model3d-mode-toggle-slider {
      transform: translateX(100%);
      background: rgba(212, 175, 55, 0.95);
      box-shadow: 0 1px 4px rgba(184, 134, 11, 0.3);
    }

    .mode-toggle-option {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 100%;
      padding: 0 14px; /* Adjusted for alignment */
      background: transparent;
      border: none;
      border-radius: 999px;
      color: rgba(255, 255, 255, 0.45);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    .mode-toggle-option img {
      width: 14px;
      height: 14px;
      opacity: 0.45;
      filter: brightness(1);
      transition: opacity 0.2s ease, filter 0.2s ease;
      flex-shrink: 0;
      margin-bottom: 1px; /* Subtle optical alignment */
    }

    .mode-toggle-option span {
      transition: color 0.2s ease;
    }

    /* Active option styling - on top of slider */
    /* Precise mode (grey slider) = dark text/icon */
    .mode-toggle-option.active {
      color: #333333;
    }

    .mode-toggle-option.active img {
      opacity: 1;
      filter: brightness(0); /* Dark icon for grey background */
    }
    
    /* Context mode active = dark text/icon on gold (matches PRO style) */
    .mode-toggle-container.context-active .mode-toggle-option.active {
      color: #333333;
    }

    .mode-toggle-container.context-active .mode-toggle-option.active img {
      filter: brightness(0); /* Dark icon for gold background */
    }

    /* Hover effects for inactive option */
    .mode-toggle-option:not(.active):hover {
      color: rgba(255, 255, 255, 0.7);
    }

    .mode-toggle-option:not(.active):hover img {
      opacity: 0.7;
    }

    /* Click feedback */
    .mode-toggle-option:active {
      transform: scale(0.98);
    }

    /* Freeform-only dev row (KLEIN) */
    .dev-mode-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      min-height: 44px;
      padding: 0 14px;
      box-sizing: border-box;
    }

    .dev-mode-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
      min-width: 0;
    }

    .dev-mode-label {
      font-size: 10px;
      letter-spacing: 0.55px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.46);
      line-height: 1;
      font-weight: 600;
    }

    .dev-mode-name {
      font-size: 12px;
      letter-spacing: 0.28px;
      color: rgba(255, 255, 255, 0.92);
      font-weight: 700;
      line-height: 1.05;
    }

    .dev-mode-switch {
      position: relative;
      width: 42px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      flex-shrink: 0;
      margin-left: 12px;
    }

    .dev-mode-switch input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .dev-mode-switch-track {
      width: 100%;
      height: 100%;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.25);
      transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      box-sizing: border-box;
      position: relative;
    }

    .dev-mode-switch-track::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
      transition: transform 0.18s ease, background 0.18s ease;
    }

    .dev-mode-switch input:checked + .dev-mode-switch-track {
      background: rgba(99, 208, 142, 0.92);
      border-color: rgba(99, 208, 142, 0.98);
      box-shadow: 0 0 0 1px rgba(99, 208, 142, 0.28);
    }

    .dev-mode-switch input:checked + .dev-mode-switch-track::after {
      transform: translateX(18px);
      background: #0f2114;
    }

    /* Subtle pulse animation on mode change - minimal glow (grey for Precise) */
    @keyframes modeTogglePulse {
      0% { box-shadow: 0 1px 4px rgba(180, 180, 180, 0.15); }
      50% { box-shadow: 0 1px 6px rgba(180, 180, 180, 0.25); }
      100% { box-shadow: 0 1px 4px rgba(180, 180, 180, 0.15); }
    }

    @keyframes modeTogglePulseOrange {
      0% { box-shadow: 0 1px 4px rgba(184, 134, 11, 0.25); }
      50% { box-shadow: 0 1px 6px rgba(184, 134, 11, 0.35); }
      100% { box-shadow: 0 1px 4px rgba(184, 134, 11, 0.25); }
    }

    .mode-toggle-slider.pulse-grey,
    .mode-toggle-slider.pulse-blue {
      animation: modeTogglePulse 0.35s ease-out;
    }

    .mode-toggle-slider.pulse-orange {
      animation: modeTogglePulseOrange 0.35s ease-out;
    }

    /* Beta label styling - grayscale for light/dark themes */
    .beta-label {
      font-size: 9px;
      color: rgba(0, 0, 0, 0.5);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: rgba(0, 0, 0, 0.05);
      padding: 2px 6px;
      border-radius: 8px;
      margin-left: 8px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* Beta label styling when agent mode is active - dark on gold */
    .plus-menu-item.active#multimodalAgentOption .beta-label,
    #multimodalAgentOption.active .beta-label,
    #multimodalAgentOption.multimodal-agent-active .beta-label {
      color: #333333 !important;
      background: rgba(51, 51, 51, 0.1);
      border-color: rgba(51, 51, 51, 0.2);
    }

    /* Disabled menu items */
    .plus-menu-item.disabled {
      background: rgba(30, 35, 50, 0.3);
      border-color: rgba(148, 163, 184, 0.15);
      color: rgba(203, 213, 225, 0.5);
      cursor: not-allowed;
      opacity: 0.5;
    }

    .plus-menu-item.disabled:hover {
      background: rgba(30, 35, 50, 0.3);
      border-color: rgba(148, 163, 184, 0.15);
      transform: none;
      box-shadow: none;
    }

    .plus-menu-item.disabled img {
      opacity: 0.4;
      filter: grayscale(1) brightness(0.7);
    }

    /* Custom tooltip for disabled items */
    .plus-menu-item.disabled::after {
      content: attr(title);
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 8px;
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 1000;
    }

    .plus-menu-item.disabled:hover::after {
      opacity: 1;
    }

    /* Context Mode Animation States */
    .plus-menu-dropdown.context-mode-activating .plus-menu-item:not(#contextModeOption) {
      opacity: 0.3;
      transform: scale(0.95);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .plus-menu-dropdown.context-mode-activating #contextModeOption {
      background: #32CD32;
      color: #000000;
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(50, 205, 50, 0.6), 0 0 40px rgba(50, 205, 50, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Subtle fade state when turning OFF context mode (no green glow) */
    .plus-menu-dropdown.context-mode-deactivating #contextModeOption {
      background: transparent;
      color: #ccc;
      transform: scale(0.98);
      box-shadow: none;
      opacity: 0.85;
      transition: all 0.25s ease;
    }

    /* Message input container deactivating state - maintain orange during fade out */
    .message-input-container.context-mode-deactivating {
      background: rgba(255, 140, 0, 0.08); /* subtle orange tint during fade */
      border-color: rgba(255, 140, 0, 0.25);
      box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.1), 0 0 8px rgba(255, 140, 0, 0.1);
      transition: all 0.3s ease;
    }

    .message-input-container.context-mode-deactivating .message-input {
      color: #FFB366; /* maintain orange text during fade */
    }

    .message-input-container.context-mode-deactivating .send-button {
      background: rgba(255, 140, 0, 0.8);
      color: #1a0f00;
      opacity: 0.8;
      transition: all 0.3s ease;
    }

    /* Multimodal Agent Animation States */
    .plus-menu-dropdown.multimodal-agent-activating .plus-menu-item:not(#multimodalAgentOption) {
      opacity: 0.3;
      transform: scale(0.95);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .plus-menu-dropdown.multimodal-agent-activating #multimodalAgentOption {
      background: #D4AF37 !important;  /* Metallic Gold */
      color: #333333 !important;
      transform: scale(1.05);
      box-shadow: 0 0 8px rgba(184, 134, 11, 0.6), 0 0 16px rgba(184, 134, 11, 0.4);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Transition to grey glow when turning OFF Context Mode (switching to Precise Mode) */
    .plus-menu-dropdown.multimodal-agent-deactivating #multimodalAgentOption {
      background: linear-gradient(135deg, rgba(200, 200, 200, 0.85), rgba(180, 180, 180, 0.85)) !important;
      color: #333333 !important;
      transform: scale(1.05);
      box-shadow: 0 0 8px rgba(200, 200, 200, 0.6), 0 0 16px rgba(180, 180, 180, 0.4);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Message input container deactivating state - maintain orange during fade out */
    .message-input-container.multimodal-agent-deactivating {
      background: rgba(255, 140, 0, 0.1); /* subtle orange tint during fade */
      border-color: rgba(255, 140, 0, 0.3);
      box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.15), 0 0 8px rgba(255, 140, 0, 0.15);
      transition: all 0.3s ease;
    }

    .message-input-container.multimodal-agent-deactivating .message-input {
      color: #FFB366; /* maintain orange text during fade */
    }

    .message-input-container.multimodal-agent-deactivating .send-button {
      background: #FF8C00;
      color: #331a00;
      opacity: 0.8;
      transition: all 0.3s ease;
    }
    /* ── Mobile: bottom-sheet layout (≤48em / ≤768px) ── */
    @media (max-width: 48em) {
      .plus-menu-dropdown {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        min-width: 0;
        border-radius: 20px;
        padding: 10px;
        transform: translateY(calc(100% + 16px));
        max-height: 75dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 99999;
      }

      .plus-menu-dropdown.show {
        transform: translateY(0);
      }
    }

    /* ── Very small phones (≤23.5em / ≤375px) — tighten padding ── */
    @media (max-width: 23.5em) {
      .plus-menu-dropdown {
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
      }
      .plus-menu-item {
        height: 40px;
        padding: 0 14px;
        font-size: 12px;
      }
    }

    /* ── Tablet portrait (48.0625em–64em / iPad) — keep anchored dropdown, widen and cap ── */
    @media (min-width: 48.0625em) and (max-width: 64em) {
      .plus-menu-dropdown {
        min-width: min(280px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
        bottom: 52px; /* 44px button + 8px gap */
      }
    }

    /* ── Short landscape viewports — shrink sheet so it doesn't cover the screen ── */
    @media (max-width: 48em) and (max-height: 31.25em) and (orientation: landscape) {
      .plus-menu-dropdown {
        max-height: 85dvh;
      }
    }

    /* ── Reduced motion — drop slide/scale transitions ── */
    @media (prefers-reduced-motion: reduce) {
      .plus-menu-dropdown {
        transition: opacity 0.01ms;
        transform: none !important;
      }
      .plus-menu-dropdown.show {
        transform: none !important;
      }
    }

    /* ── Reduced transparency — opaque fallback, drop blur ── */
    @media (prefers-reduced-transparency: reduce) {
      .plus-menu-dropdown {
        background: rgb(18, 20, 26);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }

    /* Toast Container - DISABLED: All toast messages are hidden */
    /* Apple-Style Frosted Glass Toast Container */
    #toastContainer {
      display: none !important; /* Hide all toast messages */
      position: fixed;
      top: 44px;  /* Position below the banner */
      left: 50%;
      transform: translateX(-50%);
      flex-direction: column;
      align-items: center;
      gap: 5px;
      z-index: 999999;
      pointer-events: none;
      width: auto;
      max-width: 90vw;
    }

    /* Base Toast - Apple Frosted Glass Style - DISABLED */
    .toast {
      display: none !important; /* Hide all toast messages */
      align-items: center;
      background: rgba(24, 25, 36, 0.22); /* Translucent glass like mm_chat prompt bar */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #f5f5f7;
      padding: 14px 18px;
      border-radius: 13px;
      box-shadow: 0 0 30px rgba(24, 25, 36, 0.45);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "San Francisco", "Helvetica Neue", Helvetica, sans-serif;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1.4;
      opacity: 0;
      transform: translateY(-15px) scale(0.98);
      transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
      pointer-events: auto;
      width: auto;
      max-width: 380px;
      will-change: transform, opacity;
      cursor: default;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
    }

    /* Success Toast accent */
    .toast.success {
      box-shadow: 0 2px 14px rgba(0, 199, 190, 0.15), 0 0 0 0.5px rgba(0, 199, 190, 0.2);
      border-left: 3px solid rgba(0, 199, 190, 0.8);
    }

    @media (prefers-color-scheme: dark) {
      .toast.success {
        box-shadow: 0 2px 14px rgba(0, 199, 190, 0.25), 0 0 0 0.5px rgba(0, 199, 190, 0.3);
        color: #e6fffa;
      }
    }

    /* Error Toast accent */
    .toast.error {
      box-shadow: 0 2px 14px rgba(255, 59, 48, 0.15), 0 0 0 0.5px rgba(255, 59, 48, 0.2);
      border-left: 3px solid rgba(255, 59, 48, 0.8);
    }

    @media (prefers-color-scheme: dark) {
      .toast.error {
        box-shadow: 0 2px 14px rgba(255, 59, 48, 0.25), 0 0 0 0.5px rgba(255, 59, 48, 0.3);
        color: #ffebeb;
      }
    }

    /* Show the toast */
    .toast.showToast {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Hide with fade and slide up */
    .toast.hideToast {
      opacity: 0;
      transform: translateY(-15px) scale(0.98);
      transition: all 0.28s cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    /* Optional: Subtle Indicator Line - can be removed if color coding is sufficient */
    .toast::after {
      content: '';
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      height: 4px;
      width: 36px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }

    @media (prefers-color-scheme: dark) {
      .toast::after {
        background: rgba(255, 255, 255, 0.15);
      }
    }

    /* Close button */
    .toast-close {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: transparent;
      margin-left: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.5;
      transition: opacity 0.2s ease, background-color 0.2s ease;
      cursor: pointer;
      flex-shrink: 0;
    }

    .toast-close:hover {
      opacity: 0.8;
      background-color: rgba(0, 0, 0, 0.05);
    }

    @media (prefers-color-scheme: dark) {
      .toast-close:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }

    .toast-close::before,
    .toast-close::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 1px;
      background: currentColor;
    }

    .toast-close::before {
      transform: rotate(45deg);
    }

    .toast-close::after {
      transform: rotate(-45deg);
    }


    /* Enhanced placeholder for image generation moved to placeholders.css */
    /* All image generation placeholder styles moved to placeholders.css */

    /* Placeholder text styles moved to placeholders.css */

    /* Placeholder preview styles moved to placeholders.css */

    /* Special styling for 3D model placeholders - MATCH GENERATION PLACEHOLDER SIZING */
    .image-generation-placeholder.model-placeholder {
      /* Use the same sizing as generation placeholders for consistency */
      width: 600px; /* SAME as generation placeholders */
      max-width: 600px;
      min-height: 300px;
      background: #2a2a2a;
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin: 0 auto; /* Center within container */
    }

    /* Large screen adjustments for 3D model placeholders */
    @media (min-width: 1024px) {
      .image-generation-placeholder.model-placeholder {
        width: 800px; /* SAME as generation placeholders */
        max-width: 800px;
        min-height: 400px; /* Larger minimum height on big screens */
      }
    }

    /* Mobile adjustments for 3D model placeholders */
    @media (max-width: 768px) {
      .image-generation-placeholder.model-placeholder {
        width: 400px; /* SAME as generation placeholders */
        max-width: 400px;
        min-height: 200px;
      }
    }

    .image-generation-placeholder.model-placeholder .placeholder-preview {
      object-fit: contain;
      filter: blur(8px);
      opacity: 0.6;
    }

    .image-generation-placeholder.model-placeholder::before {
      background:
        radial-gradient(circle at 30% 20%, rgba(100, 150, 255, 0.4), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(80, 120, 255, 0.4), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(60, 100, 200, 0.3), transparent 50%);
    }

    .image-generation-placeholder.model-placeholder::after {
      background:
        radial-gradient(circle at 20% 70%, rgba(120, 180, 255, 0.3), transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(100, 140, 255, 0.3), transparent 50%);
    }

    @keyframes placeholder-glow {
      0%,100% {
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15);
      }
      50% {
        box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.35);
      }
    }

    @keyframes placeholder-flow {
      0%,100% {
        transform: scale(1);
        filter: blur(20px) brightness(1.2) saturate(1.4);
      }
      50% {
        transform: scale(1.05);
        filter: blur(20px) brightness(1.5) saturate(1.6);
      }
    }

    @keyframes model-placeholder-pulse {
      0%,100% {
        box-shadow: inset 0 0 20px rgba(100, 150, 255, 0.2);
      }
      50% {
        box-shadow: inset 0 0 40px rgba(100, 150, 255, 0.4);
      }
    }

    .image-generation-placeholder.model-placeholder {
      animation: model-placeholder-pulse 4s ease-in-out infinite;
    }

    /* 3D Model Retry Button Styling */
    .chat-model-container .retry-button,
    .chat-model-container [style*="RETRY DOWNLOAD"] {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      color: #ffffff !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      text-align: center !important;
      cursor: pointer !important;
      background: rgba(0, 0, 0, 0.7) !important;
      padding: 12px 20px !important;
      border-radius: 8px !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      backdrop-filter: blur(10px) !important;
      transition: all 0.3s ease !important;
      z-index: 10 !important;
      width: auto !important;
      height: auto !important;
      max-width: calc(100% - 40px) !important;
      word-wrap: break-word !important;
      /* Ensure proper centering by setting explicit positioning context */
      margin: 0 !important;
      line-height: 1.2 !important;
    }

    .chat-model-container .retry-button:hover,
    .chat-model-container [style*="RETRY DOWNLOAD"]:hover {
      background: rgba(0, 0, 0, 0.9) !important;
      border-color: rgba(255, 255, 255, 0.4) !important;
      transform: translate(-50%, -50%) scale(1.05) !important;
    }

    @keyframes latent-noise {
      0% { transform: translate(-3%, -3%) scale(1); }
      50% { transform: translate(3%, 2%) scale(1.06); }
      100% { transform: translate(-2%, 3%) scale(1); }
    }

    @keyframes latent-noise-2 {
      0% { transform: translate(2%, -2%) scale(1); }
      50% { transform: translate(-2%, 2%) scale(1.05); }
      100% { transform: translate(2%, -3%) scale(1); }
    }


    /* ================= AUTH CONSISTENCY PATCH =================
       Drop this after your existing CSS (combined.css).
       Goals:
       - Identical sizing & alignment for Google + Submit buttons
       - Same spacing on Sign In and Sign Up views
       - No layout jump when switching forms
       - Mobile-safe tweaks
    =========================================================== */

    /* 1) Normalize stacking + spacing on the auth block */
    .login-methods {
      display: grid !important;
      gap: 16px !important;
    }

    /* Keep header area from jumping when text changes */
    .login-header {
      display: grid;
      gap: 6px;
      min-height: 70px;           /* prevents layout shift when title/desc swap */
    }

    /* 2) Forms use the same grid + gaps */
    .login-form,
    #signupForm {
      display: grid !important;
      gap: 12px !important;
      margin: 0 !important;
    }

    /* Uniform groups */
    .login-form .form-group,
    #signupForm .form-group {
      display: grid;
      gap: 6px;
    }

    /* 3) Inputs consistent height & behavior */
    .login-form input,
    #signupForm input {
      height: 44px;               /* matches visual rhythm */
      line-height: 44px;          /* keeps cursor centered on Safari */
      padding: 0 14px;
      -webkit-appearance: none;
      appearance: none;
    }

    /* 4) Buttons — Google & Submit identical sizing */
    .social-login,
    .social-login .social-btn,
    .login-form .submit-btn,
    #signupForm .submit-btn {
      width: 100%;
    }

    .social-login .social-btn,
    .login-form .submit-btn,
    #signupForm .submit-btn {
      cursor: pointer;
    }


    .social-login { display: grid; }

    .social-login .social-btn,
    .login-form .submit-btn,
    #signupForm .submit-btn {
      height: 48px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      font-weight: 600;
      line-height: 1;             /* kills vertical drift */
      letter-spacing: -0.01em;
    }

    /* Keep Google icon perfectly aligned */
    .social-login .social-btn img {
      width: 20px;
      height: 20px;
      display: block;
      flex-shrink: 0;
    }

    /* Hover/active—rely on your existing colors; just keep motion consistent */
    .social-login .social-btn:hover,
    .login-form .submit-btn:hover,
    #signupForm .submit-btn:hover {
      transform: translateY(-1px);
    }
    .social-login .social-btn:active,
    .login-form .submit-btn:active,
    #signupForm .submit-btn:active {
      transform: translateY(0);
    }

    /* 5) Divider + Footer consistent on both forms */
    .login-divider { 
      margin: 8px 0 0 !important; 
    }

    .login-form .form-footer,
    #signupForm .form-footer {
      display: flex !important;
      justify-content: center !important;
      gap: 16px !important;
      margin-top: 4px !important;
      flex-wrap: wrap;
    }

    /* 6) Kill residual inline display styles when toggling views */
    #signupForm[style*="display: none"] { display: none !important; }
    #loginForm[style*="display: none"] { display: none !important; }

    /* 7) Keep modal width stable during toggle to avoid reflow */
    .login-modal {
      max-width: 700px;           /* same as your base */
      width: 90%;
    }

    /* ===== Layered Fade Close for Login Modal ===== */
    /* Overlay never uses display:none — we gate with visibility & pointer-events */
    .modal-overlay{
      opacity:0;
      visibility:hidden;          /* instead of display:none */
      pointer-events:none;
      transition: opacity .5s ease, visibility 0s linear .5s; /* delay hides visibility after fade */
    }

    .modal-overlay.active{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transition: opacity .5s ease; /* show immediately, no visibility delay */
    }

    /* keep the overlay visible during close so it can fade */
    .modal-overlay.closing{
      opacity:0;
      visibility:visible;         /* crucial: don't hide visibility yet */
      pointer-events:none;
    }

    /* modal panel: quicker fade/slide */
    .login-modal{
      opacity:0;
      transform: translateY(40px) scale(.96);
      transition: opacity .25s ease, transform .25s ease;
    }
    .modal-overlay.active .login-modal{
      opacity:1;
      transform: translateY(0) scale(1);
    }
    .modal-overlay.closing .login-modal{
      opacity:0;
      transform: translateY(40px) scale(.96);
    }



    /* 8) Error message unified spacing so it doesn't push buttons differently */
    #loginErrorMessage.error-message,
    .error-message {
      margin: 4px 0 0;
    }

    /* 9) Mobile tweaks */
    @media (max-width: 480px) {
      .social-login .social-btn,
      .login-form .submit-btn,
      #signupForm .submit-btn {
        height: 46px;
      }

      .login-form .form-footer,
      #signupForm .form-footer {
        gap: 12px;
      }

      .login-form input,
      #signupForm input {
        height: 42px;
        line-height: 42px;
      }
    }

    /* 10) High-contrast & reduced-motion inherit from your globals,
       but ensure no scale mismatch on hover in reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .social-login .social-btn:hover,
      .login-form .submit-btn:hover,
      #signupForm .submit-btn:hover {
        transform: none !important;
      }
    }

    /* === Prompt bar styling === */
    .message-input-container {
      position: relative;
      z-index: 9000; /* Ensure above inspirational prompt */
      /* Glass blur effect - matching freeform toolbar pills */
      background: rgba(5, 5, 5, 0.75);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border-radius: 32px;
      box-shadow: 0 0 8px rgba(100, 100, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.35);
      transition: box-shadow 0.4s ease, background 0.3s ease;
      overflow: visible; /* Ensure dropdown can appear above container */
      /* Force GPU compositing for blur */
      transform: translateZ(0);
      isolation: isolate;
    }

    /* Centered discrete spinner for prompt drop processing */
    .prompt-drop-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10001;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 12px;
      padding: 10px 12px;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }

    .prompt-drop-spinner.active { display: flex; }

    /* Quick image viewer overlay — single source of truth for previewing
       prompt-bar thumbnails. Glass backdrop + scale-in entrance, large
       media canvas, elegant rounded close. */
    .quick-image-viewer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(6, 8, 12, 0.78);
      backdrop-filter: blur(24px) saturate(140%);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100000;
      cursor: zoom-out;
      opacity: 0;
      transition: opacity 180ms ease;
    }

    .quick-image-viewer-overlay.active {
      display: flex;
      opacity: 1;
      animation: quickViewerOverlayFade 200ms ease-out;
    }

    @keyframes quickViewerOverlayFade {
      from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
      to   { opacity: 1; }
    }

    .quick-image-viewer-overlay img,
    .quick-image-viewer-overlay video {
      max-width: min(92vw, 1400px);
      max-height: 82vh;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                  0 0 0 1px rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      user-select: none;
      -webkit-user-drag: none;
      animation: quickViewerMediaIn 260ms cubic-bezier(0.16, 1, 0.3, 1);
      transform-origin: center center;
    }

    @keyframes quickViewerMediaIn {
      from { opacity: 0; transform: scale(0.94); }
      to   { opacity: 1; transform: scale(1); }
    }

    .quick-image-viewer-overlay .quick-viewer-media-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      cursor: default;
    }

    /* Frame wraps the image so the close X can be absolutely positioned
       relative to the image edges (not the viewport). The frame shrink-wraps
       to the image bounds via inline-block + reset line-height. */
    .quick-image-viewer-overlay .quick-viewer-media-frame {
      position: relative;
      display: inline-block;
      line-height: 0;
      max-width: 100%;
    }

    .quick-image-viewer-overlay .quick-viewer-media-frame img,
    .quick-image-viewer-overlay .quick-viewer-media-frame video {
      display: block;
    }

    /* Close X — pinned to the TOP-RIGHT CORNER OF THE IMAGE itself, not
       the viewport. Anchored via the .quick-viewer-media-frame wrapper
       (position: relative). Matches the standard Formas overlay-close
       visual: dark semi-transparent disc, blurred backdrop, white X. */
    .quick-image-viewer-overlay .quick-viewer-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 38px;
      height: 38px;
      background: rgba(0, 0, 0, 0.65);
      border: none;
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
      transition: background 180ms ease, transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 100010;
      padding: 0;
      line-height: 1;
    }

    .quick-image-viewer-overlay .quick-viewer-close:hover {
      background: rgba(0, 0, 0, 0.78);
      transform: scale(1.06);
    }

    .quick-image-viewer-overlay .quick-viewer-close:active {
      transform: scale(0.94);
    }

    .quick-image-viewer-overlay .quick-viewer-close svg {
      width: 20px;
      height: 20px;
      stroke: #fff;
      stroke-width: 2.4;
    }

    /* Action panel permanently disabled — preview modal is image-only. */
    .quick-image-viewer-overlay .quick-viewer-actions,
    .quick-image-viewer-overlay .quick-viewer-actions[hidden] {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .quick-image-viewer-overlay .quick-viewer-actions-legacy {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 24px;
      background: rgba(20, 20, 25, 0.95);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      margin-top: 16px;
      cursor: default;
      animation: quickViewerActionsSlideUp 0.3s ease-out;
    }

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

    .quick-viewer-action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: rgba(255, 255, 255, 0.9);
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 80px;
    }

    .quick-viewer-action-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateY(-2px);
    }

    .quick-viewer-action-btn:active {
      transform: translateY(0);
    }

    .quick-viewer-action-btn svg {
      opacity: 0.9;
    }

    .quick-viewer-action-btn span {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      opacity: 0.8;
    }

    /* Edit button - blue accent */
    .quick-viewer-edit:hover {
      background: rgba(59, 130, 246, 0.2);
      border-color: rgba(59, 130, 246, 0.5);
      color: #60a5fa;
    }
    .quick-viewer-edit:hover svg {
      stroke: #60a5fa;
    }

    /* Freeform button - purple accent */
    .quick-viewer-freeform:hover {
      background: rgba(147, 51, 234, 0.2);
      border-color: rgba(147, 51, 234, 0.5);
      color: #a78bfa;
    }
    .quick-viewer-freeform:hover svg {
      stroke: #a78bfa;
    }

    /* Remove button - red accent */
    .quick-viewer-remove:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(239, 68, 68, 0.5);
      color: #f87171;
    }
    .quick-viewer-remove:hover svg {
      stroke: #f87171;
    }

    /* Mobile responsive */
    @media (max-width: 640px) {
      .quick-image-viewer-overlay img,
      .quick-image-viewer-overlay video {
        max-width: 95vw;
        max-height: 55vh;
      }

      .quick-viewer-actions {
        gap: 8px;
        padding: 12px 16px;
      }

      .quick-viewer-action-btn {
        padding: 10px 14px;
        min-width: 70px;
      }

      .quick-viewer-action-btn svg {
        width: 18px;
        height: 18px;
      }

      .quick-viewer-action-btn span {
        font-size: 10px;
      }
    }

    .message-input-container:focus-within {
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 0 8px rgba(25, 163, 205, 0.5);
    }

    /* Drag and drop glow effect for prompt container */
    .message-input-container.drag-over-container {
      background: rgba(59, 130, 246, 0.15) !important;
      box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.5),
        0 0 25px rgba(59, 130, 246, 0.4),
        0 0 40px rgba(59, 130, 246, 0.2) !important;
      transform: scale(1.02);
      transition: all 0.2s ease;
      animation: promptContainerGlow 1.5s ease-in-out infinite;
    }

    @keyframes promptContainerGlow {
      0%, 100% {
        box-shadow: 
          0 0 0 3px rgba(59, 130, 246, 0.5),
          0 0 25px rgba(59, 130, 246, 0.4),
          0 0 40px rgba(59, 130, 246, 0.2);
      }
      50% {
        box-shadow: 
          0 0 0 3px rgba(59, 130, 246, 0.7),
          0 0 30px rgba(59, 130, 246, 0.6),
          0 0 50px rgba(59, 130, 246, 0.3);
      }
    }

    .message-input-container.drag-over-container::before {
      content: var(--formas-i18n-drop-prompt, 'Drop here to use as prompt');
      position: absolute;
      top: -35px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(59, 130, 246, 0.95);
      color: white;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      z-index: 10000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      pointer-events: none;
    }
    
    .message-input-container.drag-over-container {
      border: 2px dashed rgba(59, 130, 246, 0.5);
      background: rgba(59, 130, 246, 0.05);
      animation: promptContainerGlow 1.5s ease-in-out infinite;
    }

    /* === Darker Text Input & Enlarged Plus Button === */

    /* Text area inside prompt bar with soft blurred edges */
    .message-input {
      position: relative;
      background: transparent;
      border-radius: 28px;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
                  box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                  padding 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                  background 0.2s ease;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      height: 36px;
      flex: 1;
      min-height: 36px;
      max-height: 120px;
      padding: 0 16px;
      border: none;
      color: #fff;
      font-size: 16px;
      font-weight: 400;
      resize: none;
      outline: none;
      font-family: inherit;
      line-height: 1;
      cursor: text !important;
    }

    /* Fix autocomplete white background issue for message input */
    .message-input:-webkit-autofill,
    .message-input:-webkit-autofill:hover,
    .message-input:-webkit-autofill:focus,
    .message-input:-webkit-autofill:active {
      -webkit-background-clip: text;
      -webkit-text-fill-color: #fff !important;
      transition: background-color 5000s ease-in-out 0s;
      box-shadow: inset 0 0 20px 20px rgba(24, 25, 36, 0.22) !important;
      background-color: rgba(24, 25, 36, 0.22) !important;
      caret-color: #fff;
    }

    /* Global fix for all input and textarea autocomplete white backgrounds */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    textarea:-webkit-autofill:active {
      -webkit-text-fill-color: #fff !important;
      transition: background-color 5000s ease-in-out 0s;
      caret-color: #fff;
    }
    
    /* Ensure dark inputs don't show white autocomplete backgrounds */
    input[type="text"]:-webkit-autofill,
    input[type="email"]:-webkit-autofill,
    input[type="password"]:-webkit-autofill,
    input[type="search"]:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 30px rgba(24, 25, 36, 0.9) inset !important;
    }

    /* Expanded state when focused - override the later definition */
    .message-input:focus {
      white-space: pre-wrap !important;
      text-overflow: clip !important;
      overflow-y: auto !important;
      padding: 12px 16px !important;
      height: auto;
      min-height: 36px !important;
      max-height: 100px !important; /* Allow up to ~5 lines */
      align-items: flex-start !important;
      line-height: 1.4 !important;
      transform: translateY(0) !important;
      resize: none !important; /* Prevent manual resize */
      transition: height 0.2s ease !important; /* Smooth height transitions */
    }

    /* Collapsed state - perfect vertical centering - override later definitions */
    .message-input:not(:focus) {
      height: 36px;
      padding: 8px 16px !important;
      display: block !important;
      line-height: 20px !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      vertical-align: top !important;
      box-sizing: border-box !important;
      text-align: left !important;
    }

    .message-input::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 28px;
      box-shadow: 0 0 30px rgba(24, 25, 36, 0.45);
      filter: blur(15px);
      pointer-events: none;
      z-index: -1;
    }

    /* When focusing inside the prompt bar */
    .message-input-container:focus-within {
      background: rgba(0, 0, 0, 0.3); /* dims container 30% */
      box-shadow: 0 0 8px rgba(25, 163, 205, 0.5);
    }

    .message-input-container:focus-within .message-input {
      background: transparent; /* keep transparent */
    }

    .message-input-container:focus-within .message-input::before {
      box-shadow: 0 0 30px rgba(24, 25, 36, 0.45);
      filter: blur(15px);
    }

    /* Plus menu button - sized for visibility */
    .plus-menu-btn {
      width: 51px;
      height: 51px;
      border-radius: 50%;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .plus-menu-btn:hover {
      background: #565869;
      transform: scale(1.1);
    }

    /* Make text not selectable while dragging */
    .no-select { user-select: none !important; }

    /* Desktop-only panel toggle arrow visibility handled by topbar.css + JS (single source of truth). */

    /* Desktop-only: keep a small tab visible when collapsed */
    @media (min-width: 769px) {
      /* Base variables */
      .generations-panel {
        --drag-tab-expose: 4px; /* visible sliver for the tab when collapsed */
      }

      /* Override closed transform so the tab is reachable */
      .generations-panel:not(.open) {
        transform: translateX(calc(var(--capsule-panel-width) - var(--drag-tab-expose)));
      }

      /* Single tab that lives on the panel's left edge */
        .panel-drag-tab {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(-100%, -50%); /* hang outside the panel */
          width: var(--drag-tab-expose);
          height: 60px;
          cursor: ew-resize;
          z-index: 150000 !important; /* Above everything including topbar and notifications */
          touch-action: none;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 2px 0 0 2px;
          transition: all 0.2s ease;
          display: none; /* Hidden by default, shown by JS */
          pointer-events: auto; /* Ensure it can receive mouse events */
          /* Add visual indicator for resize functionality */
          border-left: 2px solid rgba(245, 166, 35, 0.6);
        }
        
        .panel-drag-tab:hover {
          background: rgba(255, 255, 255, 0.6);
          width: calc(var(--drag-tab-expose) + 2px);
          border-left-color: rgba(245, 166, 35, 0.9);
          box-shadow: 0 0 8px rgba(245, 166, 35, 0.3);
        }

        .panel-drag-tab:active {
          background: rgba(255, 255, 255, 0.8);
          border-left-color: rgba(245, 166, 35, 1);
          box-shadow: 0 0 12px rgba(245, 166, 35, 0.5);
        }
    }

    .generations-panel.resizing {
      box-shadow: -4px 0 35px rgba(245, 166, 35, 0.4);
      border-left: 2px solid rgba(245, 166, 35, 0.8);
      z-index: 150000 !important; /* Above everything including topbar and notifications */
    }

    /* Mobile drag tab styles */
    @media (max-width: 768px) {
      .panel-drag-tab {
        left: -3px;
        width: 3px;
        height: 40px;
        z-index: 1000;
      }
      
      .panel-drag-tab:hover {
        width: 4px;
      }
    }

    /* Header look */
    .mm-window-header { cursor: grab; user-select: none; }
    .mm-window.dragging .mm-window-header { cursor: grabbing; }

    /* Prevent accidental text selection while dragging */
    body.mm-dragging { user-select: none !important; }

    /* Drag hint animations */
    .drag-hint {
      position: absolute;
      top: 50%;
      left: -140px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 150001;
      pointer-events: none;
      opacity: 0;
      animation: dragHintSequence 6s ease-in-out forwards;
      background: rgba(0, 0, 0, 0.9);
      padding: 10px 14px;
      border-radius: 8px;
      border: 2px solid rgba(245, 166, 35, 0.6);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    .drag-hint img {
      width: 20px !important;
      height: 20px !important;
      filter: brightness(1.2) saturate(1.3) !important;
      animation: dragIconSpin 0.8s ease-in-out infinite !important;
      transform-origin: center !important;
    }

    .drag-hint-text {
      color: #ffffff !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      white-space: nowrap !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
      letter-spacing: 0.5px !important;
      animation: dragTextPulse 0.8s ease-in-out infinite !important;
      transform-origin: center !important;
    }

    @keyframes dragHintSequence {
      0% { 
        opacity: 0; 
        transform: translateY(-50%) scale(0.8);
      }
      8% { 
        opacity: 1; 
        transform: translateY(-50%) scale(1);
      }
      16% { 
        opacity: 0; 
        transform: translateY(-50%) scale(0.9);
      }
      24% { 
        opacity: 1; 
        transform: translateY(-50%) scale(1);
      }
      32% { 
        opacity: 0; 
        transform: translateY(-50%) scale(0.9);
      }
      40% { 
        opacity: 1; 
        transform: translateY(-50%) scale(1);
      }
      48% { 
        opacity: 0; 
        transform: translateY(-50%) scale(0.9);
      }
      56% { 
        opacity: 1; 
        transform: translateY(-50%) scale(1);
      }
      70% { 
        opacity: 1; 
        transform: translateY(-50%) scale(1);
      }
      100% { 
        opacity: 0; 
        transform: translateY(-50%) scale(0.8);
      }
    }
    @keyframes dragIconSpin {
      0% { 
        transform: rotate(0deg) scale(1); 
        filter: brightness(1.2) saturate(1.3);
      }
      25% { 
        transform: rotate(-15deg) scale(1.2); 
        filter: brightness(1.5) saturate(1.5);
      }
      50% { 
        transform: rotate(0deg) scale(1); 
        filter: brightness(1.2) saturate(1.3);
      }
      75% { 
        transform: rotate(15deg) scale(1.2); 
        filter: brightness(1.5) saturate(1.5);
      }
      100% { 
        transform: rotate(0deg) scale(1); 
        filter: brightness(1.2) saturate(1.3);
      }
    }

    @keyframes dragTextPulse {
      0% { 
        opacity: 0.7; 
        transform: scale(0.95);
        color: #ffffff;
      }
      50% { 
        opacity: 1; 
        transform: scale(1.1);
        color: #4a9eff;
      }
      100% { 
        opacity: 0.7; 
        transform: scale(0.95);
        color: #ffffff;
      }
    }

    /* Slash command dropdown */
    .command-dropdown {
      position: absolute;
      bottom: 100%;
      left: 0;
      margin-bottom: 8px;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      z-index: 9999;
      padding: 4px 0;
      display: flex;
      flex-direction: column-reverse;
      font-family: 'Roboto', sans-serif;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
      color: #f0f0f0;
      max-height: 320px;
      overflow-y: auto;
    }

    .command-dropdown.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .command-dropdown .command-option {
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 4px;
      margin: 2px 4px;
      transition: background 0.15s ease;
    }

    .command-dropdown .command-option:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .command-dropdown .command-option.unavailable {
      opacity: 0.5; /* keep dimmed look */
      pointer-events: auto; /* allow clicking to create grey pill */
    }

    #slashCommandDropdown {
      display: flex;
      flex-direction: column-reverse;
    }

    #slashCommandDropdown .slash-command-option.unavailable {
      opacity: 0.5; /* keep dimmed look */
      pointer-events: auto; /* allow clicking to create grey pill */
    }

    .command-dropdown .command-name {
      font-weight: 500;
      color: #fff;
    }

    .command-dropdown .command-desc {
      font-size: 11px;
      font-style: italic;
      color: rgba(255, 255, 255, 0.7);
    }

    /* Command dropdown scrollbar styling */
    .command-dropdown::-webkit-scrollbar {
      width: 6px;
    }

    .command-dropdown::-webkit-scrollbar-track {
      background: transparent;
    }

    .command-dropdown::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      transition: background-color 0.3s ease;
    }

    .command-dropdown::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.4);
    }

    /* ================= MOBILE KEYBOARD RESPONSIVE FIX ================= */

    /* Use dynamic viewport units for better mobile support */
    :root {
      /* Use the smaller of vh or svh for consistent behavior */
      --app-height: 100vh;
      --app-height-small: 100svh; /* Small viewport height - excludes keyboard */
      --app-height-dynamic: 100dvh; /* Dynamic viewport height */
      
      /* Safe area insets for notched devices */
      --safe-area-top: env(safe-area-inset-top, 0);
      --safe-area-bottom: env(safe-area-inset-bottom, 0);
      --safe-area-left: env(safe-area-inset-left, 0);
      --safe-area-right: env(safe-area-inset-right, 0);
    }

    /* Update body to use dynamic height */
    body {
      height: var(--app-height);
      height: var(--app-height-dynamic);
      min-height: var(--app-height);
      min-height: var(--app-height-dynamic);
      overflow: hidden;
      position: relative;
    }

    /* Main content container adjustments */
    .main-content {
      height: var(--app-height);
      height: var(--app-height-dynamic);
      min-height: var(--app-height);
      min-height: var(--app-height-dynamic);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Chat container flex adjustments */
    .chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0; /* Important for flex child */
      position: relative;
      overflow: hidden;
    }

    /* Chat messages area — layout & padding defined in chat.css.
       Only set height overrides here. */
    .chat-messages {
      height: auto;
      min-height: 0;
    }

    /* Input section - desktop override (positioning only; base styles in primary .input-section) */
    .input-section {
      position: absolute;
      padding: 16px;
      padding-bottom: calc(16px + var(--safe-area-bottom));
      transform: translateZ(0);
    }
    
    /* Focused state - frosted band appears */
    .input-section:focus-within {
      background: rgba(10, 12, 18, 0.32);
      backdrop-filter: blur(34px) saturate(140%);
      -webkit-backdrop-filter: blur(34px) saturate(140%);
      border-top: 1px solid var(--border-subtle);
    }

    /* Mobile-specific adjustments */
    @media (max-width: 768px) {
      /* Use small viewport height on mobile */
      :root {
        --app-height: 100svh;
      }
      
      body {
        height: 100svh;
        min-height: 100svh;
        /* Prevent bounce scrolling */
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
      }
      
      .main-content {
        height: 100svh;
        min-height: 100svh;
      }
      
      .chat-container {
        height: calc(100svh - 50px); /* Subtract header height */
        min-height: calc(100svh - 50px);
      }
      
      .chat-messages {
        /* Tighter side padding on mobile; bottom padding managed by JS */
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      
      /* Mobile input section override (positioning + padding only; base styles inherited) */
      .input-section {
        position: fixed;
        padding: 12px;
        padding-bottom: calc(12px + var(--safe-area-bottom));
        transform: translateY(0);
      }
      
      /* When keyboard is open, adjust container */
      .input-section.keyboard-open {
        /* Stay at visual bottom */
        bottom: 0;
        position: fixed;
      }
      
      /* Adjust chat messages when keyboard is open */
      .chat-messages.keyboard-open {
        padding-bottom: var(--chat-bottom-pad, 80px);
      }
    }

    /* iPad specific adjustments */
    @media (min-width: 769px) and (max-width: 1024px) {
      .input-section {
        padding: 16px;
        padding-bottom: calc(16px + var(--safe-area-bottom));
      }
    }

    /* Viewport height fallback for older browsers */
    @supports not (height: 100svh) {
      body {
        height: 100vh;
        min-height: 100vh;
      }
      
      .main-content {
        height: 100vh;
        min-height: 100vh;
      }
      
      @media (max-width: 768px) {
        .chat-container {
          height: calc(100vh - 50px);
          min-height: calc(100vh - 50px);
        }
      }
    }

    /* Prevent grey bands and overflow issues */
    html {
      overflow: hidden;
      height: 100%;
      /* Prevent zoom on input focus */
      -webkit-text-size-adjust: 100%;
    }

    html, body {
      /* Prevent overscroll bounce */
      overscroll-behavior: none;
      /* Ensure no margins/padding create grey bands */
      margin: 0;
      padding: 0;
    }

    /* Message input adjustments for mobile */
    @media (max-width: 768px) {
      .message-input-container {
        /* Ensure proper mobile styling */
        min-width:768;
        border-radius: 24px;
        padding: 6px;
         width: 100%;
      box-sizing: border-box;
      }
      
      .message-input {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 10px 12px;
        border-radius: 20px;
        /* Prevent keyboard from causing issues */
        transform: translateZ(0);
      }
      
      /* Mobile-specific focus state with smaller max height */
      .message-input:focus {
        max-height: 140px !important; /* Slightly smaller on mobile */
      }
      
      /* 🎯 Mobile: Both buttons same size for symmetry */
      .send-button {
        width: 44px;
        height: 44px;
        border-radius: 50%;
      }

      .plus-menu-btn {
        width: 47px;
        height: 47px;
        border-radius: 50%;
      }
    }

    /* ================= INTERACTION FIXES - FORCE CLICKABILITY ================= */
    
    /* Force all interactive elements to be clickable */
    .generations-search,
    .generation-item,
    .capsule-image,
    .capsule-image img,
    .capsule-image video,
    .generations-close,
    .generations-panel {
      pointer-events: auto !important;
    }
    
    /* Ensure proper cursor for interactive elements */
    .generation-item,
    .capsule-image,
    .capsule-image img,
    .capsule-image video {
      cursor: pointer !important;
    }
    
    .generations-search {
      cursor: text !important;
    }
    
    /* Override any blocking overlays */
    .project-loading,
    .project-loading.active {
      pointer-events: none !important;
    }
    
    /* ================= MOBILE INPUT CENTERING FIX ================= */

/* Fix off-center message input on mobile */
@media (max-width: 768px) {
  .input-section {
    /* Override any desktop positioning */
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
  }
  
  .input-container {
    transform: none !important; /* Remove any desktop transforms */
    margin: 0 auto; /* Center the container */
    padding: 0 12px; /* Symmetric horizontal padding */
    max-width: 100%; /* Full width available */
    width: 100%; /* Ensure full width */
    box-sizing: border-box;
    left: auto !important; /* Reset any positioning */
    right: auto !important; /* Reset any positioning */
  }
  
  .message-input-container {
    margin: 0; /* Remove auto margins that might cause issues */
    padding: 6px; /* Uniform padding */
    width: 100%; /* Full width of parent */
    box-sizing: border-box;
    transform: none !important; /* Remove any transforms */
  }
}  
      /* Ensure input section stays at bottom */
      body.input-focused .input-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2400;
      }
      
      /* Adjust chat container when input is focused */
      body.input-focused .chat-container {
        padding-bottom: 0;
      }
      
      body.input-focused .chat-messages {
        max-height: calc(100svh - 140px); /* Account for header + input */
        /* padding-bottom managed by JS via --chat-bottom-pad */
      }
    

    /* Generations panel mobile adjustments */
    @media (max-width: 768px) {
      .generations-panel {
        /* Ensure it doesn't interfere with keyboard */
        height: 100svh;
        max-height: 100svh;
        /* Ensure it appears above the prompt bar on mobile */
        z-index: 2500 !important;
      }

      /* Generations header/search visuals are owned by topbar.css (single source of truth). */
.generations-list {
        /* Proper mobile scrolling */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
    }

    /* Landscape mobile adjustments */
    @media (max-width: 768px) and (orientation: landscape) {
      .input-section {
        padding: 8px;
        padding-bottom: calc(8px + var(--safe-area-bottom));
      }
      
      .message-input-container {
        padding: 4px;
      }
    }

    /* PWA-specific adjustments */
    @media (display-mode: standalone) {
      /* When running as PWA, ensure proper viewport handling */
      body {
        height: 100vh;
        min-height: 100vh;
      }
      
      @media (max-width: 768px) {
        body {
          height: 100svh;
          min-height: 100svh;
        }
        
        .main-content {
          height: 100svh;
          min-height: 100svh;
        }
      }
    }

    /* ================= CHAT SPACING ================= */
    /* padding-bottom is dynamically set by JS via --chat-bottom-pad variable.
       See handleViewportChange() in mm_utils.js — single source of truth. */

    /* Desktop input section — padding override only; base styles inherited */
    @media (min-width: 769px) {
      .input-section {
        padding: 20px;
      }

      /* Focused state - frosted band appears */
      .input-section:focus-within {
        background: rgba(10, 12, 18, 0.32);
        backdrop-filter: blur(34px) saturate(140%);
        -webkit-backdrop-filter: blur(34px) saturate(140%);
        border-top: 1px solid var(--border-subtle);
      }

      /* Keep input centered regardless of side panels */
      .main-content.sidebar-open .input-section,
      .main-content.generations-open .input-section,
      .main-content.sidebar-open.generations-open .input-section {
        left: 0;
        right: 0;
      }
    }

    /* Mobile spacing */
    @media (max-width: 768px) {
      .input-section {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2400 !important;
        padding: 12px;
        padding-bottom: calc(12px + var(--safe-area-bottom));
        /* No backdrop-filter on parent - let the pill handle its own blur */
        background: rgba(0, 0, 0, 0) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Smooth transitions for blur and background */
        transition: backdrop-filter 0.4s ease, 
                    -webkit-backdrop-filter 0.4s ease,
                    background 0.4s ease,
                    opacity 0.5s ease 0.5s !important; /* 0.5s fade-in after 0.5s delay */
        /* Start hidden */
        opacity: 0;
        visibility: hidden;
        animation: fadeInPromptBar 0.5s ease 0.5s forwards; /* 0.5s delay, then 0.5s fade-in */
      }
      
      /* Focused state - frosted band appears */
      .input-section:focus-within {
        background: rgba(10, 12, 18, 0.32) !important;
        backdrop-filter: blur(34px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(34px) saturate(140%) !important;
      }
    }

    /* Toast notification styles - Modern Flat Pill */
    .generation-toast {
      position: fixed;
      top: calc(var(--topbar-height, 70px) + 24px);
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: rgba(255, 255, 255, 0.72);
      border: none;
      border-radius: 100px;
      padding: 10px 20px 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      z-index: 10000100; 
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      opacity: 0;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
      max-width: 90vw;
    }

    .generation-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .generation-toast .toast-avatar {
      width: 18px;
      height: 18px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      flex-shrink: 0;
    }

    .generation-toast .toast-avatar img {
      width: 16px;
      height: 16px;
      opacity: 1;
      filter: invert(1) brightness(0.15);
    }

    .generation-toast .toast-avatar span {
      font-size: 15px !important;
      filter: grayscale(1) brightness(0.2);
    }

    .generation-toast .toast-message {
      color: rgba(0, 0, 0, 0.85);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .generation-toast {
        top: calc(var(--topbar-height-mobile, 56px) + 24px);
        left: 50%;
        right: auto;
        max-width: calc(100% - 32px);
        padding: 10px 18px 10px 14px;
      }
      
      .generation-toast .toast-avatar {
        width: 16px;
        height: 16px;
      }
      
      .generation-toast .toast-message {
        font-size: 12px;
      }

    }

    /* ================= PROMPT CONTAINER CENTERING FIX ================= */

    /* Update the input section to have full-width background but centered content */
    .input-section {
      position: fixed; /* Keep fixed to span full viewport width */
      bottom: 0;
      left: 0;
      right: 0;
      width: 100vw; /* Full viewport width for background */
      /* No backdrop-filter on parent - let the pill handle its own blur */
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(0, 0, 0, 0);
      border-top: 1px solid transparent;
      z-index: 2400;
      padding: 20px 0; /* Remove horizontal padding from section */
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      /* Smooth transitions for blur and background */
      transition: backdrop-filter 0.4s ease, 
                  -webkit-backdrop-filter 0.4s ease,
                  background 0.4s ease,
                  border-top-color 0.4s ease,
                  opacity 0.5s ease 0.5s; /* 0.5s fade-in after 0.5s delay */
      /* Start hidden */
      opacity: 0;
      visibility: hidden;
      animation: fadeInPromptBar 0.5s ease 0.5s forwards; /* 0.5s delay, then 0.5s fade-in */
    }
    
    /* Focused state - frosted band appears */
    .input-section:focus-within {
      backdrop-filter: blur(34px) saturate(140%);
      -webkit-backdrop-filter: blur(34px) saturate(140%);
      background: rgba(10, 12, 18, 0.32);
      border-top: 1px solid var(--border-subtle);
    }

    /* ================= NO PROJECT STATE - ALWAYS BOTTOM ================= */
    
    /* REMOVED: No more centered positioning - prompt bar ALWAYS stays at bottom */
    .input-section.no-project {
      /* Keep same bottom positioning as normal state */
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      transform: none;
      /* No backdrop-filter on parent - let the pill handle its own blur */
      background: rgba(0, 0, 0, 0) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-top: 1px solid transparent !important;
      padding: 20px 0;
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      /* Smooth transitions for blur and background */
      transition: backdrop-filter 0.4s ease, 
                  -webkit-backdrop-filter 0.4s ease,
                  background 0.4s ease,
                  border-top-color 0.4s ease;
    }
    
    /* Focused state for no-project - frosted band appears */
    .input-section.no-project:focus-within {
      background: rgba(10, 12, 18, 0.32) !important;
      backdrop-filter: blur(34px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(34px) saturate(140%) !important;
      border-top: 1px solid var(--border-subtle) !important;
    }

    /* Keep normal styling for input containers */
    .input-section.no-project .message-input-container {
      transition: all 0.3s ease;
    }

    /* Keep normal input styling */
    .input-section.no-project .message-input {
      transition: all 0.3s ease;
    }

    /* Keep normal blur effect */
    .input-section.no-project .message-input::before {
      transition: opacity 0.3s ease;
    }

    /* No-project transition animation is set inline by JS when needed.
       Do NOT set a global padding-bottom transition here — it slows down all padding adjustments. */

    /* Start completely invisible and only show when positioned */
    .input-section {
      opacity: 0;
      /* No backdrop-filter on parent - let the pill handle its own blur */
      background: rgba(0, 0, 0, 0);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-top: 1px solid transparent;
      /* Smooth transitions */
      transition: opacity 0.5s ease 0.5s, /* 0.5s fade-in after 0.5s delay */
                  backdrop-filter 0.4s ease,
                  -webkit-backdrop-filter 0.4s ease,
                  background 0.4s ease,
                  border-top-color 0.4s ease;
      /* Prevent layout shift by keeping space */
      visibility: hidden;
      animation: fadeInPromptBar 0.5s ease 0.5s forwards; /* 0.5s delay, then 0.5s fade-in */
    }
    
    /* Focused state - frosted band appears */
    .input-section:focus-within {
      backdrop-filter: blur(34px) saturate(140%);
      -webkit-backdrop-filter: blur(34px) saturate(140%);
      background: rgba(10, 12, 18, 0.32);
      border-top: 1px solid var(--border-subtle);
    }
    
    /* Show input section when in no-project (centered) state */
    .input-section.no-project {
      opacity: 1;
      /* No backdrop-filter on parent - let the pill handle its own blur */
      background: rgba(0, 0, 0, 0);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-top: 1px solid transparent;
      transition: opacity 0.5s ease-in-out,
                  backdrop-filter 0.4s ease,
                  -webkit-backdrop-filter 0.4s ease,
                  background 0.4s ease,
                  border-top-color 0.4s ease;
    }
    
    /* Focused state for no-project input section */
    .input-section.no-project:focus-within {
      background: rgba(10, 12, 18, 0.32);
      backdrop-filter: blur(34px) saturate(140%);
      -webkit-backdrop-filter: blur(34px) saturate(140%);
      border-top: 1px solid var(--border-subtle);
    }
    
    /* Ensure inspirational prompts are visible when input section is visible */
    .input-section.visible .inspirational-prompt,
    .input-section.no-project .inspirational-prompt {
      z-index: 1; /* Keep well below menus/overlays */
    }
    
    /* Show input section when transitioning or has project - always visible after first show */
    .input-section.visible {
      opacity: 1;
      /* No backdrop-filter on parent - let the pill handle its own blur */
      background: rgba(0, 0, 0, 0);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-top: 1px solid transparent;
      /* Smooth transitions - must be included since .visible has higher specificity */
      transition: opacity 0.5s ease-in-out,
                  backdrop-filter 0.4s ease,
                  -webkit-backdrop-filter 0.4s ease,
                  background 0.4s ease,
                  border-top-color 0.4s ease;
    }
    
    /* Focused state for visible input section */
    .input-section.visible:focus-within {
      background: rgba(10, 12, 18, 0.32);
      backdrop-filter: blur(34px) saturate(140%);
      -webkit-backdrop-filter: blur(34px) saturate(140%);
      border-top: 1px solid var(--border-subtle);
    }

    /* ================= INSPIRATIONAL PROMPTS ================= */
    
    /* Wrapper provides stable centering + prevents "fly-in" on quote changes */
    .inspirational-prompt-wrapper {
      position: fixed;
      left: 50%;
      transform: translateX(-50%) rotate(0deg);
      transform-origin: center center;
      transition: opacity 0.2s ease !important; /* never animate left/transform */
      will-change: opacity;
      pointer-events: none;
    }
    
    /* Inspirational prompt text - positioned by wrapper */
    .inspirational-prompt {
      display: inline-block;
      font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 22px; /* 10% smaller than 24px (was 24px) */
      font-weight: 400;
      color: rgb(180, 180, 180);
      text-align: center;
      opacity: 0;
      transition: opacity 0.35s ease-in-out;
      pointer-events: none;
      white-space: nowrap;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      /* Guardrail: never rotate/slide-in due to other transforms */
      transform: none !important;
      animation: none !important;
    }
    
    /* Desktop centering adjustments based on sidebar/capsules states */
    @media (min-width: 769px) {
      /* Sidebar open: shift right by half of sidebar width */
      .main-content.sidebar-open ~ .input-section .inspirational-prompt-wrapper,
      .sidebar.open ~ .main-content .input-section .inspirational-prompt-wrapper {
        left: calc(50% + var(--sidebar-width) / 2);
      }

      /* Generations/capsules panel open: shift left by half of panel width */
      .main-content.generations-open .input-section .inspirational-prompt-wrapper,
      .main-content.generations-open ~ .input-section .inspirational-prompt-wrapper {
        left: calc(50% + var(--capsule-panel-width) / -2);
      }

      /* Both panels open: net shift */
      .main-content.sidebar-open.generations-open .input-section .inspirational-prompt-wrapper,
      .sidebar.open ~ .main-content.generations-open .input-section .inspirational-prompt-wrapper,
      .main-content.sidebar-open.generations-open ~ .input-section .inspirational-prompt-wrapper {
        left: calc(50% + (var(--sidebar-width) - var(--capsule-panel-width)) / 2);
      }
    }
    
    /* Adjust for mm_capsules banner when present */
    body.has-capsules-banner .inspirational-prompt-wrapper {
      bottom: 130px; /* Move up further when banner is present (95px + 35px banner height) */
    }

    .inspirational-prompt.visible {
      opacity: 1;
    }

    /* Enable interactions with highlighted commands on tablet/desktop only */
    @media (min-width: 481px) {
      .inspirational-prompt {
        pointer-events: auto;
      }
    }

    /* Define shine keyframes before usage */
    @keyframes shine {
      0% {
        background-position: -200% 0;
      }
      100% {
        background-position: 200% 0;
      }
    }

    /* Shining effect animation */
    .inspirational-prompt.shining {
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 1) 25%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 1) 75%,
        rgba(255, 255, 255, 0.9) 100%
      );
      background-size: 200% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shine 2s ease-in-out;
    }


    /* Only show inspirational prompt when in no-project state */
    .input-section:not(.no-project) .inspirational-prompt {
      display: none;
    }

    /* TEMPORARY: Show inspirational prompts even when project is active for testing */
    .input-section .inspirational-prompt {
      display: block !important;
    }

    /* Highlighted words within inspirational prompts (asterisk-wrapped text) */
    .inspirational-prompt .prompt-highlight {
      color: #F5B700; /* Bright golden color */
      font-weight: 600;
      text-shadow: 
        0 0 8px rgba(245, 183, 0, 0.6),
        0 0 16px rgba(245, 183, 0, 0.4),
        0 0 24px rgba(245, 183, 0, 0.2);
      background: linear-gradient(135deg, #F5B700, #FF7043);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: highlightGlow 2s ease-in-out infinite alternate;
      cursor: pointer; /* Indicate clickable command on desktop/tablet */
      pointer-events: auto; /* Allow clicks even if parent disables pointer events */
    }

    /* Glowing animation for highlighted words */
    @keyframes highlightGlow {
      0% {
        text-shadow: 
          0 0 8px rgba(245, 183, 0, 0.6),
          0 0 16px rgba(245, 183, 0, 0.4),
          0 0 24px rgba(245, 183, 0, 0.2);
      }
      100% {
        text-shadow: 
          0 0 12px rgba(245, 183, 0, 0.8),
          0 0 20px rgba(245, 183, 0, 0.6),
          0 0 30px rgba(245, 183, 0, 0.4);
      }
    }

    /* Golden styling for highlighted words in explicit mode (non-multimodal) */
    .message-input-container:not(.multimodal-agent-active):not(.multimodal-agent-deactivating) .inspirational-prompt .prompt-highlight {
      color: #F5B700 !important; /* Golden color */
      text-shadow: 
        0 0 8px rgba(245, 183, 0, 0.6),
        0 0 16px rgba(245, 183, 0, 0.4),
        0 0 24px rgba(245, 183, 0, 0.2) !important;
    }

    /* Force gold highlights - overrides container-based styling */
    .inspirational-prompt.force-blue-highlights .prompt-highlight {
      color: #F5B700 !important; /* Golden color */
      text-shadow: 
        0 0 8px rgba(245, 183, 0, 0.6),
        0 0 16px rgba(245, 183, 0, 0.4),
        0 0 24px rgba(245, 183, 0, 0.2) !important;
      background: linear-gradient(135deg, #FFD700, #FFA500) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }

    /* Force gold highlights - overrides container-based styling */
    .inspirational-prompt.force-gold-highlights .prompt-highlight {
      color: #F5B700 !important; /* Bright golden color */
      text-shadow: 
        0 0 8px rgba(245, 183, 0, 0.6),
        0 0 16px rgba(245, 183, 0, 0.4),
        0 0 24px rgba(245, 183, 0, 0.2) !important;
      background: linear-gradient(135deg, #F5B700, #FF7043) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }

    /* Fade out animation for inspirational prompt when thumbnail is dropped */
    .inspirational-prompt.fade-out {
      animation: fadeOutInspiration 0.5s ease-out forwards;
    }

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


    /* Golden glowing animation for explicit mode */
    @keyframes highlightGlowGold {
      0% {
        text-shadow: 
          0 0 8px rgba(245, 183, 0, 0.6),
          0 0 16px rgba(245, 183, 0, 0.4),
          0 0 24px rgba(245, 183, 0, 0.2) !important;
      }
      100% {
        text-shadow: 
          0 0 12px rgba(245, 183, 0, 0.8),
          0 0 20px rgba(245, 183, 0, 0.6),
          0 0 30px rgba(245, 183, 0, 0.4) !important;
      }
    }

    /* Mobile adjustments for no-project state */
    @media (max-width: 768px) {
      .input-section.no-project {
        padding: 12px;
        /* ALWAYS BOTTOM - no top positioning */
        bottom: 0 !important;
        transform: none !important;
      }

      /* Mobile inspirational prompt adjustments */
      .inspirational-prompt {
        position: fixed !important; /* Ensure fixed positioning on mobile */
        left: 50% !important; /* Center on full screen width for mobile */
        font-size: 14px !important; /* 10% smaller (was 16px, now ~14px) */
        bottom: 75px !important; /* 25px lower (was 100px) */
        white-space: normal !important; /* Allow text wrapping */
        max-width: 90vw; /* Limit width to 90% of viewport */
        line-height: 1.3; /* Better line spacing for multi-line */
        padding: 0 20px; /* Add some horizontal padding */
        will-change: transform, opacity; /* Hint for smoother animation */
        transform: translateX(-50%) !important; /* Stable initial centering */
        transform-origin: center center;
      }

      /* Classy slide-up fade-in when the prompt becomes visible */
      .inspirational-prompt.visible {
        animation: mobilePromptRiseIn 600ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
      }

      @keyframes mobilePromptRiseIn {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(14px) rotate(0deg); /* no sideways/rotation surprises */
          filter: blur(1px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0) rotate(0deg);
          filter: blur(0);
        }
      }

      /* Mobile shine effect - ensure it works on mobile browsers */
      .inspirational-prompt.shining {
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.9) 0%,
          rgba(255, 255, 255, 1) 25%,
          rgba(255, 255, 255, 0.9) 50%,
          rgba(255, 255, 255, 1) 75%,
          rgba(255, 255, 255, 0.9) 100%
        ) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important; /* Fallback for browsers that don't support background-clip */
        animation: shine 2s ease-in-out !important;
      }
    }

    /* Center the input container within the available chat space */
    .input-container {
      max-width: 90vw; /* Default: 90% of viewport width when no panels are open */
      margin: 0 auto;
      position: relative;
      width: 100%;
      padding: 0 20px; /* Add horizontal padding to the container */
      box-sizing: border-box;
      /* Calculate the centering based on visible chat area */
    }

    /* Desktop adjustments for sidebar states */
    @media (min-width: 769px) {
      /* Calculate center position based on visible chat area */
      .input-container {
        /* Default centering within full viewport */
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* When sidebar is open, shift container to center within visible area */
      .main-content.sidebar-open ~ .input-section .input-container,
      .sidebar.open ~ .main-content .input-section .input-container {
        transform: translateX(calc(var(--sidebar-width) / 2));
        max-width: calc(0.9 * (100vw - var(--sidebar-width))); /* 90% of available chat space */
      }
      
      /* When generations panel is open, shift container to center within visible area */
      .main-content.generations-open .input-section .input-container {
        transform: translateX(calc(var(--capsule-panel-width) / -2));
        max-width: calc(0.9 * (100vw - var(--capsule-panel-width))); /* 90% of available chat space */
      }
      
      /* When both panels are open */
      .main-content.sidebar-open.generations-open .input-section .input-container,
      .sidebar.open ~ .main-content.generations-open .input-section .input-container {
        transform: translateX(calc((var(--sidebar-width) - var(--capsule-panel-width)) / 2));
        max-width: calc(0.9 * (100vw - var(--sidebar-width) - var(--capsule-panel-width))); /* 90% of available chat space between both panels */
      }
    }
    /* Mobile specific adjustments */
    @media (max-width: 768px) {
      .input-section {
        position: fixed !important; /* Keep fixed on mobile for keyboard handling */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important; /* Full width background on mobile too */
        padding: 12px 0; /* Remove horizontal padding from section */
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        /* Ensure fade-in animation is applied */
        opacity: 0;
        visibility: hidden;
        animation: fadeInPromptBar 0.5s ease 0.5s forwards; /* 0.5s delay, then 0.5s fade-in */
      }
      
      .input-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 12px; /* Add padding to container instead */
        transform: none !important; /* No transforms on mobile */
      }
    }

    /* padding-bottom managed by JS via --chat-bottom-pad */

    /* Chat container positioning update */
    .chat-container {
      position: relative; /* Ensure absolute positioning of input works correctly */
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--primary-bg);
      overflow: hidden;
    }

    /* Additional responsive adjustments */
    @media (min-width: 1024px) {
      .input-container {
        max-width: 90vw; /* Up to 90% of screen width */
      }
      .chat-container {
        margin-left: 0%;
        margin-right: 0%;
      }
    }

    /* Allow workspace modules to span the full width on desktop */
@media (min-width: 1024px) {
  .chat-container.workspace-active {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}


    /* Smooth transitions when panels open/close */
    .input-container {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Ensure proper layering */
    .input-section {
      isolation: isolate; /* Create stacking context */
    }

    /* Special handling for when dragging panels on desktop */
    @media (min-width: 769px) {
      .generations-panel.dragging ~ .main-content .input-container,
      .main-content.panel-resizing .input-container {
        transition: none; /* Disable transitions during drag for smooth resizing */
      }
    }

    /* Additional utility class to handle dynamic sidebar state changes */
    body.sidebar-transitioning .input-container {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes galleryHeartbeat {
      0%, 100% {
        transform: scale(1);
        filter: brightness(1);
      }
      50% {
        transform: scale(1.1);
        filter: brightness(1.3);
      }
    }

    .panel-toggle-arrow.heartbeat img {
      animation: galleryHeartbeat 1s ease-in-out 5;
    }

/* ================= MOBILE PROMPT CONTAINER CENTERING FIX ================= */

/* Override the problematic desktop centering logic for mobile */
@media (max-width: 768px) {
  /* Input section - full width background, no transforms */
  .input-section {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important; /* Remove all padding initially */
    padding-top: 12px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    /* No backdrop-filter on parent - let the pill handle its own blur */
    background: rgba(0, 0, 0, 0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 2400 !important;
    box-sizing: border-box !important;
    /* Smooth transitions for blur and background */
    transition: backdrop-filter 0.4s ease, 
                -webkit-backdrop-filter 0.4s ease,
                background 0.4s ease,
                opacity 0.5s ease 0.5s !important; /* 0.5s fade-in after 0.5s delay */
    /* Ensure fade-in animation is applied */
    opacity: 0;
    visibility: hidden;
    animation: fadeInPromptBar 0.5s ease 0.5s forwards !important; /* 0.5s delay, then 0.5s fade-in */
  }
  
  /* Focused state - frosted band appears */
  .input-section:focus-within {
    background: rgba(10, 12, 18, 0.32) !important;
    backdrop-filter: blur(34px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(140%) !important;
  }
  
  
  /* Input container - perfectly centered with symmetric horizontal spacing */
  .input-container {
    max-width: none !important;
    width: calc(100vw - 24px) !important; /* Full width minus symmetric margins */
    margin: 0 12px !important; /* Symmetric 12px margins on left and right */
    padding: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  
  /* Message input container - full width with proper centering */
  .message-input-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 32px !important;
  }
  
  /* Remove any sidebar-related transforms on mobile */
  .main-content.sidebar-open .input-section .input-container,
  .sidebar.open ~ .main-content .input-section .input-container,
  .main-content.generations-open .input-section .input-container,
  .main-content.sidebar-open.generations-open .input-section .input-container {
    transform: none !important;
    left: auto !important;
    right: auto !important;
    max-width: none !important;
    width: calc(100vw - 24px) !important;
    margin: 0 12px !important;
  }
  
  /* Remove any desktop positioning logic */
  .input-section .input-container {
    transform: none !important;
  }
  
  /* Chat messages - margin only; padding-bottom managed by JS */
  .chat-messages {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 !important;
  }
}

/* Extra small screens - even more focused centering */
@media (max-width: 375px) {
  .input-section {
    padding-top: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  
  .input-container {
    width: calc(100vw - 20px) !important; /* Slightly smaller margins for very small screens */
    margin: 0 10px !important;
  }
  
  .message-input-container {
    padding: 5px !important;
  }
}

/* Landscape mobile - maintain centering */
@media (max-width: 768px) and (orientation: landscape) {
  .input-section {
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    /* Ensure fade-in animation is applied */
    opacity: 0;
    visibility: hidden;
    animation: fadeInPromptBar 0.5s ease 0.5s forwards !important; /* 0.5s delay, then 0.5s fade-in */
  }
  
  .message-input-container {
    padding: 4px !important;
  }
}

/* Override any conflicting styles from the desktop logic */
@media (max-width: 768px) {
  /* Kill all desktop transforms and positioning */
  .main-content.sidebar-open ~ .input-section .input-container,
  .sidebar.open ~ .main-content .input-section .input-container,
  .main-content.generations-open .input-section .input-container,
  .main-content.sidebar-open.generations-open .input-section .input-container,
  .sidebar.open ~ .main-content.generations-open .input-section .input-container {
    transform: translateX(0) !important;
    max-width: none !important;
    width: calc(100vw - 24px) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 12px !important;
    padding: 0 !important;
  }
  
  /* Ensure input section spans full width */
  .main-content.sidebar-open .input-section,
  .main-content.generations-open .input-section,
  .main-content.sidebar-open.generations-open .input-section {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
}

/* Additional safety override for any remaining positioning issues */
@media (max-width: 768px) {
  body .input-section {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
  
  body .input-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
  }
  
  body .message-input-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

/* ================= PROFESSIONAL SCROLL DOWN BUTTON PATCH ================= */

/* Remove the inline styles from your HTML and replace with this professional styling */
.scroll-bottom-btn {
  position: fixed;
  left: 50%;
  bottom: calc(var(--input-section-height, 100px) + 60px); /* Position well above input with generous buffer */
  transform: translateX(-50%);
  z-index: 1000;
  
  /* Professional button styling */
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  cursor: pointer;
  
  /* Modern glassmorphism background */
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  
  /* Typography and icon */
  color: rgba(255, 255, 255, 0.95);
  font-size: 0; /* Hide text content for custom arrow */
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Enhanced shadow for better visibility */
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  
  /* Smooth transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
  
  /* Ensure proper layering */
  isolation: isolate;
}

/* Show state */
.scroll-bottom-btn:not([style*="display: none"]) {
  opacity: 1;
  visibility: visible;
}

/* Hover effects */
.scroll-bottom-btn:hover {
  background: rgba(25, 25, 25, 0.50);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Active/pressed state */
.scroll-bottom-btn:active {
  transform: translateY(0) scale(1);
  transition: all 0.1s ease;
}

/* Focus state for accessibility */
.scroll-bottom-btn:focus {
  outline: 2px solid rgba(245, 166, 35, 0.6);
  outline-offset: 2px;
}

/* Professional rotated arrow (90° rotated >) - Hidden when SVG is present */
.scroll-bottom-btn::before {
  content: none; /* Disabled to use SVG instead */
  width: 12px;
  height: 12px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  border-radius: 0 2px 0 0;
}

/* Alternative arrow using CSS shapes (if you prefer) */
.scroll-bottom-btn.arrow-style {
  font-size: 0; /* Hide text content */
}

.scroll-bottom-btn.arrow-style::before {
  content: '';
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}

/* Pulse animation for attention */
.scroll-bottom-btn.pulse {
  animation: scrollButtonPulse 2s ease-in-out infinite;
}

@keyframes scrollButtonPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: translateY(0) scale(1.08);
    box-shadow: 
      0 12px 40px rgba(74, 158, 255, 0.2),
      0 4px 16px rgba(74, 158, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* Badge indicator for unread messages */
.scroll-bottom-btn::after {
  content: attr(data-unread-count);
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #ff4444;
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  border: 2px solid rgba(0, 0, 0, 0.8);
}

.scroll-bottom-btn[data-unread-count]:not([data-unread-count=""]):not([data-unread-count="0"])::after {
  opacity: 1;
  visibility: visible;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .scroll-bottom-btn {
    /* Keep centered positioning */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--input-section-height, 120px) + 65px);
    
    /* Slightly larger on mobile for better touch targets */
    width: 48px;
    height: 48px;
    border-radius: 24px;
    
    /* Enhanced visibility on mobile */
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(24px);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 2px 12px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  
  /* When thumbnails are not shown, position closer to input */
  .scroll-bottom-btn.no-thumbnails {
    bottom: calc(var(--input-section-height, 80px) + 20px);
  }
  
  /* Extra small screens - even closer when no thumbnails */
  @media (max-width: 480px) {
    .scroll-bottom-btn.no-thumbnails {
      bottom: calc(var(--input-section-height, 70px) + 15px);
    }
  }
  
  .scroll-bottom-btn::before {
    width: 14px;
    height: 14px;
    border-right-width: 3px;
    border-bottom-width: 3px;
  }
  
  /* Badge adjustment for mobile */
  .scroll-bottom-btn::after {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 11px;
    top: -6px;
    right: -6px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .scroll-bottom-btn {
    /* Maintain centered positioning */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--input-section-height, 110px) + 50px);
    width: 44px;
    height: 44px;
    border-radius: 22px;
  }
  
  .scroll-bottom-btn::before {
    width: 12px;
    height: 12px;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
  }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .scroll-bottom-btn {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--input-section-height, 100px) + 50px);
  }
}

/* Desktop responsiveness - align with chat content area */
@media (min-width: 769px) {
  .scroll-bottom-btn {
    /* Default centering within chat content area */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--input-section-height, 100px) + 60px);
    
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
  }
  
  /* When sidebar is open, shift button to center within visible chat area */
  .main-content.sidebar-open .scroll-bottom-btn,
  .sidebar.open ~ .main-content .scroll-bottom-btn {
    transform: translateX(calc(-50% + var(--sidebar-width) / 2));
  }
  
  /* When generations panel is open, shift button to center within visible chat area */
  .main-content.generations-open .scroll-bottom-btn {
    transform: translateX(calc(-50% + var(--capsule-panel-width) / -2));
  }
  
  /* When both panels are open */
  .main-content.sidebar-open.generations-open .scroll-bottom-btn,
  .sidebar.open ~ .main-content.generations-open .scroll-bottom-btn {
    transform: translateX(calc(-50% + (var(--sidebar-width) - var(--capsule-panel-width)) / 2));
  }
}

/* Hide scroll button when a module is active */
.chat-container.workspace-active .scroll-bottom-btn {
  display: none !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .scroll-bottom-btn {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #ffffff;
  }
  
  .scroll-bottom-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    color: #000000;
    border-color: rgba(0, 0, 0, 0.8);
  }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .scroll-bottom-btn {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  
  .scroll-bottom-btn:hover {
    transform: none;
  }
  
  .scroll-bottom-btn.pulse {
    animation: none;
  }
  
  @keyframes scrollButtonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
  .scroll-bottom-btn {
    background: rgba(25, 25, 25, 0.5);
    border-color: rgba(255, 255, 255, 0.12);
  }
  
  .scroll-bottom-btn:hover {
    background: rgba(35, 35, 35, 0.95);
    border-color: rgba(255, 255, 255, 0.25);
  }
}

/* Loading state (if needed) */
.scroll-bottom-btn.loading {
  pointer-events: none;
  opacity: 0.6;
}

.scroll-bottom-btn.loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}


/* ================================================================= */
/* == PROFESSIONAL CHAT LOADING & SKELETON STATES               == */
/* ================================================================= */

/* Skeleton Loading States for Chat Messages */
.message.message-skeleton {
  opacity: 0;
  animation: skeletonFadeIn 0.3s ease-out forwards;
}

.message.message-skeleton .skeleton-content {
  background: #373737;
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  max-width: 70%;
  border: 1px solid #3c3c3c;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 200px; /* Ensure minimum width for better visibility */
}

/* Match exact image wrapper constraints for skeleton content */
.message.assistant.message-skeleton .skeleton-content .skeleton-image {
  width: 600px; /* SAME FIXED WIDTH as assistant images */
}

.message.user.message-skeleton .skeleton-content .skeleton-image {
  width: 300px; /* SMALLER FIXED WIDTH for user skeletons */
}

/* Large screen skeleton adjustments to match image wrappers */
@media (min-width: 1024px) {
  .message.assistant.message-skeleton .skeleton-content .skeleton-image {
    width: 800px; /* SAME FIXED WIDTH as large screen assistant images */
  }
  
  .message.user.message-skeleton .skeleton-content .skeleton-image {
    width: 400px; /* LARGER but still smaller for user skeletons on desktop */
  }
}

/* Mobile skeleton adjustments */
@media (max-width: 768px) {
  .message.assistant.message-skeleton .skeleton-content .skeleton-image {
    width: 400px; /* SAME FIXED WIDTH as mobile assistant images */
  }
  
  .message.user.message-skeleton .skeleton-content .skeleton-image {
    width: 200px; /* SMALLER for user skeletons on mobile */
  }
}

.message.user.message-skeleton .skeleton-content {
  border-radius: 16px 16px 4px 16px;
  background: transparent;
  color: var(--button-secondary-text);
  padding: 10px 14px;
  align-items: flex-end;
}

/* Skeleton Text Lines */
.skeleton-line {
  height: 14px;
  background: var(--loading-shimmer);
  border-radius: 7px;
  margin-bottom: 8px;
  animation: skeletonPulse 2.4s ease-in-out infinite;
}

.skeleton-line:last-child {
  margin-bottom: 0;
  width: 75%; /* Last line shorter for natural look */
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-line.medium {
  width: 85%;
}

.skeleton-line.long {
  width: 100%;
}

/* Enhanced Skeleton Image Placeholder (chat context only - scoped to avoid overriding gallery skeletons) */
.message .skeleton-image {
  background: var(--loading-shimmer);
  border-radius: 8px;
  margin-bottom: 8px;
  animation: skeletonPulse 2.4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1; /* Default to square if no specific aspect-ratio class is applied */
}

/* Assistant skeleton images - SAME FIXED WIDTH as assistant images */
.message.assistant .skeleton-image {
  width: 600px; /* SAME FIXED WIDTH as assistant images */
}

.message.assistant .skeleton-image.landscape {
  aspect-ratio: 16/9;
}

.message.assistant .skeleton-image.portrait {
  aspect-ratio: 9/16;
}

.message.assistant .skeleton-image.square {
  aspect-ratio: 1;
}

/* User skeleton images - SMALLER FIXED WIDTH */
.message.user .skeleton-image {
  width: 300px; /* SMALLER FIXED WIDTH for user skeletons */
}

.message.user .skeleton-image.landscape {
  aspect-ratio: 16/9;
}

.message.user .skeleton-image.portrait {
  aspect-ratio: 9/16;
}

.message.user .skeleton-image.square {
  aspect-ratio: 1;
}

/* Large screen adjustments for skeleton images */
@media (min-width: 1024px) {
  .message.assistant .skeleton-image {
    width: 800px; /* SAME FIXED WIDTH as large screen assistant images */
  }
  
  .message.user .skeleton-image {
    width: 400px; /* LARGER but still smaller for user skeletons on desktop */
  }
}

/* Mobile adjustments for skeleton images */
@media (max-width: 768px) {
  .message.assistant .skeleton-image {
    width: 400px; /* SAME FIXED WIDTH as mobile assistant images */
  }
  
  .message.user .skeleton-image {
    width: 200px; /* SMALLER for user skeletons on mobile */
  }
}

.message .skeleton-image::after {
  content: none; /* Removed - pulse animation is sufficient */
}

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

/* Message Loading State - Prevents Layout Shift */
.message.loading {
  min-height: 60px; /* Reserve minimum space */
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}

.message.loading.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth Height Transitions */
.message-content {
  transition: height 0.2s ease-out;
}

/* Prevent layout shift during image loading */
.message.assistant .chat-img-wrapper,
.message.user .chat-img-wrapper {
  position: relative;
  overflow: hidden;
}

.message.assistant .chat-img-wrapper img,
.message.user .chat-img-wrapper img {
  transition: opacity 0.3s ease;
}

.message.assistant .chat-img-wrapper.lazy-load img,
.message.user .chat-img-wrapper.lazy-load img {
  opacity: 0;
}

.message.assistant .chat-img-wrapper.lazy-load.loaded img,
.message.user .chat-img-wrapper.lazy-load.loaded img {
  opacity: 1;
}

/* Enhanced image wrapper with aspect ratio support */
.message.assistant .chat-img-wrapper {
  background: var(--secondary-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.message.assistant .chat-img-wrapper.loaded {
  background: transparent;
}

/* These rules are now handled by the unified fixed width system above */
/* All chat-img-wrapper sizing is controlled by the fixed width rules */

/* Loading state dimensions now handled by the unified fixed width system */
/* All lazy-load sizing is controlled by the fixed width rules defined above */

/* Ensure wrappers with inline styles (from JS) take precedence */
.message.assistant .chat-img-wrapper[style*="aspect-ratio"],
.message.user .chat-img-wrapper[style*="aspect-ratio"] {
  min-height: auto !important;
}

/* Chat Loading Improvements */
.chat-messages.batch-loading {
  position: relative;
}

.chat-messages.batch-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(74, 158, 255, 0.6),
    transparent
  );
  animation: loadingBar 2s infinite ease-in-out;
  z-index: 10;
}

/* Prevent scroll jumping during batch loading */
.chat-messages.batch-loading {
  scroll-behavior: auto; /* Disable smooth scrolling during loading */
}

.chat-messages:not(.batch-loading) {
  scroll-behavior: smooth;
}

/* Pagination loading state */
.chat-messages.pagination-loading {
  position: relative;
}

.chat-messages.pagination-loading::after {
  content: var(--formas-i18n-loading-earlier, 'Loading earlier messages…');
  position: sticky;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  z-index: 15;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  animation: fadeInOut 2s ease-in-out;
}

@keyframes loadingBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  20%, 80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Scroll Position Anchor */
.scroll-anchor {
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

/* Enhanced Chat Top Loader */
.chat-top-loader {
  position: sticky;
  top: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    to bottom, 
    rgba(10,10,10,0.95), 
    rgba(10,10,10,0.8),
    rgba(10,10,10,0)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  transition: all 0.3s ease;
}

.chat-top-loader.hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.chat-top-loader .spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: rgba(74, 158, 255, 0.8);
  border-radius: 50%;
  animation: modernSpin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.chat-top-loader .loading-text {
  margin-left: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

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

/* Premium Capsule Panel Spinner Animations */
@keyframes elegantSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.85);
    box-shadow:
      0 0 6px rgba(255, 255, 255, 0.3),
      0 0 12px rgba(255, 255, 255, 0.15);
  }
  50% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.5),
      0 0 20px rgba(255, 255, 255, 0.25);
  }
}

@keyframes shimmerSweep {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

/* Message Reveal Animation */
.message.reveal {
  animation: messageReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes messageReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Smooth pop-in for newly sent user messages only */
.message.user.appear {
  animation: chatMessageIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity, filter;
}

@keyframes chatMessageIn {
  from {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .message.user.appear {
    animation: fadeInSimple 0.2s ease-out both;
  }
  @keyframes fadeInSimple {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Batch Loading Indicator */
.chat-batch-marker {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin: 16px 0 8px;
  position: relative;
}

.chat-batch-marker::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-subtle),
    transparent
  );
  z-index: -1;
}

.chat-batch-marker span {
  background: var(--primary-bg);
  padding: 0 12px;
}

/* ================================================================= */
/* == LEGACY PLACEHOLDER STYLES MOVED TO placeholders.css       == */
/* ================================================================= */

/* == AGENT PLACEHOLDER SIZING FIX (v6 - Universal Selector)      == */
/* == Uses a dedicated class for maximum compatibility.           == */
 /* ================================================================= */
 
 /* --- Desktop & Larger Screens (> 768px) --- */
/* Placeholder message styles moved to placeholders.css */

/* Note: Main scroll button styles are defined above around line 7187 */

/* ================= ERROR BUBBLE STYLES ================= */

/* For the capsules in the side panel */
.capsule-error-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.2);
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  margin: auto;
  border-radius: 8px;
  border: 1px dashed var(--border-color);
  box-sizing: border-box;
}

/* For the fullscreen image viewer */
.viewer-error-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 24px;
  background: var(--secondary-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3001; /* Above media elements but below controls */
}

/* ==================== MODULE DEVELOPMENT OVERLAY ==================== */
.module-development-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 24, 33, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: auto;
}

.module-development-message {
  background: rgba(20, 24, 33, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 32px;
  text-align: center;
  color: #e7ebf0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  max-width: 400px;
  margin: 20px;
}

.module-development-message h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #4a9eff;
}

.module-development-message p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ================= PROJECT DELETION POPUP ================= */
.project-deletion-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1000002; /* ⚠️ ESSENTIAL: Above sidebar (2001) and context menu (1000001) */
}

.project-deletion-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.project-deletion-popup.hide {
  opacity: 0;
  transform: translate(-50%, -50%) translateX(-200px) scale(0.8);
}

.project-deletion-popup .popup-content {
  background: rgba(20, 24, 33, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  justify-content: center;
}

.project-deletion-popup .popup-icon {
  font-size: 16px;
  opacity: 0.9;
  color: #4caf50;
}

.project-deletion-popup .popup-text {
  color: #4caf50;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.polyline-close-indicator {
  position: absolute;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
  left: 0;
  top: 0;
  transform: translate(-10px, -50%) scale(0.92);
  opacity: 0;
  z-index: 7;
  transition: opacity 0.18s ease, transform 0.18s ease;
  will-change: transform, opacity;
  --proximity: 0;
}

.polyline-close-indicator.is-visible {
  opacity: 1;
  transform: translate(-10px, -50%) scale(1);
}

.polyline-close-indicator .polyline-close-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(99, 155, 255, 0.6);
  background: rgba(99, 155, 255, 0.16);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
  transform: scale(calc(0.88 + 0.22 * var(--proximity)));
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.polyline-close-indicator.is-visible .polyline-close-circle {
  border-color: rgba(99, 155, 255, 0.85);
  background: rgba(99, 155, 255, 0.28);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.polyline-close-indicator .polyline-close-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8f1ff;
  background: rgba(17, 24, 39, 0.82);
  border: 1px solid rgba(99, 155, 255, 0.45);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  transform: translateY(calc((1 - var(--proximity)) * 6px));
  opacity: calc(0.45 + 0.55 * var(--proximity));
  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.polyline-close-indicator.is-visible .polyline-close-pill {
  background: rgba(30, 64, 175, 0.9);
  border-color: rgba(148, 197, 255, 0.65);
  color: #f8fbff;
}

/* ================= PROMPT BAR: FROSTED PILL =================
   The input-section stays transparent, but the pill (.message-input-container) is frosted. */
.input-section.visible.loaded {
  /* No backdrop-filter on parent - let the pill handle its own blur */
  background: rgba(0, 0, 0, 0) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Keep panels (sidebar) above the prompt bar */
  z-index: 1800 !important;
}

.input-section.visible.loaded:focus-within {
  /* Focused: frosted band appears */
  background: rgba(10, 12, 18, 0.32) !important;
  backdrop-filter: blur(34px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(140%) !important;
  z-index: 1800 !important;
}

/* The pill container - glass blur effect matching freeform toolbar */
.input-section.visible.loaded .message-input-container {
  background: rgba(5, 5, 5, 0.75) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  transform: translateZ(0);
  isolation: isolate;
}