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

    :root {
      /* Layout Dimensions */
      --sidebar-width: 280px;
      --header-height: 50px;
      --capsule-panel-width: 220px;
      
      /* 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: #0f0f0f;
      --header-border: #1a1a1a;
      
      /* 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 */
      --loading-shimmer: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(74, 158, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        rgba(255, 255, 255, 0.03) 65%,
        transparent 75%
      );
      
      --diagonal-shine: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.02) 35%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(74, 158, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(74, 158, 255, 0.15) 55%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(255, 255, 255, 0.02) 65%,
        transparent 70%
      );
    }

    /* Dark Mode Enhancements */
    @media (prefers-color-scheme: dark) {
      :root {
        --loading-shimmer: linear-gradient(
          110deg,
          transparent 25%,
          rgba(255, 255, 255, 0.05) 35%,
          rgba(255, 255, 255, 0.12) 45%,
          rgba(74, 158, 255, 0.18) 50%,
          rgba(255, 255, 255, 0.12) 55%,
          rgba(255, 255, 255, 0.05) 65%,
          transparent 75%
        );
      }
    }/* ================= 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;
    }

    .main-content.sidebar-open { 
      margin-left: var(--sidebar-width); 
    }

    .main-content.generations-open {
      margin-right: var(--capsule-panel-width);
    }

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

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

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

      .sidebar-overlay {
        inset: 0; /* cover entire viewport on mobile */
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
    }

    /* 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(20, 20, 20, 0.8);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
      transition: transform 0.2s ease;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 4px 0 45px rgba(0,0,0, 0.25);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
  }

  /* 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);
    }

    /* Sidebar Header - match global header height */
    .sidebar-header {
      padding: 0 20px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-height, 50px);      /* Match main header */
      min-height: var(--header-height, 50px);
      max-height: var(--header-height, 50px);
      background: rgba(20, 20, 20, 0.35);
      flex-shrink: 0;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }


    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      height: 100%;
    }

    .sidebar-logo img { 
      width: 24px;
      height: 24px; 
      border: none;
      border-radius: 50%;
      background: rgba(128, 128, 128, 0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 4px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .sidebar-logo img:hover {
      background: rgba(128, 128, 128, 0.25);
      transform: scale(1.05);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    .sidebar-logo span { 
      font-weight: 500; 
      font-size: 14px;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      line-height: 1;                /* Prevent line-height issues */
      white-space: nowrap;
  }
  
    .sidebar-close {
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      cursor: pointer;
      padding: 6px;
      border-radius: 50%;
      transition: opacity 0.25s, transform 0.25s, background .2s ease, border-color .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .sidebar-close:hover { 
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.24);
      color: var(--text-primary); 
      transform: scale(1.03);
    }

    /* Sidebar Content */
    .sidebar-content {
      flex: 1;
      padding: 20px 0;
      overflow-y: auto;
    }

    .sidebar-section { 
      margin-bottom: 24px; 
    }

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

    /* Sidebar Items */
    .sidebar-item {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      margin: 0 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease;
      font-size: 13px;
      font-weight: 400;
      position: relative;
      user-select: none;
      color: var(--text-primary);
  }

    .sidebar-item:hover {
      background: var(--button-secondary);
      box-shadow: inset 0 0 0 1px var(--border-color);
      /* Ensure stable hover state */
      will-change: background-color, box-shadow;
    }

    .sidebar-item.active {
      background: var(--button-secondary);
      color: var(--text-primary);
    }

    /* Active Project Indicator Dot */
    .sidebar-item.project-item.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;
    }

    /* 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: 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;
    }

    /* Alternative dot using after pseudo-element as backup */
    .sidebar-item.project-item.active[data-project]::after {
      content: '' !important;
      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;
    }

    /* 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;
    }

    /* Enhanced dot on hover */
    .sidebar-item.project-item.active:hover::before,
    .sidebar-item.project-item.active[data-project]:hover::before,
    .sidebar-item.project-item.active:hover::after,
    .sidebar-item.project-item.active[data-project]:hover::after,
    .sidebar-item[data-module].active:hover::before {
      width: 8px;
      height: 8px;
      box-shadow: 
        0 0 12px rgba(255, 255, 255, 0.8),
        0 0 24px rgba(255, 255, 255, 0.4);
      animation: none; /* Stop pulsing 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);
      }
    }

    /* Draggable Module Styling */
    .sidebar-item[data-module] {
      cursor: pointer;
      transform-origin: center;
    }

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

    /* Ensure no modules are active by default */
    .sidebar-item[data-module].active {
      background: var(--button-secondary);
      color: var(--text-primary);
    }

    /* Enhanced hover effects for modules */
    .sidebar-item[data-module]:hover {
      transform: scale(1.02);
      background: var(--hover-bg);
      color: var(--text-primary);
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
      transform-origin: center;
    }


    .sidebar-item[data-module].dragging {
      background: transparent !important;
      color: var(--text-secondary) !important;
      transform: none;
      opacity: .4;
      cursor: grabbing;
    }

    /* Drag over styling for module items */
    .sidebar-item[data-module].drag-over {
      background: var(--selected-bg) !important;
      border: 2px solid var(--selected-color) !important;
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
      transition: all 0.2s ease;
      animation: hoverPulse 1s ease-in-out infinite;
    }

    /* 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: 24px;
      height: 24px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 11px;
      color: #fff;
      margin-left: 4px;
  }
  
    .sidebar-item-text { 
      flex: 1; 
      font-weight: 400;
    }

    .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);
    }

    /* Project Items */
    .project-item { 
      position: relative; 
    }

    .project-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .project-item:hover .project-actions { 
      opacity: 1; 
    }

    .project-action-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px;
      margin-left: 4px;
      border-radius: 3px;
      font-size: 12px;
      transition: all 0.15s ease;
    }

    .project-action-btn img {
      width: 12px;
      height: 12px;
      display: block;
    }

    .project-action-btn:hover {
      background: var(--hover-subtle);
      color: var(--text-primary);
    }

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

    /* ================= PROJECT CONTEXT MENU - CAPSULE PILL STYLE ================= */
    
    .project-context-menu {
      position: fixed;
      z-index: 10000;
      background: rgba(15, 15, 15, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 25px;
      box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      padding: 8px;
      min-width: 180px;
      opacity: 0;
      transform: scale(0.9) translateY(-15px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

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

    .project-context-menu::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(255, 255, 255, 0.02) 100%);
      border-radius: 16px;
      pointer-events: none;
    }

    .context-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 20px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
      justify-content: flex-start;
    }

    .context-menu-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
      opacity: 0;
      transition: opacity 0.2s ease;
      border-radius: 12px;
    }

    .context-menu-item:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      transform: translateX(4px) scale(1.02);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

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

    .context-menu-item:active {
      transform: translateX(2px) scale(0.98);
    }

    .context-menu-item.edit:hover {
      background: rgba(59, 130, 246, 0.2);
      color: #60a5fa;
      border-color: rgba(59, 130, 246, 0.3);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

    .context-menu-item.delete:hover {
      background: rgba(239, 68, 68, 0.2);
      color: #f87171;
      border-color: rgba(239, 68, 68, 0.3);
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    }

    .context-menu-icon {
      width: 16px;
      height: 16px;
      opacity: 0.8;
      transition: all 0.3s ease;
      flex-shrink: 0;
    }

    .context-menu-item:hover .context-menu-icon {
      opacity: 1;
      transform: scale(1.15);
    }

    .context-menu-item.edit:hover .context-menu-icon {
      filter: brightness(1.3) drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
    }

    .context-menu-item.delete:hover .context-menu-icon {
      filter: brightness(1.3) drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
    }

    /* 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: 160px;
        padding: 6px;
        gap: 4px;
      }
      
      .context-menu-item {
        padding: 10px 14px;
        font-size: 12px;
        gap: 8px;
      }
      
      .context-menu-icon {
        width: 14px;
        height: 14px;
      }
    }

/* ================= HEADER.CSS - MAIN HEADER & USER PROFILE ================= */

    /* Main Header */
  .main-header {
      height: var(--header-height, 50px);
      min-height: var(--header-height, 50px);
      max-height: var(--header-height, 50px);
      background: var(--header-bg);
      border-bottom: 1px solid var(--header-border);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 16px;
      position: sticky;
      z-index: 1100;
      pointer-events: auto;
      top: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .main-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
      opacity: 0.3;
    }

    /* Menu Toggle */
    .menu-toggle {
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      cursor: pointer;
      padding: 6px;
      border-radius: 50%;
      transition: opacity 0.25s, transform 0.25s, background .2s ease, border-color .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .menu-toggle:hover { 
      background: rgba(255, 255, 255, 0.12); 
      color: var(--text-primary);
      border-color: rgba(255, 255, 255, 0.24);
      transform: scale(1.03);
    }

    /* Rotate nicely when expanded/open */
    .menu-toggle[aria-expanded="true"] {
      transform: rotate(90deg);
    }

    /* Hide the hamburger when the sidebar is open (we show an X inside the panel) */
    .sidebar.open ~ .main-content .main-header .menu-toggle,
    .sidebar.open .menu-toggle {
      display: none !important;
      opacity: 0 !important;
      transform: scale(0.9) !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }

    /* 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(255, 255, 255, 0.18) 0%, 
      rgba(255, 255, 255, 0.14) 50%,
      rgba(255, 255, 255, 0.10) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    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: 23px;
      height: 23px;
      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: 10px;
      color: #fff;
      cursor: pointer;
      transform-origin: center;
      margin-left: -9px;
      margin-right: 2px;
      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(255, 255, 255, 0.3);
    }

    /* 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);
    }

    /* Header User Section */
    .header-user-section {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-left: auto;
    }

    /* 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: var(--accent-color);
      transform: scale(1.05);
      box-shadow: 0 4px 16px rgba(74, 158, 255, 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;
    }

    /* Dropdown Button Styling */
  .dropdown .dropbtn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
      color: var(--text-primary);
      padding: 5px 16px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 275px;
      max-width: 350px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    /* Shiny glossy gradient effect on hover */
    .dropdown .dropbtn::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;
    }
    
    .dropdown .dropbtn:hover::before {
      left: 100%;
    }
    
    .dropdown .dropbtn:hover {
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.18) 0%, 
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.10) 100%);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 
                  inset 0 1px 0 rgba(255, 255, 255, 0.3);
      transform: translateY(-1px);
    }
    
    /* Wider on larger screens - more space for username */
    @media (min-width: 769px) {
      .dropdown .dropbtn {
        width: 320px;
        max-width: 320px;
        gap: 10px;
      }
      
      /* Remove mobile constraints for desktop */
      .dropbtn .user-name {
        max-width: none !important;
        overflow: visible;
        text-overflow: initial;
      }
      
      .dropbtn .user-info {
        max-width: none !important;
        flex: 1;
        margin-right: 25px !important;
      }
      
      .dropbtn .credits-display {
        flex-shrink: 0;
      }
    }
    
    /* Even wider on extra large screens */
    @media (min-width: 1600px) {
      .dropdown .dropbtn {
        width: 380px;
        max-width: 380px;
      }
      
      .dropbtn .user-info {
        margin-right: 35px !important;
      }
    }
    
    /* User avatar in header */
    .user-avatar-header {
      width: 23px;
      height: 23px;
      aspect-ratio: 1 / 1;
      flex: 0 0 23px;
      top: 1px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      margin: 0;
      margin-left: -11px;
      margin-right: 2px;
    }
    
    .avatar-initials-header {
      font-size: 12px;
      font-weight: 600;
      color: white;
      text-transform: uppercase;
    }

    /* Ensure inner <img> (if ever used) stays perfectly circular */
    .user-avatar-header img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%;
    }
    
    /* Hide avatar on mobile */
    @media (max-width: 768px) {
      .user-avatar-header {
        display: none;
      }
    }
    
    /* Avatar pop-in animation */
    @keyframes avatarPopIn {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .dropbtn .user-info {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
      line-height: 1.2;
      top: 1px;
    }

    .dropbtn .user-name {
      font-weight: 600;
      font-size: 14px !important;
      min-width: 0;
      flex-shrink: 1;
      font-family: 'Roboto', sans-serif;
      text-align: left;
    }

    .dropbtn .user-plan,
    .dropbtn .plan-badge,
    .dropbtn .trial-indicator {
      font-weight: 400;
      font-size: 8px !important;
      opacity: 0.7 !important;
      background: rgba(255,255,255,0.2);

      padding: 1.5px 5px;
      border-radius: 8px;

      flex-shrink: 0;
    }

    .dropbtn .credits-display {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      line-height: 1;
      background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.15));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 3px 10px;
      border-radius: 50px;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.2);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      position: relative;
      top: 0.5px;
      left: 6.5px;
    }

    .dropbtn .credits-amount {
      font-family: 'Roboto Mono', monospace;
    }



    /* Dropdown Styles */
    .dropdown {
      position: relative;
      display: inline-block;
  }
  .dropdown .dropbtn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
      color: var(--text-primary);
      padding: 5px 16px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 275px;
      max-width: 350px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    /* Ensure child elements are above the shine effect */
    .dropdown .dropbtn > * {
      position: relative;
      z-index: 1;
    }

    .dropdown .dropbtn:hover {
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.18) 0%, 
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.10) 100%);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 
                  inset 0 1px 0 rgba(255, 255, 255, 0.3);
      transform: translateY(-1px);
    }

    .dropdown-content {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 2px;
      width: 275px; /* Same width as the button */
      max-height: 0;
      overflow: hidden;
      background: rgba(40, 40, 40, 0.7);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 24px;
      z-index: 100000;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                  opacity 0.3s ease,
                  transform 0.3s ease;
      transition-delay: 0s, 0s, 0s;
      opacity: 0;
      transform: translateY(-10px);
      pointer-events: none;
    }
    
    /* Keep dropdown open with a delay when hovering */
    .dropdown:hover .dropdown-content {
      transition-delay: 0s, 0s, 0s;
    }
    
    /* Add a delay before closing */
    .dropdown-content {
      transition-delay: 0s, 0.5s, 0.5s;
    }

    .dropdown:hover .dropdown-content,
    .dropdown-content:hover,
    .dropdown-content.show {
      max-height: 200px;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      transition-delay: 0s, 0s, 0s;
      z-index: 100000 !important;
    }

    .dropdown-content a {
      color: var(--text-primary);
      padding: 5px 16px;
      margin: 6px 8px;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s ease;
      white-space: nowrap;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 50px;
      backdrop-filter: blur(12px) saturate(150%);
      -webkit-backdrop-filter: blur(12px) saturate(150%);
    }

    .dropdown-content a:first-child {
      margin-top: 10px;
    }

    .dropdown-content a:last-child {
      margin-bottom: 12px;
    }

    .dropdown-content a:hover {
      background: rgba(255, 255, 255, 0.22);
      border-color: rgba(255, 255, 255, 0.35);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a img {
      margin-left: 6px;
    }

    /* Tutorials Button Styling */
    .tutorials-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background-color: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      padding: 6px 14px;
      border: 1px dashed rgba(255, 255, 255, 0.2);
      border-radius: 50px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.3s ease;
      white-space: nowrap;
      margin-right: 12px;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .tutorials-btn:hover {
      background-color: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.35);
      border-style: solid;
      color: var(--text-primary);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .tutorials-icon {
      width: 14px;
      height: 14px;
      opacity: 0.7;
    }
    
    .tutorials-btn:hover .tutorials-icon {
      opacity: 1;
    }

    .tutorials-text {
      font-weight: 400;
      font-family: 'Roboto', sans-serif;
    }

    /* Tutorials Dropdown Content */
    .tutorials-dropdown-content {
      min-width: 220px;
      max-height: 400px;
      overflow-y: auto;
    }

    /* Hide Tutorials in phone portrait */
    @media (max-width: 768px) and (orientation: portrait) {
      #tutorialsDropdown,
      .tutorials-btn,
      .tutorials-dropdown-content {
        display: none !important;
      }
    }

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

    .tutorial-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

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

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

    .tutorial-item .tutorial-icon {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

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

    .tutorial-name {
      font-weight: 500;
      font-size: 14px;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .tutorial-description {
      font-size: 12px;
      color: var(--text-secondary);
      opacity: 0.8;
    }

    .dropdown .dropbtn.loading {
      width: 33px;
      min-height: 33px;
      padding: 8px;
      justify-content: center;
      align-items: center;
      gap: 0;
      position: relative;
    }

    .dropbtn.loading .user-info,
    .dropbtn.loading .credits-display,
    .dropbtn.loading .user-avatar-header {
      display: none;
    }

    .dropbtn .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid var(--text-secondary, #666);
      border-top-color: var(--text-primary, #fff);
      border-radius: 50%;
      animation: spin 1s linear infinite !important;
      flex-shrink: 0;
      display: block !important;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      opacity: 1 !important;
    }

    .dropbtn:not(.loading) .spinner {
      display: none;
    }

    @keyframes spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

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

    /* Sign In Button */
    .signin-btn {
      background: var(--accent-color, #4a9eff);
      color: white;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.2s;
    }

    .signin-btn:hover {
      background: #3b82f6;
    }

    /* Upgrade Button */
    .upgrade {
      background: linear-gradient(135deg, rgba(52, 199, 89, 0.9), rgba(52, 199, 89, 0.7));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: white;
      padding: 4px 14px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      margin-left: 8px;
      box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .upgrade:hover {
      background: linear-gradient(135deg, rgba(52, 199, 89, 1), rgba(52, 199, 89, 0.8));
      box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
      transform: translateY(-1px);
    }

    .upgrade.pro {
      background: linear-gradient(135deg, rgba(204, 204, 204, 0.9), rgba(170, 170, 170, 0.7));
      color: rgba(255, 255, 255, 0.9);
      cursor: default;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .upgrade.pro:hover {
      transform: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Panel Toggle Arrow */
    .panel-toggle-arrow {
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      cursor: pointer;
      padding: 6px;
      border-radius: 50%;
      transition: opacity 0.25s, transform 0.25s, background .2s ease, border-color .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      position: relative;
      z-index: 1000;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .panel-toggle-arrow.visible {
      opacity: 1;
      transform: translateX(0) scale(1);
      pointer-events: auto;
      width: 32px;
      height: 32px;
    }
    .panel-toggle-arrow.hidden {
      opacity: 0;
      display: none;
      transform: translateX(25px) scale(1);
      pointer-events: none;
      width: 32px;
      height: 32px;
    }
    .panel-toggle-arrow img {
      width: 16px;
      height: 16px;
      transition: opacity .2s ease;
    }

    .panel-toggle-arrow:hover {
      background: var(--hover-bg);
      transform: translateX(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .panel-toggle-arrow:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }


    .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 */
    .chat-messages {
      position: relative;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      touch-action: pan-y;
      padding: 20px 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: background-color 0.15s ease;
    }

    .chat-messages.loading {
      filter: blur(20px);
      pointer-events: none;
    }

    #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);
      }
    }

    .project-loading {
  position: fixed;         /* lock it to viewport */
  top: 50px;               /* below header */
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;             /* auto stretch */
  height: auto;            /* auto stretch */
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  color: #fff;
  z-index: 100;
  background: #000;
  overflow: hidden;
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}


    .project-loading::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 20% 30%, rgba(40, 40, 40, 0.8), transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 60, 120, 0.5), transparent 60%), radial-gradient(circle at 50% 50%, rgba(10, 10, 15, 0.9), rgba(0, 0, 0, 0.9));
      filter: blur(50px);
      animation: plasmaGlow 4s ease-in-out infinite;
    }

    .project-loading.active {
      opacity: 1;
      visibility: visible;
      pointer-events: none; /* Allow clicks to pass through loading overlay */
      transition: opacity 0.8s ease;
    }

    .project-loading .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #fff;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }

    .project-loading .project-name-pill {
      margin-top: 4px;
      padding: 4px 12px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      color: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      text-align: center;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    @keyframes plasmaGlow {
      0% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.1); opacity: 0.8; }
      100% { transform: scale(1); opacity: 0.6; }
    }

    .chat-messages.drag-over {
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    }

    .chat-messages.drag-over::before {
      content: "Drop module here to add to conversation";
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 16px 32px;
      background: var(--secondary-bg);
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 400;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      z-index: 1200;
      pointer-events: none;
    }


.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;
    }

    

    .message.user {
      display: flex;
      justify-content: flex-end;
    }

    .message.user .message-content {
      background: #2a2a2a;
      color: var(--button-secondary-text);
      padding: 10px 14px;
      border-radius: 16px 16px 4px 16px;

      max-width: 70%;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.4;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;
      overflow: hidden; /* prevent text from outpacing bubble during expand */
    }

    .message.user .message-content span:not(.chat-img-wrapper) {
      align-self: flex-end;
      text-align: right;
    }

    .message.assistant {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 8px;
    }

    /* REMOVED DUPLICATE - .message.assistant .message-content */
    /* Fix: add missing selector to restore block */
    .message.assistant .message-content {
      max-width: 70%;
      border: 1px solid #3c3c3c;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5;
      position: relative;
      --message-bg: #373737;
      overflow: hidden; /* keep content within bubble during expand */
    }

    /* WhatsApp-style avatars */
    .message-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      transition: opacity 0.2s ease, visibility 0s linear 0.2s;
      transform-origin: center center;
    }
    
    /* Smooth pop animation when avatar becomes visible */
    .message-avatar[style*="opacity: 1"] {
      transition: opacity 0.2s ease, visibility 0s linear 0s;
      animation: avatarPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    
    /* Ghost placeholder - transparent but maintains layout */
    .message-avatar[style*="opacity: 0"] {
      pointer-events: none;
      transform: scale(0.8);
    }

    /* Avatar pop animation */
    @keyframes avatarPop {
      0% {
        transform: scale(0.5);
        opacity: 0;
      }
      60% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* User avatar on the right */
    .message.user {
      gap: 8px;
      align-items: flex-end;
    }

    .message.user .message-avatar {
      order: 2;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .message.user .message-content {
      order: 1;
    }

    .message.user .avatar-initials {
      color: white;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      text-transform: uppercase;
    }

    /* Assistant avatar on the left */
    .message.assistant .message-avatar {
      order: 1;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 0; /* Align with message content bottom */
    }

    .message.assistant .message-content {
      order: 2;
      flex: 0 1 auto; /* Don't grow, but can shrink if needed */
    }

    .message.assistant .formas-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    /* Ensure actions are positioned correctly in assistant messages */
    .message.assistant .message-actions {
      order: 3;
      margin-left: 0;
    }

    /* Invisible avatar for thinking messages - maintains alignment */
    .message.thinking .message-avatar,
    .message.assistant.thinking .message-avatar {
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
      width: 32px !important; /* Ensure it maintains full width */
      flex-shrink: 0 !important;
    }

    /* Add spacing between images and text in assistant messages */
    .message.assistant .message-content .media-container + .message-text,
    .message.assistant .message-content .image-grid + .message-text {
      margin-top: 8px; /* Reduced since we have the visual separator */
    }

    /* Ensure media-container has proper display */
    .message.assistant .message-content .media-container {
      display: block;
      width: 100%;
    }

    /* Add subtle visual separation for better readability */
    .message.assistant .message-content .media-container + .message-text::before,
    .message.assistant .message-content .image-grid + .message-text::before {
      content: '';
      display: block;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
      margin-bottom: 12px;
      border-radius: 1px;
    }

    /* Add spacing between text and images when text comes first */
    .message.assistant .message-content .message-text + .media-container,
    .message.assistant .message-content .message-text + .image-grid {
      margin-top: 16px;
    }

    /* Responsive spacing adjustments */
    @media (max-width: 768px) {
      .message.assistant .message-content .media-container + .message-text,
      .message.assistant .message-content .image-grid + .message-text,
      .message.assistant .message-content .message-text + .media-container,
      .message.assistant .message-content .message-text + .image-grid {
        margin-top: 6px; /* Reduced for mobile */
      }
      
      .message.assistant .message-content .media-container + .message-text::before,
      .message.assistant .message-content .image-grid + .message-text::before {
        margin-bottom: 8px; /* Reduced separator spacing for mobile */
      }
    }

    @media (min-width: 1024px) {
      .message.assistant .message-content .media-container + .message-text,
      .message.assistant .message-content .image-grid + .message-text,
      .message.assistant .message-content .message-text + .media-container,
      .message.assistant .message-content .message-text + .image-grid {
        margin-top: 12px; /* Increased for desktop */
      }
      
      .message.assistant .message-content .media-container + .message-text::before,
      .message.assistant .message-content .image-grid + .message-text::before {
        margin-bottom: 16px; /* Increased separator spacing for desktop */
      }
    }

    /* Special handling for nowrap text (like "Analysing your image") */
    .message.assistant .message-content.nowrap-text {
      width: max-content; /* Expand container to fit content */
      max-width: 90%; /* But don't exceed 90% of viewport */
    }

    .message.assistant .message-content.nowrap-text .message-text {
      width: max-content; /* Expand to fit content */
      max-width: none; /* Remove max-width constraint */
      white-space: nowrap; /* Ensure no wrapping */
    }

    @media (min-width: 1024px) {
      .message {
        margin-left: 0;
        margin-right: 0;
        max-width: 900px;
      }

      .message.user {
        margin-left: auto;
        margin-right: 20px;
      }

      .message.assistant {
        margin-right: auto;
        margin-left: 20px;
      }
    }

    @media (min-width: 1600px) {
      .message.user {
        margin-left: auto;
        margin-right: calc((100vw - 1600px) / 2 + 20px);
      }

      .message.assistant {
        margin-right: auto;
        margin-left: calc((100vw - 1600px) / 2 + 20px);
      }
    }

    /* 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);
    }

    /* Editor Interface */
    .editor-interface {
      text-align: center;
    }

    .editor-workspace {
      background: var(--tertiary-bg);
      border: 1px dashed var(--border-color);
      border-radius: 8px;
      padding: 40px;
      margin: 20px 0;
      cursor: pointer;
      transition: all 0.15s ease;
      color: var(--text-secondary);
    }

    .editor-workspace:hover {
      border-color: var(--text-muted);
      background: var(--hover-subtle);
      color: var(--text-primary);
    }

    /* 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;
    }

    .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;
    }

    .chat-img-wrapper:hover::before,
    .chat-model-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 container */
    .message.user.multi-image .message-content {
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      max-width: 50%;
    }

    .message.user.multi-image .image-grid {
      display: grid;
      gap: 8px;
      align-self: flex-end;
      width: auto;
      max-width: 100%;
      order: 1; /* Images come first */
    }

    /* Multi-image grid item sizing */
    .message.user.multi-image .chat-img-wrapper {
      margin: 0;
      width: 160px;
      height: 160px;
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }

    /* Layout for 2 images */
    .message.user.multi-image.image-count-2 .image-grid {
      grid-template-columns: repeat(2, 1fr);
      width: 328px; /* 2 * 160px + 8px gap */
      height: 160px;
    }

    /* Layout for 3 images (L-shape from bottom-right) */
    .message.user.multi-image.image-count-3 .image-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      width: 328px;
      height: 328px;
    }
    .message.user.multi-image.image-count-3 .chat-img-wrapper:nth-child(1) { grid-column: 2; grid-row: 2; }
    .message.user.multi-image.image-count-3 .chat-img-wrapper:nth-child(2) { grid-column: 1; grid-row: 2; }
    .message.user.multi-image.image-count-3 .chat-img-wrapper:nth-child(3) { grid-column: 2; grid-row: 1; }

    /* Layout for 4 images (2x2 grid) */
    .message.user.multi-image.image-count-4 .image-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      width: 328px;
      height: 328px;
    }

    /* Text in a multi-image message */
    .message.user.multi-image .message-text {
      order: 2; /* Text comes after images */
      align-self: flex-end;
      text-align: right;
      width: 100%;
      margin-top: 12px; /* Add space between images and text */
    }

    /* Mobile responsive adjustments for user multi-image */
    @media (max-width: 768px) {
      .message.user.multi-image .message-content { max-width: 85%; }
      .message.user:not(.multi-image) .chat-img-wrapper { width: 120px; height: 120px; }
      .message.user.multi-image .chat-img-wrapper { width: 120px; height: 120px; border-radius: 10px; }
      .message.user.multi-image.image-count-2 .image-grid { width: 248px; height: 120px; }
      .message.user.multi-image.image-count-3 .image-grid,
      .message.user.multi-image.image-count-4 .image-grid { width: 248px; height: 248px; }
    }

    /* Very small screen adjustments */
    @media (max-width: 480px) {
      .message.user:not(.multi-image) .chat-img-wrapper { width: 100px; height: 100px; }
      .message.user.multi-image .chat-img-wrapper { width: 100px; height: 100px; }
      .message.user.multi-image.image-count-2 .image-grid { width: 208px; height: 100px; }
      .message.user.multi-image.image-count-3 .image-grid,
      .message.user.multi-image.image-count-4 .image-grid { width: 208px; height: 208px; }
    }


 .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;
    }


    .chat-img-actions {
      display: flex;
      gap: 6px;
      margin-top: 2px;
      margin-bottom: 2px;
      justify-content: flex-end;
      width: 100%;
    }

    .chat-img-actions[aria-hidden="true"] {
      display: flex;
    }

    .chat-img-action {
      background: #666;
      color: #fff;
      border: none;
      padding: 2px 8px;
      font-size: 12px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      cursor: pointer;
    }

    .chat-img-action:focus {
      outline: none;
    }

    .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,
    .editor-interface {
      text-align: center;
      padding: 16px; /* Reduced padding */
    }

    .canvas-interface h3,
    .editor-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);
    }

    /* Editor Interface */
    .editor-workspace {
      background: var(--tertiary-bg);
      border: 1px dashed var(--border-color);
      border-radius: 8px;
      padding: 24px; /* Keep reasonable padding for workspace */
      margin: 12px 0; /* Reduced margin */
      cursor: pointer;
      transition: all 0.15s ease;
      color: var(--text-secondary);
      min-height: 120px; /* Smaller min height */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .editor-workspace:hover {
      border-color: var(--text-muted);
      background: var(--hover-subtle);
      color: var(--text-primary);
    }

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

    .module-fullscreen-active .message-content {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
    }
    /* ================= INPUT.CSS - MESSAGE INPUT & FILE UPLOAD ================= */

    /* Input Section Container */
    .input-section {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(74, 158, 255, 0.2);
      z-index: 2400;
      padding: 20px;
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      overflow: visible; /* Ensure dropdown can appear above container */
      border-top: 1px solid var(--border-subtle);
      /* Allow clicks to pass through empty areas of the bar */
      pointer-events: none;
  }
  
  .input-container {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      /* Re-enable interactions within the prompt bar */
      pointer-events: auto;
  }
  
    /* Image Input */
  .image-input-container {
      margin-bottom: 16px;
    }

    .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;
    }

    .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;
      background: #20212f;
      border: 0.2px solid #565869;
      border-radius:322px;
      padding: 8px;
      position: relative;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    /* Context Mode Active State */
    .message-input-container.context-mode-active {
      background: rgba(50, 205, 50, 0.18); /* green lime tint */
      border-color: rgba(50, 205, 50, 0.6);
      box-shadow: 0 0 0 2px rgba(50, 205, 50, 0.25), 0 0 16px rgba(50, 205, 50, 0.25);
    }

    .message-input-container.context-mode-active .message-input {
      color: #90EE90; /* bright lime text cue */
    }

    /* Send button turns green lime while in context mode */
    .message-input-container.context-mode-active .send-button {
      background: #32CD32;
      color: #001a00;
    }
    .message-input-container.context-mode-active .send-button:hover {
      background: #2E8B2E;
    }

    /* Multimodal Agent Active State */
    .message-input-container.multimodal-agent-active {
      background: rgba(255, 140, 0, 0.18); /* orange/gold tint */
      border-color: rgba(255, 140, 0, 0.6);
      box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25), 0 0 16px rgba(255, 140, 0, 0.25);
    }

    .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;
    }

    /* Both Context Mode and Multimodal Agent Active - Split Color Effect */
    .message-input-container.context-mode-active.multimodal-agent-active .send-button {
      background: linear-gradient(90deg, #FF8C00 50%, #32CD32 50%);
      color: #000000;
      position: relative;
    }

    .message-input-container.context-mode-active.multimodal-agent-active .send-button:hover {
      background: linear-gradient(90deg, #FF8C00 50%, #32CD32 50%);
      box-shadow: 0 0 12px rgba(255, 140, 0, 0.6), 0 0 12px rgba(50, 205, 50, 0.6);
    }

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

    /* Send Button */
    .send-button {
      width: 48px;
      height: 48px;
      background: #19a3cd;
      border: none;
      border-radius: 28px;
      color: #000;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      flex-shrink: 0;
      touch-action: manipulation;
      position: relative;
      overflow: visible;
    }

    .send-button:hover {
      background: #16a368;
      transform: scale(1.05);
    }

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

    /* Blast Animation */
    .send-button.blast::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(25, 163, 205, 0.6) 0%, rgba(25, 163, 205, 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 - Green Lime */
    .message-input-container.context-mode-active .send-button.blast::after {
      background: radial-gradient(circle, rgba(50, 205, 50, 0.8) 0%, rgba(50, 205, 50, 0.5) 30%, rgba(144, 238, 144, 0.3) 50%, transparent 70%);
    }

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

    @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: 2px;
      background: var(--border-color);
      border-radius: 1px;
      overflow: hidden;
      margin-top: 8px;
    }

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

    /* ── Multi‑image strip ───────────────────────────────────── */
    .thumb-strip{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 0px;
        border-radius: 20px;
        padding: 8px;
    }

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

    .thumb{
        position: relative;
        flex: 0 0 96px;
        aspect-ratio: 1 / 1;          /* keeps perfect square */
        border: 1px solid var(--border-color);
        border-radius: 6px;
        overflow: hidden;
        cursor: grab;
        user-select: none;
        transition: box-shadow .15s;
        transition: transform 180ms cubic-bezier(.35,0,.25,1);
    }
    .thumb:focus-visible{
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .thumb img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .video-thumbnail {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
    }

    .video-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Ensure video fills the thumb just like images */
    .video-thumbnail video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .video-play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        pointer-events: none;
    }
    .thumb video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Order number indicator */
    .thumb .thumb-order{
        position:absolute; top:4px; left:4px;
        width:20px; height:20px; border-radius:50%;
        background: var(--accent-color, #4a9eff);
        color:#fff; font-size:12px; font-weight:bold;
        border:none; cursor:default;
        display:flex; align-items:center; justify-content:center;
        z-index:2;
    }

    /* Remove (✕) button */
    .thumb .remove{
        position:absolute; top:4px; right:4px;
        width:20px; height:20px; border-radius:50%;
        background: var(--danger-color);
        color:#fff; font-size:14px; line-height:18px;
        border:none; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        z-index:3;
    }
    .thumb.dragging{opacity:.75;}
    .thumb-strip.drag-over .thumb{box-shadow:0 0 0 2px var(--selected-bg);}
    /* ================= 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.CSS - RIGHT PANEL & IMAGE GENERATIONS ================= */

    /* 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(20, 20, 20, 0.4);
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 2000; /* Keep below overlay (viewer.css > 10M) and header */
      display: flex;
      flex-direction: column;
      box-shadow: -4px 0 35px rgba(74, 158, 255, 0.25);
      pointer-events: auto !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

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

    /* Header */
    .generations-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
      background: rgba(20, 20, 20, 0.35);
      flex-shrink: 0;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .generations-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 13px;
      color: var(--text-primary);
      flex: 1;
      letter-spacing: 0.02em;
    }

    .generations-close {
      display: flex;
      background: var(--tertiary-bg);
      border: 1px solid var(--border-color);
      cursor: pointer;
      padding: 6px;
      border-radius: 50%;
      transition: background 0.2s ease, transform 0.2s ease;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      position: relative;
      z-index: 9999; /* Ensure close button stays above capsule content */
      pointer-events: auto;
    }

    .generations-close img {
      width: 12px;
      height: 12px;
    }

    .generations-close:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .generations-close:active {
      transform: scale(0.95);
    }

    /* Search Field */
    .generations-search {
      flex: 1 1 auto;
      padding: 6px 10px;
      border: none;
      border-radius: 6px;
      background: rgba(255,255,255,.08);     /* More muted background */
      color: var(--text-secondary);          /* More muted text */
      font-size: 12px;                       /* Smaller font */
      outline: none;
      transition: background .2s;
      opacity: 0.8;                          /* Make it more subtle */
      pointer-events: auto !important;
      cursor: text !important;
      z-index: 9999 !important; /* Ensure it's above other elements */
      min-width: 0;                          /* Allow shrinking in small capsules */
      max-width: 100%;
    }

    /* Search wrapper to constrain within capsule/header */
    .generations-search-wrap {
      max-width: 100%;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

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

    .generations-search:focus { 
      background: rgba(255,255,255,.1);
      opacity: 1;                            /* Full opacity when focused */
    }

    /* 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;
      overflow-y: auto !important;
      overflow-x: hidden;
      padding: 8px 4px;
      height: 100%;
      max-height: calc(100vh - 50px);
      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: 10px;
      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;
      will-change: scroll-position !important;
      min-height: 0 !important;
      flex-basis: 0 !important;
      flex-grow: 1 !important;
      
      /* Custom scrollbar */
      scrollbar-width: thin;
      scrollbar-color: rgba(74, 158, 255, 0.3) transparent;
    }

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

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

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

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

    /* Generation Items */
    .generation-item {
      width: 100%;
      background: var(--tertiary-bg);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer !important;
      margin-bottom: 8px;
      border: 2px solid transparent;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      transform-origin: center;
      scroll-snap-align: center;
      min-height: 80px;
      isolation: isolate;
      will-change: transform, filter;
      backface-visibility: hidden;
      pointer-events: auto !important;
      transform: translateZ(0);
      animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    }

    .generation-item:nth-child(1) { animation-delay: 0.05s; }
    .generation-item:nth-child(2) { animation-delay: 0.1s; }
    .generation-item:nth-child(3) { animation-delay: 0.15s; }
    .generation-item:nth-child(4) { animation-delay: 0.2s; }
    .generation-item:nth-child(5) { animation-delay: 0.25s; }

    .generation-item:hover {
      transform: scale(1.02) translateZ(0);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      border-color: rgba(74, 158, 255, 0.2);
    }

    .generation-item:hover .capsule-image {
      transform: scale(1.02);
    }

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

    .generation-item.loading {
      animation: loadingPulse 2.5s infinite ease-in-out;
    }

    /* Selection States */
    .generation-item.selected {
      border-color: var(--selected-color);
      background: var(--selected-bg);
      box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3), 0 8px 32px rgba(74, 158, 255, 0.2);
      filter: brightness(1.1);
      transform: scale(1.03);
      z-index: 2;
      position: relative;
    }

    .generation-item.dimmed {
      filter: brightness(0.95) saturate(0.8);
      opacity: 0.8;
      transform: scale(0.98);
      z-index: 1;
    }

    .generation-item.selected:hover {
      filter: brightness(1.15);
      transform: scale(1.04);
    }

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

    /* Selection Indicator */
    .generation-item.selected::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--selected-color);
      z-index: 1;
      animation: slideIn 0.3s ease;
    }

    /* ================= SKELETON PLACEHOLDERS ================= */
    /* Skeleton placeholder styles moved to placeholders.css */

    .skeleton-images {
      width: 100%;
      height: 120px;
      position: relative;
      overflow: hidden;
      border-radius: 6px;
    }

    .skeleton-image {
      width: 100%;
      height: 100%;
      background: var(--skeleton-bg);
      position: relative;
      overflow: hidden;
      border-radius: 6px;
    }

    .skeleton-shimmer {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        var(--skeleton-shimmer),
        transparent
      );
      animation: shimmerMove 2s infinite;
    }

    @keyframes skeletonPulse {
      0%, 100% {
        opacity: 0.6;
        transform: scale(1);
      }
      50% {
        opacity: 0.8;
        transform: scale(1.005);
      }
    }

    @keyframes shimmerMove {
      0% {
        left: -100%;
      }
      100% {
        left: 100%;
      }
    }

    /* Skeleton fade-out styles moved to placeholders.css */

    @keyframes skeletonFadeOut {
      0% {
        opacity: 0.8;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0.95);
      }
    }

    /* Images */
    .capsule-images {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      position: relative;
      pointer-events: auto !important;
    }

    .capsule-image {
      position: relative;
      width: 100%;
      height: var(--capsule-panel-width);
      aspect-ratio: 1;
      flex: 0 0 var(--capsule-panel-width);
      overflow: hidden;
      background: var(--hover-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto !important;
      cursor: pointer !important;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Loading States */
    .capsule-image.loading {
      background: linear-gradient(
        135deg,
        var(--hover-bg) 0%,
        var(--tertiary-bg) 25%,
        rgba(74, 158, 255, 0.05) 50%,
        var(--tertiary-bg) 75%,
        var(--hover-bg) 100%
      );
      background-size: 400% 400%;
      animation: gradientShift 3s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }

    .capsule-image.loading::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--loading-shimmer);
      background-size: 300% 100%;
      animation: professionalShimmer 2.5s infinite ease-in-out;
      z-index: 1;
      opacity: 0.8;
    }

    .capsule-image.loading::after {
      content: '';
      position: absolute;
      top: -100%;
      left: -100%;
      width: 300%;
      height: 300%;
      background: var(--diagonal-shine);
      animation: diagonalSweep 4s infinite ease-in-out;
      z-index: 2;
      transform: rotate(45deg);
    }

    /* Border Radius for Flush Design */
    .capsule-image:first-child {
      border-radius: 8px 8px 0 0;
    }

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

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

    .capsule-image img,
    .capsule-image video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
      transform: scale(1.05);
      will-change: opacity, transform;
      backface-visibility: hidden;
      cursor: pointer !important;
      pointer-events: auto !important;
  }
    .capsule-image img.loaded {
    opacity: 1;
      transform: scale(1);
    }

    .capsule-image img[style*="opacity: 1"] {
      opacity: 1;
    }

    /* Hover Effects */
    .capsule-image::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.02) 50%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

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

    /* 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.4s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 1;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      border: 2px dashed rgba(255, 255, 255, 0.2);
    }

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

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

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

    .spinner-ring::before {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      border: 2px solid rgba(255, 255, 255, 0.15);
      border-top: 2px solid rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      animation: modernSpin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .spinner-ring::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border: 1.5px solid transparent;
      border-bottom: 1.5px solid rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      animation: modernSpinReverse 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .spinner-pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
      border-radius: 50%;
      animation: modernPulse 2s ease-in-out infinite;
      z-index: 1;
    }

    /* Load More Indicator */
    .loading-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      margin: 10px 0;
      opacity: 0.9;
      transition: all 0.3s ease;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(10px);
    }

    .loading-indicator:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .load-more-spinner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .loading-text {
      font-size: 12px;
      color: var(--text-secondary);
      font-weight: 500;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: color 0.3s ease;
    }

    .loading-indicator:hover .loading-text {
      color: var(--text-primary);
    }

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

    .load-more-spinner .spinner-ring::before {
      width: 24px;
      height: 24px;
      border-width: 1.5px;
      border-top-color: rgba(255, 255, 255, 0.8);
    }

    .load-more-spinner .spinner-ring::after {
      width: 16px;
      height: 16px;
      border-width: 1.5px;
    }

    /* Initial Loading Indicator */
    .loading-indicator.initial-loading {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      margin: auto;
      width: 160px;
      height: 267px;
      aspect-ratio: 3/5;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateX(-4px); /* Center and lean 4px to the left */
    }

    .initial-loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
      width: 100%;
      height: 100%;
      justify-content: center;
    }

    .initial-loading-content .spinner-ring {
      width: 32px;
      height: 32px;
    }

    .initial-loading-content .spinner-ring::before {
      width: 32px;
      height: 32px;
      border-width: 2.5px;
      border-top-color: rgba(255, 255, 255, 0.9);
    }

    .initial-loading-content .spinner-ring::after {
      width: 20px;
      height: 20px;
      border-width: 1.5px;
    }

    .initial-loading-content .loading-text {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      margin: 0;
      line-height: 1.2;
      text-align: center;
    }

    .initial-loading-content .loading-subtext {
      font-size: 10px;
      color: var(--text-secondary);
      margin: 0;
      opacity: 0.8;
      line-height: 1.1;
      text-align: center;
    }

    .loading-text {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 500;
      letter-spacing: 0.02em;
      animation: textPulse 2.5s ease-in-out infinite;
      text-align: center;
    }

    /* 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;
    }

    /* 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-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .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.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .email-sent-modal {
      background: var(--secondary-bg);
      border-radius: 20px;
      padding: 0;
      max-width: 480px;
      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: 3000;
      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: 420px;
      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);
    }

    /* 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: 6px;
      padding: 16px;
      align-items: flex-start; /* Left-align the entire container */
    }

    .thinking-line {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 0;
      transition: all 0.4s ease;
      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 {
      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;
    }

    .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: #e0e0e0; /* Light grey text remains visible */
      /* Subtle capsule to indicate completion without obscuring text */
      background: rgba(255,255,255,0.06);
      border-radius: 4px;
      padding: 0 6px;
      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; /* ensure text color is used */
    }

    .thinking-line.completed .thinking-dots {
      opacity: 0.3; /* Make dots very subtle for completed steps */
    }

    .thinking-line .thinking-dots {
      flex-shrink: 0;
      width: 24px; /* Fixed width for consistent alignment */
    }

    .thinking-line .thinking-text {
      flex: 1;
      font-size: 13px;
      line-height: 1.4;
      min-height: 18px;
      border-radius: 2px; /* Reduced from 4px for sharper edges */
    }

    /* 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: 8px !important;
    }

    /* Compact, left-aligned thinking bubble (no background) */
    .message.assistant.thinking .message-content {
      background: transparent !important;
      border: 0 !important;
      padding: 0 !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;
    }

    .message.assistant.thinking .thinking-line {
      gap: 8px !important;
      padding: 0 !important;
      min-height: 0 !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) */
    @media (max-width: 768px) {
      :root {
        --sidebar-width: 80vw;
        --header-height: 50px;
      }

      /* 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.6);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
      }

      /* Header Adjustments */
      .main-header {
        padding: 0 12px;           /* Reduce padding on small screens */
      }

      .header-user-section {
        gap: 8px;                  /* Reduce gap on small screens */
      }

      /* Chat Area */
      .chat-messages {
        padding: 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 */

      .message.user .message-content {
        max-width: 70%;
      }

      .message.assistant .message-content {
        max-width: 100%;
      }

      /* 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;
      }

      /* Dropdown Button Mobile Optimizations */
      .dropdown .dropbtn {
        font-size: 12px;
        padding: 6px 10px;
        max-width: 120px;
        gap: 6px;
      }

      .dropbtn .user-name {
        font-size: 12px;
        font-weight: 600;
        max-width: 24px;
        overflow: hidden;
        text-transform: uppercase;
        font-family: 'Roboto', sans-serif;
        text-align: left;
      }

      .dropbtn .user-plan,
      .dropbtn .plan-badge,
      .dropbtn .trial-indicator,
      .dropbtn .subscription-status {
        display: none !important;
      }

      .dropbtn .credits-display {
        font-size: 11px;
        padding: 2px 6px;
        gap: 3px;
        background: rgba(255,255,255,0.2);
      
      }

      .dropbtn .user-email {
        display: none !important;
      }

      .dropbtn .user-info {
        gap: 4px;
        max-width: 100px;
      }

      /* 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 {
        display: flex !important;
        position: relative !important;
        margin-left: 8px !important;
        z-index: 9998 !important; /* Above generations panel and header */
      }

      .panel-toggle-arrow.hidden {
        display: none !important;
        opacity: 0 !important;
        transform: translateX(25px) !important;
        pointer-events: none !important;
      }

      .panel-toggle-arrow.visible {
        display: flex !important;
        opacity: 1 !important;
      }
    }

    /* Extra Small Screens (375px and below) */
    @media (max-width: 375px) {
      .dropdown .dropbtn {
        max-width: 90px;
        padding: 5px 8px;
        font-size: 11px;
      }

      .dropbtn .user-name {
        font-size: 11px;
        max-width: 20px;
        font-family: 'Roboto', sans-serif;
        text-align: left;
      }

      .dropbtn .credits-display {
        font-size: 10px;
        padding: 2px 5px;
      }

      .dropbtn .credits-coin {
        width: 10px;
        height: 10px;
        font-size: 6px;
      }
    }

    /* Landscape Mobile */
    @media (max-width: 768px) and (orientation: landscape) {
      .panel-toggle-arrow {
        padding: 6px 8px !important;
        font-size: 11px !important;
        min-width: 36px !important;
        height: 28px !important;
      }

      .dropdown .dropbtn {
        max-width: 100px !important;
        font-size: 11px !important;
      }
    }

    /* Tablet Styles (769px to 1024px) */
    @media (min-width: 769px) and (max-width: 1024px) {
      .generations-panel {
        min-width: 200px;
        max-width: 250px;
      }
    }

    /* Desktop Adjustments */
    @media (min-width: 769px) {
      .main-content.generations-open {
        margin-right: var(--capsule-panel-width);
        transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }

    /* Large Desktop */
    @media (min-width: 1440px) {
      .generations-panel {
        min-width: 220px;
        max-width: 300px;
      }
      
      .generation-item {
        margin-bottom: 10px;
      }
    }

    /* 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;
      }
      
      .spinner-ring::before,
      .spinner-ring::after {
        border-width: 1px;
      }
      
      .load-more-spinner .spinner-ring::before,
      .load-more-spinner .spinner-ring::after {
        border-width: 1px;
      }
    }

    /* 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 2px rgba(74, 158, 255, 0.4), 0 8px 32px rgba(74, 158, 255, 0.3);
      }
      
      .generation-item.loading {
        filter: brightness(1.08);
      }
      
      .spinner-ring::before {
        border-top-color: rgba(255, 255, 255, 0.95);
      }
    }

    /* 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,
      .editor-interface {
        padding: 12px;
      }
      
      .canvas-interface h3,
      .editor-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;
      }
      
      /* Editor workspace mobile */
      .editor-workspace {
        padding: 16px;
        margin: 8px 0;
        min-height: 100px;
      }
      
      .editor-workspace p {
        font-size: 12px;
      }
    }

    /* 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;
    }

    .editor-workspace: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;
      }
      
      .message.user .message-content {
        border: 2px solid #ffffff;
      }
      
      .message.assistant .message-content {
        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: modernSpin 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
      }

      .spinner-ring::after {
        animation: modernSpinReverse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
      }

      .spinner-pulse {
        animation: modernPulse 2s 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;
    }

    /* 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;
    }

    .plus-menu-btn {
      width: 42px;
      height: 42px;
      border-radius: 28px;
      border: none;
      background: rgba(0.2,0.2,0.2,0.25);
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.2s ease;
      flex-shrink: 0;
    }

    .plus-menu-btn:hover {
      background: #565869;
      transform: scale(1.1);
    }

    .plus-menu-dropdown {
      position: absolute;
      bottom: 50px;
      left: 0;
      min-width: 230px;
      background: rgba(9, 11, 18, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(148, 163, 184, 0.2);
      border-radius: 16px;
      padding: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 
                  0 0 0 1px rgba(255, 255, 255, 0.05);
      display: flex;
      flex-direction: column;
      gap: 6px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px) scale(0.95);
      transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                  transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 99999;
      will-change: transform, opacity;
    }

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

    .plus-menu-item {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
      border: 1px solid rgba(59, 130, 246, 0.25);
      border-radius: 20px;
      color: rgba(255, 255, 255, 0.9);
      padding: 10px 16px;
      text-align: left;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .plus-menu-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .plus-menu-item:hover {
      background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(59, 130, 246, 0.25));
      border-color: rgba(96, 165, 250, 0.4);
      transform: translateX(3px);
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    }

    .plus-menu-item:hover::before {
      opacity: 1;
    }

    .plus-menu-item.active {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.85), rgba(37, 99, 235, 0.85));
      border-color: rgba(59, 130, 246, 0.6);
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 
                  0 4px 12px rgba(37, 99, 235, 0.4);
    }

    /* Override blue styling for multimodal agent option when active */
    .plus-menu-item.active#multimodalAgentOption {
      background: #FF8C00 !important;
      color: #000000 !important;
      box-shadow: 0 0 8px rgba(255, 140, 0, 0.4);
    }

    /* Ensure multimodal agent option stays orange in all states */
    #multimodalAgentOption.active,
    #multimodalAgentOption.multimodal-agent-active {
      background: #FF8C00 !important;
      color: #000000 !important;
      box-shadow: 0 0 8px rgba(255, 140, 0, 0.4);
    }

    /* Override blue styling for context mode option when active */
    .plus-menu-item.active#contextModeOption {
      background: #32CD32 !important;
      color: #000000 !important;
      box-shadow: 0 0 8px rgba(50, 205, 50, 0.4);
    }

    /* Ensure context mode option stays green lime in all states */
    #contextModeOption.active,
    #contextModeOption.context-mode-active {
      background: #32CD32 !important;
      color: #000000 !important;
      box-shadow: 0 0 8px rgba(50, 205, 50, 0.4);
    }

    /* Icon inversion for active states */
    .plus-menu-item img {
      transition: filter 0.2s ease, transform 0.2s ease;
      opacity: 0.9;
      filter: brightness(1.1);
    }

    .plus-menu-item:hover img {
      transform: scale(1.1);
      opacity: 1;
      filter: brightness(1.3);
    }

    .plus-menu-item.active img {
      filter: brightness(1.5);
      opacity: 1;
    }

    /* Invert icons for multimodal agent when active */
    .plus-menu-item.active#multimodalAgentOption img,
    #multimodalAgentOption.active img,
    #multimodalAgentOption.multimodal-agent-active img {
      filter: invert(1);
      transition: filter 0.2s ease;
    }

    /* Invert icons for context mode when active */
    .plus-menu-item.active#contextModeOption img,
    #contextModeOption.active img,
    #contextModeOption.context-mode-active img {
      filter: invert(1);
      transition: filter 0.2s ease;
    }

    .plus-menu-item.disabled {
      opacity: 0.6;
      cursor: not-allowed;
      color: #bbb;
      position: relative;
    }

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

    /* Beta label styling */
    .beta-label {
      font-size: 9px;
      color: rgba(251, 146, 60, 0.9);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: rgba(251, 146, 60, 0.15);
      padding: 2px 6px;
      border-radius: 8px;
      margin-left: 8px;
      border: 1px solid rgba(251, 146, 60, 0.3);
    }

    /* Beta label styling when agent mode is active */
    .plus-menu-item.active#multimodalAgentOption .beta-label,
    #multimodalAgentOption.active .beta-label,
    #multimodalAgentOption.multimodal-agent-active .beta-label {
      color: #000000 !important;
      background: rgba(0, 0, 0, 0.15);
      border-color: rgba(0, 0, 0, 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 green during fade out */
    .message-input-container.context-mode-deactivating {
      background: rgba(50, 205, 50, 0.1); /* subtle green tint during fade */
      border-color: rgba(50, 205, 50, 0.3);
      box-shadow: 0 0 0 1px rgba(50, 205, 50, 0.15), 0 0 8px rgba(50, 205, 50, 0.15);
      transition: all 0.3s ease;
    }

    .message-input-container.context-mode-deactivating .message-input {
      color: #90EE90; /* maintain green text during fade */
    }

    .message-input-container.context-mode-deactivating .send-button {
      background: #32CD32;
      color: #001a00;
      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: #FF8C00;
      color: #000000;
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(255, 140, 0, 0.6), 0 0 40px rgba(255, 140, 0, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Subtle fade state when turning OFF multimodal agent (no orange glow) */
    .plus-menu-dropdown.multimodal-agent-deactivating #multimodalAgentOption {
      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.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;
    }
    @media (max-width: 768px) {
      .plus-menu-dropdown {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        border-radius: 14px 14px 0 0;
        transform: translateY(100%);
        z-index: 9000; /* Ensure above inspirational prompt on mobile */
      }

      .plus-menu-dropdown.show {
        transform: translateY(0);
      }
    }

    /* 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: 420px;           /* 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 */
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 32px;
      box-shadow: 0 0 4px rgba(25, 163, 205, 0.2);
      transition: box-shadow 0.4s ease, background 0.3s ease, filter 0.3s ease;
      overflow: visible; /* Ensure dropdown can appear above container */
    }

    .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);
    }

    /* === Darker Text Input & Enlarged Plus Button === */

    /* Text area inside prompt bar with soft blurred edges */
    .message-input {
      position: relative;
      background: rgba(24, 25, 36, 0.22);
      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;
    }

    /* 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: rgba(24, 25, 36, 0.22); /* keep same as unfocused */
    }

    .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 - 10% larger */
    .plus-menu-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      font-size: 22px;
      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: hide close button and hide toggle by default */
    @media (min-width: 769px) {
      .generations-panel .generations-close { display: none !important; }
      .panel-toggle-arrow { display: none; }
    }

    /* 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: 10000; /* High z-index to ensure it's above other elements */
          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(74, 158, 255, 0.6);
        }
        
        .panel-drag-tab:hover {
          background: rgba(255, 255, 255, 0.6);
          width: calc(var(--drag-tab-expose) + 2px);
          border-left-color: rgba(74, 158, 255, 0.9);
          box-shadow: 0 0 8px rgba(74, 158, 255, 0.3);
        }

        .panel-drag-tab:active {
          background: rgba(255, 255, 255, 0.8);
          border-left-color: rgba(74, 158, 255, 1);
          box-shadow: 0 0 12px rgba(74, 158, 255, 0.5);
        }
    }

    /* Visual feedback during panel resizing */
    .generations-panel.resizing {
      box-shadow: -4px 0 35px rgba(74, 158, 255, 0.4);
      border-left: 2px solid rgba(74, 158, 255, 0.8);
    }

    /* 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: 10001;
      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(74, 158, 255, 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 */
.chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px 12px;
      /* Space for input/thumbnail area (dynamic) */
      padding-bottom: var(--chat-bottom-pad, 80px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      /* Remove any fixed heights */
      height: auto;
      min-height: 0;
    }

    /* Input section - key changes */
    .input-section {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 2400;
      padding: 16px;
      padding-bottom: calc(16px + var(--safe-area-bottom));
      border-top: 1px solid var(--border-subtle);
      /* Ensure it stays at bottom */
      transform: translateZ(0); /* Force hardware acceleration */
    }

    /* 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 {
        /* Adjust for smaller mobile space */
        padding: 12px;
        padding-bottom: var(--chat-bottom-pad, 90px); /* dynamic space for input */
        /* Ensure proper scrolling */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      
      .input-section {
        padding: 12px;
        padding-bottom: calc(12px + var(--safe-area-bottom));
        /* Ensure it's always visible */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Prevent keyboard from pushing it up */
        transform: translateY(0);
        transition: none;
      }
      
      /* 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, 120px);
      }
    }

    /* iPad specific adjustments */
    @media (min-width: 769px) and (max-width: 1024px) {
      .input-section {
        padding: 16px;
        padding-bottom: calc(16px + var(--safe-area-bottom));
      }
      
      .chat-messages {
        padding-bottom: 85px;
      }
    }

    /* 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 */
      }
      
      .send-button {
        width: 44px;
        height: 44px;
        border-radius: 22px;
      }
      
      .plus-menu-btn {
        width: 42px;
        height: 42px;
        border-radius: 21px;
      }
    }

    /* ================= 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: 20px;
      }
    

    /* 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;
      }
      
      /* Mobile header adjustments */
      .generations-header {
        padding: 8px 12px !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
      }
      
      /* Hide "Generations" text on mobile */
      .generations-title {
        display: none !important;
      }
      
      /* Show close button on mobile */
      .generations-close {
        display: flex !important;
      }
      
      .gen-gallery-btn {
        padding: 6px 10px !important;
        height: 32px !important;
        font-size: 10px !important; /* smaller text on mobile */
      }
      
      .gen-gallery-btn img {
        display: none !important; /* hide gallery icon on phones */
      }
      
      .generations-search {
        width: 120px !important;
        font-size: 10px !important; /* smaller search text on mobile */
      }
      
      .gen-right div {
        padding: 5px 8px !important;
        height: 32px !important;
        max-width: 60% !important; /* prevent overflow of search wrapper */
        width: 100% !important;
        overflow: hidden !important;
      }
      
      .gen-right img {
        width: 14px !important;
        height: 14px !important;
      }
      
      /* Ensure flex containers size and shrink properly */
      .generations-header {
        overflow: hidden !important;
      }
      .gen-right { min-width: 0 !important; flex: 1 1 auto !important; }
      .generations-search-wrap { max-width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; }
      .generations-search { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
      .gen-left {
        flex: 0 0 auto !important;
      }
      .gen-right {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
      }
      .generations-search {
        width: 100% !important; /* let input fill the available wrapper */
        min-width: 0 !important;
        box-sizing: border-box !important;
      }
      .generations-search::placeholder {
        font-size: 10px !important;
      }
.generations-list {
        /* Proper mobile scrolling */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
    }

    /* Landscape mobile adjustments */
    @media (max-width: 768px) and (orientation: landscape) {
      .chat-messages {
        padding-bottom: 70px;
      }
      
      .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;
        }
      }
    }

    /* ================= DESKTOP CHAT SPACING FIX ================= */

    /* Base chat messages padding */
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px 12px;
      padding-bottom: 120px; /* Increased from 80px - more space for input */
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: background-color 0.15s ease;
    }

    /* Desktop specific adjustments */
    @media (min-width: 769px) {
      .chat-messages {
        padding-bottom: 140px; /* Even more space on desktop */
      }
      
      /* Input section on desktop */
      .input-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 2400;
        padding: 20px;
        border-top: 1px solid var(--border-subtle);
        /* Ensure proper backdrop */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      
      /* 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;
      }
    }

    /* Large desktop - even more space */
    @media (min-width: 1440px) {
      .chat-messages {
        padding-bottom: 160px; /* Maximum space for large screens */
      }
    }

    /* Mobile with improved spacing from prompt bar */
    @media (max-width: 768px) {
      .chat-messages {
        padding: 12px;
        padding-bottom: 110px; /* Increased from 90px - more breathing room from prompt bar */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      
      .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));
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
      }
    }

    /* ================= CHAT BUBBLE ACTION BUTTONS UPDATE ================= */

    /* Remove old chat-img-actions styles and replace with new external actions */

    /* Remove the old internal actions */
    .chat-img-actions {
      display: none !important;
    }

    /* Message wrapper to contain both bubble and external actions */
    .message.assistant {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      justify-content: flex-start;
    }

    /* Reset message content to normal - REMOVED DUPLICATE */
    .message.assistant .message-content {
      max-width: 70%;
      border: 1px solid #3c3c3c;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5;
      overflow: visible; /* keep toggle visible in this duplicate block too */
    }

    /* External action buttons container - OUTSIDE the bubble */
    .message-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
      flex-shrink: 0;
      margin-top: 0; /* Remove margin to align perfectly with bubble top */
      order: 3; /* Ensure actions stay on the right after avatar and content */
    }

    /* Hide actions on user messages */
    .message.user .message-actions {
      display: none;
    }

    /* Individual action button styling */
    .message-action-btn {
      width: 32px;
      height: 32px;
      background: rgba(20,20,20, 0.08);
      border: 0px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position: relative;
      opacity: 0.7;
    }

    .message-action-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.25);
      opacity: 1;
      transform: scale(1.05);
    }

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

    .message-action-btn img {
      width: 22px;
      height: 22px;
      opacity: 0.9;
      transition: opacity 0.2s ease;
    }

    .message-action-btn:hover img {
      opacity: 1;
    }

    /* Specific button colors/effects */
    .message-action-btn.use:hover {
      background: rgba(74, 158, 255, 0.15);
      border-color: rgba(74, 158, 255, 0.3);
    }

    .message-action-btn.edit:hover {
      background: rgba(255, 193, 7, 0.15);
      border-color: rgba(255, 193, 7, 0.3);
    }

    .message-action-btn.copy:hover {
      background: rgba(40, 167, 69, 0.15);
      border-color: rgba(40, 167, 69, 0.3);
    }

    .message-action-btn.share:hover {
      background: rgba(220, 53, 69, 0.15);
      border-color: rgba(220, 53, 69, 0.3);
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .message.assistant {
        gap: 4px;
      }
      .message-actions {
        gap: 6px;
        margin-left: 3px;
      }

      .message-action-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
      }
      
      .message-action-btn img {
        width: 14px;
        height: 14px;
      }
    }

    /* Hide actions on very small screens if needed */
    @media (max-width: 480px) {
      .message-actions {
        display: flex;
      }
    }

    /* Tooltip for action buttons */
    .message-action-btn::before {
      content: attr(title);
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 8px;
      background: var(--tooltip-bg);
      color: var(--text-primary);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
      pointer-events: none;
      z-index: 1000;
    }

    .message-action-btn:hover::before {
      opacity: 1;
      visibility: visible;
    }

    /* Ensure actions container doesn't interfere with text selection */
    .message-actions {
      user-select: none;
      -webkit-user-select: none;
    }

    /* Animation for actions appearing */
    .message-actions {
      animation: fadeInActions 0.3s ease-out;
    }

    @keyframes fadeInActions {
      from {
        opacity: 0;
        transform: translateX(10px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* ================= MOBILE ACTION BUTTONS FIX ================= */

    /* Remove the rule that hides action buttons on small screens */
    @media (max-width: 480px) {
      .message-actions {
        display: flex; /* Show actions on all screen sizes */
        gap: 4px; /* Smaller gap for mobile */
        margin-left: 3px; /* Smaller margin for mobile */
      }
      
      .message-action-btn {
        width: 27px; /* 15% smaller than 32px */
        height: 27px;
        border-radius: 5px;
        min-width: 27px; /* Ensure minimum touch target */
        min-height: 27px;
      }
      
      .message-action-btn img {
        width: 14px; /* 15% smaller than 16px */
        height: 14px;
      }
    }

    /* Enhanced mobile positioning for action buttons */
    @media (max-width: 768px) {
      .message.assistant {
        align-items: flex-start;
        gap: 4px; /* Tighter gap on mobile */
      }

      .message-actions {
        display: flex !important; /* Force display on mobile */
        flex-direction: column;
        gap: 4px; /* Reduced gap for tighter spacing */
        margin-left: 3px; /* Bring icons closer to bubble */
        margin-top: 2px; /* Align better with message bubble */
      }
      
      .message-action-btn {
        width: 26px; /* 15% smaller than 36px (36 * 0.85 = 30.6 ≈ 30) */
        height: 26px;
        border-radius: 12px;
        /* Maintain minimum touch target but visual is smaller */
        min-width: 36px; /* Keep accessible touch area */
        min-height: 36px;
        padding: 0px; /* Reduced padding for tighter fit */
        background: rgba(20,20,20, 255); /* Slightly more visible on mobile */
        border: 0px solid rgba(255, 255, 255, 0.18);
      }
      
      .message-action-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.02); /* Subtle feedback */
      }
      
      .message-action-btn img {
        width: 18px; /* 15% smaller than 18px (18 * 0.85 = 15.3 ≈ 15) */
        height: 18px;
      }
      
      /* Improve tooltip positioning on mobile */
      .message-action-btn::before {
        left: 120%; /* Position tooltip to the right on mobile */
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        font-size: 11px;
        padding: 3px 6px;
      }
    }

    /* For very small screens, keep buttons but make them more compact */
    @media (max-width: 375px) {
      .message-actions {
        gap: 3px; /* Tighter spacing */
        margin-left: 3px; /* Closer to message */
      }
      
      .message-action-btn {
        width: 26px; /* 15% smaller than 30px */
        height: 26px;
        min-width: 32px; /* Reduced but still accessible touch area */
        min-height: 32px;
        padding: 3px;
      }
      
      .message-action-btn img {
        width: 13px; /* 15% smaller than 15px */
        height: 13px;
      }
    }

    /* Landscape mobile - more horizontal space available */
    @media (max-width: 768px) and (orientation: landscape) {
      .message-actions {
        flex-direction: row; /* Horizontal layout in landscape */
        gap: 4px; /* Slightly tighter than before */
        margin-left: 3px;
      }
      
      .message-action-btn {
        width: 26px; /* Consistent 15% reduction */
        height: 26px;
        min-width: 30px; /* Smaller touch area for landscape */
        min-height: 30px;
      }
    }

    /* ================= 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 */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(0, 0, 0, 0.3);
      z-index: 2400;
      padding: 20px 0; /* Remove horizontal padding from section */
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--border-subtle);
      transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* ================= NO PROJECT STATE - CENTERED PROMPT BAR ================= */
    
    /* When no project is loaded, center the input section vertically and make background transparent */
    .input-section.no-project {
      position: fixed;
      top: 84%;
      bottom: auto;
      transform: translateY(-50%);
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-top: none !important;
      padding: 20px;
      transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Make the message input container fully transparent when no project */
    .input-section.no-project .message-input-container {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Keep the inner input styling but make background transparent */
    .input-section.no-project .message-input {
      background: transparent !important;
      transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Remove the blur effect from the pseudo-element when no project */
    .input-section.no-project .message-input::before {
      opacity: 0;
      transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* When transitioning from no-project, animate chat content down */
    .chat-messages {
      transition: padding-bottom 2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Start completely invisible and only show when positioned */
    .input-section {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
    
    /* Show input section when in no-project (centered) state */
    .input-section.no-project {
      opacity: 1;
    }
    
    /* 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;
    }

    /* ================= INSPIRATIONAL PROMPTS ================= */
    
    /* Inspirational prompt text positioned above centered input with proper gap */
    .inspirational-prompt {
      position: absolute;
      top: calc(50% - 80px); /* 50px gap + ~30px for input height = 80px above center */
      left: 50%;
      transform: translateX(-50%) translateX(var(--center-shift, 0px));
      font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 24px; /* 50% bigger than 16px */
      font-weight: 400;
      color: rgb(180, 180, 180);
      text-align: center;
      opacity: 0;
      transition: opacity 1s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out;
      pointer-events: none;
      white-space: nowrap;
      z-index: 1;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    /* 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,
      .sidebar.open ~ .main-content .input-section .inspirational-prompt {
        --center-shift: calc(var(--sidebar-width) / 2);
      }

      /* Generations/capsules panel open: shift left by half of panel width */
      .main-content.generations-open .input-section .inspirational-prompt,
      .main-content.generations-open ~ .input-section .inspirational-prompt {
        --center-shift: calc(var(--capsule-panel-width) / -2);
      }

      /* Both panels open: net shift */
      .main-content.sidebar-open.generations-open .input-section .inspirational-prompt,
      .sidebar.open ~ .main-content.generations-open .input-section .inspirational-prompt,
      .main-content.sidebar-open.generations-open ~ .input-section .inspirational-prompt {
        --center-shift: calc((var(--sidebar-width) - var(--capsule-panel-width)) / 2);
      }
    }
    
    /* Adjust for mm_capsules banner when present */
    body.has-capsules-banner .inspirational-prompt {
      top: calc(50% - 80px - 35px); /* Move up by banner height + margin */
    }

    .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);
      }
    }

    /* Cyan 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: #06B6D4 !important; /* Cyan color */
      text-shadow: 
        0 0 8px rgba(6, 182, 212, 0.6),
        0 0 16px rgba(6, 182, 212, 0.4),
        0 0 24px rgba(6, 182, 212, 0.2) !important;
    }

    /* Force blue highlights - overrides container-based styling */
    .inspirational-prompt.force-blue-highlights .prompt-highlight {
      color: #06B6D4 !important; /* Cyan color */
      text-shadow: 
        0 0 8px rgba(6, 182, 212, 0.6),
        0 0 16px rgba(6, 182, 212, 0.4),
        0 0 24px rgba(6, 182, 212, 0.2) !important;
      background: linear-gradient(135deg, #06B6D4, #0891B2) !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;
        transform: translateX(-50%) translateX(var(--center-shift, 0px)) translateY(0);
      }
      to {
        opacity: 0;
        transform: translateX(-50%) translateX(var(--center-shift, 0px)) translateY(-20px);
      }
    }


    /* Cyan glowing animation for explicit mode */
    @keyframes highlightGlowCyan {
      0% {
        text-shadow: 
          0 0 8px rgba(6, 182, 212, 0.6),
          0 0 16px rgba(6, 182, 212, 0.4),
          0 0 24px rgba(6, 182, 212, 0.2) !important;
      }
      100% {
        text-shadow: 
          0 0 12px rgba(6, 182, 212, 0.8),
          0 0 20px rgba(6, 182, 212, 0.6),
          0 0 30px rgba(6, 182, 212, 0.4) !important;
      }
    }

    /* Mobile adjustments for no-project state */
    @media (max-width: 768px) {
      .input-section.no-project {
        padding: 12px;
        top: 75%; /* MODIFIED: Position at 25% from bottom (75% from top) */
        transform: translateY(-50%);
      }

      /* Mobile inspirational prompt adjustments */
      .inspirational-prompt {
        left: 50% !important; /* Center on full screen width for mobile */
        font-size: 16px !important; /* ~15% bigger for mobile (from 14px) */
        top: calc(75% + 60px) !important; /* FIXED: Position below prompt bar (75% + input height + margin) */
        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 */
      }

      /* 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: translate(-50%, 14px); /* start slightly below */
          filter: blur(1px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
          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: min(70vw, 1600px); /* Up to 70% of screen width, max 1600px */
      margin: 0 auto;
      position: relative;
      width: 100%;
      padding: 0 20px; /* Add horizontal padding to the container */
      /* 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);
      }
      
      /* 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));
      }
      
      /* 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));
      }
      
      /* 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));
      }
      
      /* Ensure the input container adapts its max-width */
      .main-content.sidebar-open ~ .input-section .input-container,
      .sidebar.open ~ .main-content .input-section .input-container {
        max-width: min(70vw, 1600px); /* Keep full width even with sidebar open */
      }
      
      /* Adjust when generations panel is open */
      .main-content.generations-open .input-section .input-container {
        max-width: min(70vw, 1600px); /* Keep full width even with generations panel open */
      }
      
      /* Adjust 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 {
        max-width: min(70vw, 1600px);
      }
    }
    /* 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));
      }
      
      .input-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 12px; /* Add padding to container instead */
        transform: none !important; /* No transforms on mobile */
      }
    }

    /* Ensure chat messages have proper bottom padding to account for the input */
    .chat-messages {
      padding-bottom: 140px; /* Increased to account for new positioning */
    }

    @media (max-width: 768px) {
      .chat-messages {
        padding-bottom: 110px; /* Increased mobile spacing for better breathing room */
      }
    }

    /* 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: min(70vw, 1600px); /* Up to 70% of screen width, max 1600px */
      }
      .chat-container {
        margin-left: 0%;
        margin-right: 0%;
      }
    }

    @media (max-width: 1000px) {
      .input-container {
        max-width: 380px; /* Even larger on very wide screens */
        min-width: 380px; /* Even larger on very wide screens */
      }
      
    }

    /* 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;
    }

    /* ================= PROJECT LOADING OVERLAY FIXES ================= */

    .project-loading {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #fff;
      z-index: 100;
      background: #000;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.8s ease, visibility 0s linear 0.8s;
      
      /* Ensure it covers the full chat area regardless of sidebars */
      position: fixed;
      top: 50px; /* Below header */
      left: 0;
      right: 0;
      bottom: 0;
      width: auto; /* Let it stretch to full available width */
    }

    .project-loading::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 20% 30%, rgba(40, 40, 40, 0.8), transparent 50%), 
                  radial-gradient(circle at 80% 70%, rgba(0, 60, 120, 0.5), transparent 60%), 
                  radial-gradient(circle at 50% 50%, rgba(10, 10, 15, 0.9), rgba(0, 0, 0, 0.9));
      filter: blur(50px);
      animation: plasmaGlow 4s ease-in-out infinite;
      /* Ensure the plasma effect covers the full area */
      z-index: -1;
    }

    .project-loading.active {
      opacity: 1;
      visibility: visible;
      pointer-events: none; /* Allow clicks to pass through loading overlay */
      transition: opacity 0.8s ease;
    }

    .project-loading .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #fff;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px; /* Increased margin for better spacing */
      z-index: 1;
    }

    .project-loading > span {
      z-index: 1;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 12px;
      text-align: center;
    }

    .project-loading .project-name-pill {
      margin-top: 8px; /* Increased from 4px */
      padding: 8px 20px; /* Increased horizontal padding */
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      color: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 14px; /* Increased from 12px */
      font-weight: 500;
      text-align: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 1;
      
      /* Fix text trimming issues */
      min-width: 120px; /* Minimum width to prevent cramping */
      max-width: 80vw; /* Don't exceed viewport width */
      white-space: nowrap; /* Keep text on one line */
      overflow: hidden;
      text-overflow: ellipsis; /* Show ellipsis if text is too long */
      
      /* Better typography */
      letter-spacing: 0.5px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      
      /* Subtle glow effect */
      box-shadow: 
        0 4px 16px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* Desktop adjustments for sidebar states */
    @media (min-width: 769px) {
      /* When sidebar is open, adjust the loading overlay position */
      .main-content.sidebar-open .project-loading {
        left: var(--sidebar-width);
      }
      
      /* When generations panel is open */
      .main-content.generations-open .project-loading {
        right: var(--capsule-panel-width);
      }
      
      /* When both panels are open */
      .main-content.sidebar-open.generations-open .project-loading {
        left: var(--sidebar-width);
        right: var(--capsule-panel-width);
      }
      
      /* Larger project name on desktop */
      .project-loading .project-name-pill {
        font-size: 15px;
        padding: 10px 24px;
        min-width: 140px;
        max-width: 60vw; /* More generous on desktop */
      }
    }

    /* Mobile specific adjustments */
    @media (max-width: 768px) {
      .project-loading {
        top: 50px; /* Account for mobile header */
        left: 0;
        right: 0;
        bottom: 0;
      }
      
      .project-loading .project-name-pill {
        font-size: 13px;
        padding: 6px 16px;
        min-width: 100px;
        max-width: 90vw; /* Almost full width on mobile */
        margin-left: 12px;
        margin-right: 12px;
      }
      
      .project-loading .spinner {
        width: 36px;
        height: 36px;
        border-width: 3px;
      }
      
      .project-loading > span {
        font-size: 15px;
      }
    }

    /* Ensure the plasma background covers properly on ultra-wide screens */
    @media (min-width: 1920px) {
      .project-loading::before {
        width: 300%; /* Even wider coverage for ultra-wide screens */
        height: 300%;
        top: -100%;
        left: -100%;
      }
    }

    /* Animation improvements */
    @keyframes plasmaGlow {
      0% { 
        transform: scale(1) rotate(0deg); 
        opacity: 0.6; 
      }
      50% { 
        transform: scale(1.1) rotate(180deg); 
        opacity: 0.8; 
      }
      100% { 
        transform: scale(1) rotate(360deg); 
        opacity: 0.6; 
      }
    }


    /* High contrast mode support */
    @media (prefers-contrast: high) {
      .project-loading .project-name-pill {
        background: rgba(255, 255, 255, 0.9);
        color: #000;
        border: 2px solid #fff;
      }
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
      .project-loading::before {
        animation: plasmaGlow 4s ease-in-out infinite !important;
      }

      .project-loading .spinner {
        animation: spin 2s linear infinite !important;
        border-top-color: #fff;
      }
    }

    /* Dark mode adjustments */
    @media (prefers-color-scheme: dark) {
      .project-loading .project-name-pill {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 
          0 4px 20px rgba(255, 255, 255, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
      }
    }


/* ================= 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;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 2400 !important;
    box-sizing: border-box !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;
  }
  
  /* Ensure chat messages don't interfere */
  .chat-messages {
    padding: 12px !important;
    padding-bottom: 90px !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;
  }
  
  .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(74, 158, 255, 0.6);
  outline-offset: 2px;
}

/* Professional rotated arrow (90° rotated >) */
.scroll-bottom-btn::before {
  content: '';
  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);
  background-size: 300% 100%;
  border-radius: 7px;
  margin-bottom: 8px;
  animation: professionalShimmer 2s infinite ease-in-out;
}

.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 */
.skeleton-image {
  background: var(--loading-shimmer);
  background-size: 300% 100%;
  border-radius: 8px;
  margin-bottom: 8px;
  animation: professionalShimmer 2s infinite ease-in-out;
  position: relative;
  overflow: hidden;
}

/* 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 */
  }
}

.skeleton-image::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  opacity: 0.5;
}

/* Professional Shimmer Animation */
@keyframes professionalShimmer {
  0% {
    background-position: -300% 0;
  }
  100% {
    background-position: 300% 0;
  }
}

@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 */
.chat-img-wrapper {
  position: relative;
  overflow: hidden;
}

.chat-img-wrapper img {
  transition: opacity 0.3s ease;
}

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

.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 */

/* Ensure images fill their containers properly */
.chat-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 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 */
.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: '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);
  }
}

/* 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       == */
/* ================================================================= */

/* ================================================================= */
/* == MOBILE SIZING PATCH                                         == */
/* == Increases agent bubble width on screens <= 768px            == */
/* ================================================================= */

@media (max-width: 768px) {
  /*
    Increase the width for both the final bubble and the loading placeholder
    on mobile to ensure the "Generating..." text fits on a single line.
  */
  .message.assistant {
    width: 90%;
    max-width: 90%;
  }

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

  /*
    Adjust the height reveal animation to work correctly with the new
    90% mobile width.
  */
  @keyframes bubbleHeightReveal {
    from {
      aspect-ratio: 1 / 1;
      overflow: hidden;
    }
    to {
      aspect-ratio: unset;
      overflow: hidden;
    }
  }
}

/* == 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 {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.project-deletion-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.project-deletion-popup.hide {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) translateY(-20px);
}

.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(255, 107, 107, 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;
}

.project-deletion-popup .popup-text {
  color: #ff6b6b;
  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;
}