/*
  File: style.css
  Description: Core stylesheet for the Grid Flow tool.
  Updated: Corrected variable usage for Chat and Header controls to ensure visibility and Theme Tool compatibility.
*/

/* --- Google Font Imports --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
/* Import a wider range of fonts for the theme editor's dynamic selection */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@400;700&family=Raleway:wght@400;700&family=Satoshi:wght@500;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,700;1,8..60,400&family=Fira+Code&family=IBM+Plex+Mono&family=Inter:wght@400;700&family=Lexend:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Caveat:wght@700&display=swap');


/*
================================================================================
  THE MASTER DESIGN SYSTEM SCHEMA
================================================================================
*/
:root {
  /* 1. Color System (For Generated Content) */
  --color-primary: #0d6efd;
  --color-secondary: #6c757d;
  --color-accent: #ffc107;
  --color-text: #212529;
  --color-text-light: #f8f9fa;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-border: #dee2e6;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-error: #dc3545;

  /* 2. Typography (For Generated Content) */
  --font-family-heading: 'Playfair Display', serif;
  --font-family-body: 'Roboto', sans-serif;
  --font-size-base: 1rem;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.75rem;
  --font-size-small: 0.875rem;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  /* 3. Spacing & Layout (For Generated Content) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  --layout-container-width: 1600px;

  /* 4. Components & Interactive Elements */
  --border-radius: 0.375rem;
  --border-width: 1px;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --transition-speed: 0.2s;
  
  /* Wizard Style Button Easings */
  --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ================================================================================
     APPLICATION UI THEME (MAGIC METALLIC DARK MODE)
  ================================================================================ */

  /* --- 1. Backgrounds & Surfaces --- */
  /* Hyper dark, almost solid gray with very subtle vertical shading */
  --app-bg-color: linear-gradient(180deg, #181818 0%, #111111 100%);
  --app-header-bg: rgba(20, 20, 20, 0.9); 
  --app-sidebar-bg: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  --app-main-content-bg: transparent;
  
  /* --- 2. Typography & Borders --- */
  --app-text-color: #e2e8f0;
  --app-border-color: rgba(255, 255, 255, 0.08);
  --app-sidebar-border-color: rgba(0, 0, 0, 0.5);
  
  /* --- 3. Accents --- */
  --prism-gradient: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
  --app-primary-accent: #8b5cf6;
  --app-secondary-accent: #0ea5e9;
  
  /* --- 4. Shadows --- */
  --app-shadow: 0 4px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  --app-sidebar-shadow: 5px 0 25px rgba(0, 0, 0, 0.8), inset -1px 0 0 rgba(255,255,255,0.05);

  /* --- 5. Header Controls --- */
  --app-header-controls-bg: rgba(30, 41, 59, 0.6);
  --app-header-btn-bg: rgba(255, 255, 255, 0.05);
  --app-header-btn-color: #94a3b8;
  --app-header-btn-border-color: rgba(255, 255, 255, 0.1);
  --app-header-btn-shadow: 0 2px 5px rgba(0,0,0,0.3);
  
  --app-header-btn-active-bg: var(--prism-gradient);
  --app-header-btn-active-color: #ffffff;
  --app-header-btn-active-border-color: rgba(255, 255, 255, 0.3);

  /* --- 6. AI Chat Panel --- */
  --app-chat-bg: rgba(15, 23, 42, 0.75);
  --app-chat-output-bg: transparent;
  --app-chat-input-bg: #0f172a;
  --app-chat-textarea-bg: #1e293b;
  --app-chat-textarea-border-color: #334155;
  --app-chat-textarea-focus-bg: #0b0f19;
  
  /* Chat Bubbles - Neon Contrast */
  --app-chat-user-bubble-bg: var(--prism-gradient);
  --app-chat-user-text-color: #ffffff;
  
  --app-chat-ai-bubble-bg: #1e293b;
  --app-chat-ai-text-color: #cbd5e1; 
  
  /* --- 7. Sidebar Elements --- */
  --app-sidebar-title-color: #64748b;
  --app-sidebar-active-workflow-color: #8b5cf6;
  --app-sidebar-placeholder-color: #475569;
  --app-sidebar-placeholder-border-color: #334155;
  --app-project-files-bg: rgba(0, 0, 0, 0.2);
  --app-project-files-border-color: rgba(255, 255, 255, 0.1);
  
  /* --- 8. Card Previews --- */
  --app-card-header-bg: linear-gradient(to bottom, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
  --app-card-header-color: #f8fafc;
  --app-card-preview-bg: #0f172a;

  /* --- 9. Project Folders (Memory View) --- */
  --app-memory-view-bg: rgba(11, 15, 25, 0.85);
  --app-memory-view-item-bg: linear-gradient(145deg, #1e293b, #0f172a);
  --app-memory-view-item-border: rgba(255, 255, 255, 0.1);
  --app-memory-view-item-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 10px rgba(0, 0, 0, 0.5);
  --app-memory-view-item-hover-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 20px rgba(0, 0, 0, 0.8);
  --app-memory-view-item-text-color: #94a3b8;
  --app-memory-view-item-active-border: #3b82f6;
  --app-memory-view-item-active-glow: rgba(59, 130, 246, 0.5);
  --app-memory-view-add-btn-bg: transparent;
  --app-memory-view-add-btn-border: #334155;
  --app-memory-view-add-btn-color: #64748b;
  --app-memory-view-add-btn-hover-bg: rgba(59, 130, 246, 0.05);
  --app-memory-view-add-btn-hover-border: #3b82f6;
  --app-memory-view-add-btn-hover-color: #3b82f6;
  
  /* --- 10. General Grid --- */
  --app-grid-bg: transparent;
  --app-controls-bg: rgba(15, 23, 42, 0.8);
  --app-dropzone-bg: rgba(255, 255, 255, 0.02);


/* --- Blur for Depth --- */
.app-header, 
.app-sidebar-left, 
.app-sidebar-right,
#memory-view-controls-wrapper {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Base & Reset Styles --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    /* FIX: Changed from 'background-color' to 'background' to support gradients */
    background: var(--app-bg-color); 
    color: var(--app-text-color);
    font-size: 13px;
}

/* ... (Layout styles remain unchanged) ... */
.app-wrapper { display: flex; flex-direction: column; height: 100vh; }
.app-header { 
    height: 50px; 
    background: var(--app-header-bg); 
    border-bottom: 2px solid var(--app-border-color); 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    flex-shrink: 0; 
    z-index: 10; 
    gap: 15px; 
    justify-content: space-between; 
    box-shadow: var(--app-shadow);
}
.app-body {
    display: grid;
    grid-template-columns: 230px 1fr 220px; 
    flex-grow: 1;
    height: calc(100vh - 50px);
}

.app-sidebar-left {
    width: 230px;
    background: var(--app-sidebar-bg);
    border-right: none;
    box-shadow: -5px 0 15px -5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.app-main-content { 
    background-color: var(--app-main-content-bg); 
    position: relative; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    align-items: stretch;
    z-index: 1;
}

.app-sidebar-right {
    width: 220px;
    background: var(--app-sidebar-bg);
    border-left: none;
    box-shadow: -5px 0 15px -5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.app-sidebar-left::after,
.app-sidebar-right::after {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    z-index: 20;

    /* 
       SOFT-BLEND GRADIENT:
       - 0-10%: Bright Shiny Silver
       - 10-35%: Smooth fade into dark gray
       - 35-65%: The "Main 70%" dark gray core
       - 65-90%: Soft fade from gray to Gold-Olive
       - 90-100%: Old Gold-Olive finish
    */
    background: linear-gradient(
        to bottom,
        #E8E8E8 0%,    /* Shiny Silver Top */
        #A0A0A0 1%,   /* Fade to Steel */
        #333333 20%,   /* Fully Steel/Gray at 30% */
        #333333 85%,   /* Stays Gray until 70% */
        #0d0d0d 99%,   /* Fade into Gold-Olive */
        #0d0d0d 100%   /* Gold-Olive Base */
    );
    
    /* Enhanced Glow to hide the transitions and make it look "Techy" */
    box-shadow: 0 0 10px rgba(168, 168, 120, 0.5);
}

/* Positioning */
.app-sidebar-left::after { right: 0; }
.app-sidebar-right::after { left: 0; }

/* ... (Scrollbar and Header content styles remain unchanged) ... */
.grid-scroll-container { flex-grow: 1; overflow-y: hidden; position: relative; }
.grid-scroll-container::-webkit-scrollbar { width: 12px; height: 12px; }
.grid-scroll-container::-webkit-scrollbar-track { background: var(--app-controls-bg, #f1f3f4); }
.grid-scroll-container::-webkit-scrollbar-thumb { background-color: var(--app-border-color, #c1c1c1); border-radius: 6px; border: 3px solid var(--app-controls-bg, #f1f3f4); }
.grid-scroll-container::-webkit-scrollbar-thumb:hover { background-color: var(--app-sidebar-title-color, #a8a8a8); }
.grid-scroll-container { scrollbar-width: thin; scrollbar-color: var(--app-border-color, #c1c1c1) var(--app-controls-bg, #f1f3f4); }

.header-left, .header-center, .header-right { display: flex; align-items: center; gap: 15px; }
.header-center { flex-grow: 1; justify-content: center; }
.header-left { flex-shrink: 0; }
.header-right { flex-shrink: 0; }

/* ==================================================================
   HEADER RIGHT ACTIONS (Settings & Chat Menu)
   ================================================================== */

/* --- 0. WRAPPER FIX (Critical for positioning) --- */
/* This ensures the dropdown anchors to this specific area, not the whole page */
#chat-mode-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

/* --- 1. Settings Button --- */
#openSettingsModalBtn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--app-header-btn-border-color);
    background: var(--app-header-btn-bg);
    color: var(--app-header-btn-color);
    box-shadow: var(--app-header-btn-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 0;
}

#openSettingsModalBtn:hover {
    transform: translateY(-1px);
    color: var(--app-primary-accent);
    border-color: var(--app-primary-accent);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#openSettingsModalBtn .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.4s ease;
}

#openSettingsModalBtn:hover .material-symbols-outlined {
    transform: rotate(90deg);
}

/* --- 2. Chat Mode Trigger (The Pill Button) --- */
#chat-mode-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap; /* Prevents text wrap */
}

#chat-mode-trigger:hover {
    background-color: var(--app-header-controls-bg);
    border-color: var(--app-header-btn-border-color);
}

#chat-mode-trigger .material-symbols-outlined {
    font-size: 18px;
    color: var(--app-primary-accent);
}

#chat-mode-trigger #chat-mode-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-color);
}

/* Active State */
#chat-mode-dropdown.active #chat-mode-trigger {
    background: var(--app-chat-user-bubble-bg);
    border-color: var(--app-primary-accent);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

#chat-mode-dropdown.active #chat-mode-trigger #chat-mode-label,
#chat-mode-dropdown.active #chat-mode-trigger .material-symbols-outlined {
    color: var(--app-chat-user-text-color);
}

/* --- 3. Chat Mode Menu (The Dropdown) --- */
#chat-mode-options {
    /* Anchoring */
    position: absolute;
    top: calc(100% + 10px);
    
    /* SCROLL FIX: Moved from -5px to 10px to pull it away from the screen edge */
    right: 10px; 
    
    /* CRITICAL SIZE FIXES */
    width: 202px !important;
    min-width: 202px !important;
    max-width: 202px !important;
    
    /* THEME SYSTEM FIX: Removed #FFFFFF background */
    background-color: var(--app-chat-input-bg);
    border: 1px solid var(--app-border-color);
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
    border-radius: 12px;
    z-index: 10000;
    padding: 6px;
    list-style: none;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
    
    /* Animation */
    transform-origin: top right;
    animation: menu-pop 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes menu-pop {
    0% { opacity: 0; transform: scale(0.95) translateY(-5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#chat-mode-options li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px; /* Tight, clean padding */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 500;
    /* THEME SYSTEM FIX: Using system text color */
    color: var(--app-text-color);
    margin-bottom: 2px;
}

#chat-mode-options li:hover {
    background-color: var(--app-chat-ai-bubble-bg);
    color: var(--app-primary-accent);
}

#chat-mode-options li .material-symbols-outlined {
    font-size: 18px;
    /* THEME SYSTEM FIX: Used sidebar title variable for guaranteed contrast */
    color: var(--app-sidebar-title-color);
    transition: color 0.15s;
}

#chat-mode-options li:hover .material-symbols-outlined {
    color: var(--app-primary-accent);
}

#chat-mode-options li.selected {
    background: var(--app-chat-user-bubble-bg);
    color: var(--app-chat-user-text-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#chat-mode-options li.selected .material-symbols-outlined {
    color: var(--app-chat-user-text-color);
}

#chat-mode-options li.dropdown-separator {
    height: 1px;
    background-color: var(--app-border-color);
    margin: 4px 8px;
    padding: 0;
    pointer-events: none;
}

/* --- Deployment Header Styling --- */
.header-deploy-btn {
    /* 1. Remove heavy gradient and shadow */
    background: transparent !important; 
    color: #10b981 !important; /* Use a subtle brand color */
    
    /* 2. Add the colored border */
    border: 1px solid #10b981 !important; 
    
    /* 3. Smaller size */
    padding: 2px 10px !important;
    height: 28px !important;
    font-size: 12px !important;
    
    /* 4. Subtle adjustments */
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 5. Clean up the icon size to fit the smaller button */
.header-deploy-btn .material-symbols-outlined {
    font-size: 16px !important;
}

.header-deploy-btn:hover {
    background: #10b981 !important;
    color: white !important;
    transform: translateY(-1px);
}

.header-sync-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important; /* Dollar Green */
    color: white !important;
    border: none !important;
    padding: 2px 12px !important;
    font-weight: 700 !important;
    height: 32px !important;
    border-radius: 6px 0 0 6px !important; /* Joined with visit btn */
}

.header-visit-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-left: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 6px 6px 0 !important;
}

.header-deploy-btn:hover, .header-sync-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ... (Project Folders/Memory View styles remain unchanged) ... */
#memory-view-controls-wrapper {
    position: sticky; top: 0; z-index: 6;
    background-color: var(--app-memory-view-bg);
    padding: 20px 15px 15px 15px; border-bottom: 1px solid var(--app-border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex; align-items: flex-end; gap: 12px; flex-shrink: 0;
    overflow-x: auto; overflow-y: hidden; height: 120px;
}
#memory-view-controls-wrapper.hidden { display: none; }
.memory-view-list { display: flex; gap: 12px; padding-bottom: 5px; align-items: flex-end; }
.memory-view-item {
    position: relative; width: 90px; height: 65px; flex-shrink: 0; cursor: pointer;
    background: var(--app-memory-view-item-bg);
    border: 1px solid var(--app-memory-view-item-border);
    border-radius: 0 8px 8px 8px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 5px; margin-right: 2px;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); z-index: 1;
}
.memory-view-item::before {
    content: ''; position: absolute; top: -11px; left: -1px; width: 40px; height: 12px;
    background: inherit; border: 1px solid var(--app-memory-view-item-border);
    border-bottom: none; border-radius: 6px 6px 0 0; z-index: 2;
}
.memory-view-item::after {
    content: ''; position: absolute; top: -1px; left: 0; width: 38px; height: 2px;
    background: inherit; z-index: 3;
}
.memory-view-item:hover {
    transform: translateY(-4px); filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4)) brightness(1.1); z-index: 10;
}
.memory-view-item.active {
    --glow-color: var(--app-memory-view-item-active-glow);
    z-index: 5;
    background: linear-gradient(160deg, #333, #111);
    border-color: var(--app-memory-view-item-active-border);
    animation: folder-glow-pulse 3s infinite ease-in-out;
}
.memory-view-item.active::before { border-color: var(--app-memory-view-item-active-border); border-bottom: none; background: inherit; }
.memory-view-item .view-name {
    font-size: 11px; font-weight: 500; color: var(--app-memory-view-item-text-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); word-break: break-word; line-height: 1.2;
    margin-top: 4px; position: relative; z-index: 4;
}
.memory-view-item.active .view-name { color: var(--app-memory-view-item-active-border); font-weight: 700; }
.view-color-swatch { width: 20px; height: 3px; border-radius: 2px; margin-bottom: 4px; opacity: 0.8; box-shadow: 0 0 5px currentColor; display: block !important; }

/* Folder Decor: Optional subtle line or icon inside */
.view-color-swatch { 
    width: 20px; 
    height: 3px; 
    border-radius: 2px; 
    margin-bottom: 4px;
    opacity: 0.8;
    box-shadow: 0 0 5px currentColor;
    /* Reuse the swatch div, but style it as a folder label line */
    display: block !important; 
}

/* --- 4. Action Icons (Appear on Hover) --- */
.view-item-actions {
    position: absolute;
    bottom: -32px; /* Hidden below */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
    background: rgba(0,0,0,0.8);
    border-radius: 0 0 6px 6px;
    backdrop-filter: blur(4px);
    transition: bottom 0.2s ease-out, opacity 0.2s ease;
    opacity: 0;
    z-index: 0; /* Behind folder visually until hovered */
}

.memory-view-item:hover .view-item-actions {
    bottom: -28px; /* Drop down */
    opacity: 1;
    z-index: 20;
}

.view-action-btn {
    background: rgba(255,255,255,0.1); 
    border-radius: 4px;
    padding: 4px;
    color: #e0e2e5;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
.view-action-btn:hover { background: white; color: black; transform: scale(1.1); }
.view-action-btn.delete-btn:hover { background: #f87171; color: white; }
.view-action-btn .material-symbols-outlined { font-size: 14px; }


/* --- 5. "New Folder" Button --- */
.add-view-btn {
    position: relative;
    width: 90px;
    height: 65px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--app-memory-view-add-btn-border);
    /* Same folder shape */
    border-radius: 0 8px 8px 8px;
    color: var(--app-memory-view-add-btn-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 2px;
}

/* Tab for Add Button */
.add-view-btn::before {
    content: '';
    position: absolute;
    top: -11px; left: -1px;
    width: 40px; height: 12px;
    border: 1px dashed var(--app-memory-view-add-btn-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.add-view-btn:hover {
    border-color: var(--app-memory-view-add-btn-hover-border);
    color: var(--app-memory-view-add-btn-hover-color);
    background-color: var(--app-memory-view-add-btn-hover-bg);
}
.add-view-btn:hover::before {
    border-color: var(--app-memory-view-add-btn-hover-border);
}

.add-view-btn .material-symbols-outlined { font-size: 20px; margin-bottom: 2px; }
.add-view-btn span:not(.material-symbols-outlined) { font-size: 10px; font-weight: 500; }


/* === REFINED TECH-HUD VIEW CONTROLS === */
.header-view-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(10, 15, 25, 0.6);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
}

.size-tier-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px;
    border-radius: 20px;
}

.size-tier-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1e293b;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* The "Thread" Scale Effect */
.size-tier-btn span {
    display: block;
    width: 6px;
    height: 6px;
    background: #475569;
    border-radius: 50%;
    margin: auto;
    transition: all 0.3s ease;
}

/* Active State: Neon Thread Glow */
.size-tier-btn.active {
    background: #0f172a;
    border-color: var(--app-primary-accent);
    box-shadow: 0 0 10px var(--app-primary-accent);
}

.size-tier-btn.active span {
    background: var(--app-primary-accent);
    transform: scale(1.5);
    box-shadow: 0 0 8px var(--app-primary-accent);
}

/* Tier-specific scaling visual indicator */
.size-tier-btn[data-tier="1"] span { transform: scale(0.6); }
.size-tier-btn[data-tier="3"] span { transform: scale(0.9); }
.size-tier-btn[data-tier="6"] span { transform: scale(1.3); }

/* The Header Toggle Buttons (e.g. mobile/desktop) */
.header-toggle-btn {
    color: var(--app-text-color);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-toggle-btn:hover {
    background: var(--app-primary-accent);
    color: white;
}

/* --- NEW/MOVED: Open Wizard Button Styling in Header === */
.open-wizard-btn {
    width: auto;
    padding: 2px 26px;
    font-size: 16px;
    border-radius: 8px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(45deg, var(--app-primary-accent), var(--app-secondary-accent));
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    /* Added strict inner shadow at the end: inset 0 2px 5px rgba(0,0,0,0.1) */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 10px 7px rgba(255, 255, 255, 0.2), inset 0 25px 5px rgba(0,0,0,0.6);
    white-space: nowrap;
    line-height: 1.0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.open-wizard-btn:hover {
    transform: translateY(-1px);
    /* Enhanced hover shadow */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 10px 7px rgba(255, 255, 255, 0.2), inset 0 25px 5px rgba(0,0,0,0.6);
    filter: brightness(1.05);
}

.open-wizard-btn:active {
    transform: translateY(0px);
    /* Deep pressed look */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 10px 7px rgba(255, 255, 255, 0.2), inset 0 25px 5px rgba(0,0,0,0.6);
    filter: brightness(0.95);
}

.open-wizard-btn .material-symbols-outlined {
    font-size: 22px; /* Slightly larger icon */
    transition: transform 0.3s ease;
}

.open-wizard-btn:hover .material-symbols-outlined {
    transform: scale(1.1) rotate(-10deg);
}

/* === END Wizard Button Styling === */


/* 
================================================================================
  1. SIDEBAR INFRASTRUCTURE & 3D DEPTH (SURFACE LEVEL)
================================================================================
*/

.design-guides-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: transparent; /* Main sidebar background is defined in root */
}

/* 3D Elevation Divider: Creates the 'cliff edge' for the recessed area */
.sidebar-pit-divider {
    height: 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%);
    border-top: 1px solid var(--app-border-color);
    margin-top: 5px;
    flex-shrink: 0;
    z-index: 5;
}

/* Sidebar Section Titles (On Surface) */
.sidebar-section-title-small {
    font-size: 10px; 
    color: var(--app-sidebar-title-color);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px; 
    padding: 0 20px; /* Increased from 15px to prevent edge-hugging */
    letter-spacing: 0.8px;
    opacity: 0.9;
}

.sidebar-section {
    padding: 0 15px 12px 15px;
}

/* 
================================================================================
  2. ASSEMBLY PIT (RECESSED AREA)
================================================================================
*/

/* Tab Placeholder Row - Anchored to the pit */
.sidebar-tabs-row {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    margin-bottom: -1px; /* Overlaps header border */
    z-index: 10;
}

.sidebar-tab-item {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--app-sidebar-title-color);
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--app-border-color);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-cubic);
}

.sidebar-tab-item.active {
    background: var(--app-controls-bg);
    color: var(--app-primary-accent);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.03);
}

.sidebar-tab-item.placeholder {
    opacity: 0.4;
    cursor: default;
}

/* --- PHASE 4: REIMAGINED FOUNDATION SLOT --- */
.foundation-slot-wrapper {
    padding: 15px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-bottom: 1px solid var(--app-border-color);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.foundation-slot-header {
    font-size: 9px;
    font-weight: 900;
    color: var(--app-primary-accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
}

#foundation-pinned-container {
    min-height: 55px;
    /* Glass Effect */
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed var(--app-sidebar-placeholder-border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    cursor: pointer;
}

/* The "Awaiting Input" Pulse */
#foundation-pinned-container:not(.has-content) {
    animation: foundation-pulse 3s infinite ease-in-out;
}

@keyframes foundation-pulse {
    0%, 100% { border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
    50% { border-color: rgba(139, 92, 246, 0.7); box-shadow: 0 0 15px rgba(139, 92, 246, 0.2); }
}

/* ACTIVATED STATE: Vivid & Important */
#foundation-pinned-container.has-content {
    border: 2px solid var(--app-primary-accent);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2), inset 0 0 10px rgba(139, 92, 246, 0.1);
}

/* Stylized placeholder text */
.foundation-placeholder-text {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--app-sidebar-title-color);
    text-align: center;
    pointer-events: none;
    line-height: 1.3;
}

/* The Pit Header - Contains the Scaling Title and Global X */
.assembly-pit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px; /* Balanced internal safe-zone */
    background-color: var(--app-controls-bg);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}

#active-workflow-title {
    font-size: 12px; 
    font-weight: 700;
    color: var(--app-text-color);
    text-transform: none; /* Looks more professional in mixed case */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Global Close Workflow Button (The X) */
#close-workflow-btn, 
.delete-workflow-btn {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--app-sidebar-title-color);
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}


#close-workflow-btn:hover, 
.delete-workflow-btn:hover {
    background-color: #fee2e2;
    color: #ef4444;
    border-color: #fecaca;
    transform: scale(1.05);
}

/* Recessed Scrollable Body - THE PIT */
.design-guides-scrollable-area {
    flex-grow: 1;
    overflow-y: auto;
    /* 3D Depth Visuals */
    background-color: rgba(0, 0, 0, 0.03); 
    box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.08), 
                inset 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 15px 10px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

/* --- Workflow Item Control Wrapper --- */
.workflow-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px; /* Keeps controls away from text */
}

/* 
================================================================================
  3. WORKFLOW ITEMS (GLOSSY REFINEMENT WITH REMOVE SIGNS)
================================================================================
*/

.workflow-editor-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workflow-section-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 
                0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s var(--bounce-out), filter 0.2s ease;
    cursor: default;
}

.workflow-section-item:hover {
    filter: brightness(1.08);
    transform: translateX(2px);
}

.workflow-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Ensures text truncates inside flex */
    flex-grow: 1;
}

.workflow-section-item .section-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflow-section-item .drag-handle {
    opacity: 0.6;
    cursor: grab;
}

/* Individual Item Remove Button (The Sign) */
.workflow-section-item .delete-workflow-btn {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.workflow-section-item .delete-workflow-btn:hover {
    opacity: 1;
    background: var(--color-error);
    transform: scale(1.1);
}

.workflow-section-item .delete-workflow-btn .material-symbols-outlined {
    font-size: 14px;
}

/* Color Coding Gradients (Enhanced) */
.workflow-type-website { background: linear-gradient(135deg, #4ade80, #16a34a); }
.workflow-type-article { background: linear-gradient(135deg, #c084fc, #9333ea); }
.workflow-type-image_gallery { background: linear-gradient(135deg, #fbbf24, #d97706); }
.workflow-type-styling { background: linear-gradient(135deg, #fb923c, #ea580c); }
.workflow-type-project { background: linear-gradient(135deg, #60a5fa, #2563eb); }

/* 
================================================================================
  4. PLACEHOLDERS & UTILITIES
================================================================================
*/

.workflow-placeholder {
    font-size: 11px;
    color: var(--app-sidebar-placeholder-color);
    text-align: center;
    padding: 30px 15px;
    border: 1px dashed var(--app-sidebar-placeholder-border-color);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
}

.workflow-placeholder-active {
    border: 1px solid var(--app-sidebar-active-workflow-color);
    background: linear-gradient(135deg, #ffffff, #f0f9ff);
    color: var(--app-text-color);
}

/* Summary and Form Elements inside Sidebar */
.sidebar-summary-item {
    font-size: 12px;
    color: var(--app-text-color);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.sidebar-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--app-sidebar-title-color);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.sidebar-input, .sidebar-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--app-border-color);
    border-radius: 6px;
    font-size: 13px;
    background-color: var(--app-chat-textarea-bg);
    color: var(--app-text-color);
    margin-bottom: 12px;
    transition: border-color 0.2s ease;
}

.sidebar-input:focus, .sidebar-textarea:focus {
    outline: none;
    border-color: var(--app-primary-accent);
}



/* Secondary actions for workflows (Included for context) */
.workflow-actions-secondary {
    display: flex;
    gap: 8px;
}
.workflow-actions-secondary .secondary-action-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
}


/* Sidebar Tab Switching */
.tab-pane {
    display: none;
    flex-direction: column;
    height: 100%;
}

.tab-pane.active {
    display: flex !important; /* Force visibility */
}

/* Specific styling for sidebar link items */
.sidebar-lm-item {
    background: var(--app-header-btn-bg);
    border: 1px solid var(--app-border-color);
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-lm-item:hover {
    transform: translateX(2px);
    border-color: var(--app-primary-accent);
}

.sidebar-lm-item.active {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* Color coding for sidebar links */
.sidebar-lm-item.type-img { border-left-color: #f59e0b; }
.sidebar-lm-item.type-a { border-left-color: #a855f7; }
.sidebar-lm-item.type-link { border-left-color: #06b6d4; }
.sidebar-lm-item.type-css-bg { border-left-color: #ec4899; }

/*
================================================================================
  TOP CONTROLS (FILTER/SORT) - MINIMALIST THEME
================================================================================
*/

/* --- 1. Main Controls Wrapper (Subtle Darker BG) --- */
.top-controls-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px; /* MODIFIED: Was 0. This adds the 10px space you need. */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--app-border-color);
    position: relative;
    z-index: 5;
    background-color: var(--app-controls-bg);
    transition: padding 0.3s ease, margin 0.3s ease;
}

/* --- 2. Filter & Sort Row --- */
.legend-filter-sort-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* Container adapted for folder tabs sticking up */
.filter-button-container {
    display: flex;
    align-items: flex-end; /* Align bottom so tabs align */
    gap: 10px; 
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 5px 5px 5px; /* Top padding for tabs */
    margin-left: 5px;
}
.filter-button-container::-webkit-scrollbar { height: 4px; }
.filter-button-container::-webkit-scrollbar-track { background: transparent; }
.filter-button-container::-webkit-scrollbar-thumb { background: #c6cacf; border-radius: 2px; }

/* --- 3. Filter "Folder" Buttons (Redesigned) --- */
.filter-btn {
    position: relative;
    /* Folder Dimensions */
    width: 52px; 
    height: 38px;
    
    /* Reset & Base */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    
    /* Folder Shape (Sharp top-left for tab connection) */
    border-radius: 0 6px 6px 6px;
    
    /* Default visuals */
    color: rgba(255, 255, 255, 0.95);
    filter: grayscale(20%) opacity(0.6); /* Slightly muted by default */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    z-index: 1;
}

/* --- The Folder Tab (Top-Left) --- */
.filter-btn::before {
    content: '';
    position: absolute;
    top: -7px; /* Tab height */
    left: 0;
    width: 22px; /* Tab width */
    height: 10px; /* Taller to overlap body */
    
    /* Inherit the color class from the parent button */
    background: inherit; 
    
    border-radius: 4px 4px 0 0;
    z-index: 1; /* Same level as body */
}

/* --- Internal Shadow for Depth (Optional Polish) --- */
.filter-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 0 6px 6px 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.05) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Icon Styling */
.filter-btn .material-symbols-outlined {
    font-size: 30px; 
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

/* --- 4. Assigning Persistent Colors (Keep Existing Logic) --- */
.filter-btn.file-type-default {
  /* For the rainbow folder, we need a solid backup for the tab */
  background-image: conic-gradient(from 90deg at 50% 50%, #20c997, #845ef7, #fcc419, #339af0, #ff6b6b, #20c997);
}
/* Special fix for the rainbow tab: clip the conic gradient or use a solid color */
.filter-btn.file-type-default::before {
    background: #20c997; /* Pick one color for the tab */
}

.filter-btn.file-type-html { background-color: #20c997; }
.filter-btn.file-type-article { background-color: #845ef7; }
.filter-btn.file-type-image { background-color: #fcc419; }
.filter-btn.file-type-workflow { background-color: #339af0; }
.filter-btn.file-type-text { background-color: #ff6b6b; } 

/* --- 5. Interactive Effects --- */

/* Hover: Lift folder */
.filter-btn:hover {
    transform: translateY(-2px);
    filter: grayscale(0%) opacity(1) brightness(1.1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Active: "Open" / Highlighted */
.filter-btn.active {
    transform: translateY(-1px);
    filter: grayscale(0%) opacity(1) brightness(1.15);
    /* Add a ring to signify selection clearly */
    box-shadow: 0 0 0 2px var(--app-bg-color), 0 0 0 4px var(--app-primary-accent);
    z-index: 5;
}

.filter-btn.active .material-symbols-outlined {
    transform: scale(1.15);
}

/* --- 6. Sort Dropdown --- */
.sort-dropdown-wrapper {
    flex-shrink: 0;
    position: relative; /* For positioning the dropdown options */
}

/* NEW: Styling for the dropdown trigger button */
.custom-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #f1f3f4;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #3c4043;
    transition: background-color 0.2s, border-color 0.2s;
    min-width: 220px; /* Give it a consistent width */
    text-align: left;
    width: 100%;
}

.custom-dropdown-trigger:hover {
    background-color: #e8eaed;
    border-color: #c6cacf;
}

.custom-dropdown-trigger .label {
    color: #5f6368;
    font-weight: 400;
    margin-right: 4px;
}

.custom-dropdown-trigger .current-selection {
    font-weight: 500;
    flex-grow: 1; /* Takes up available space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-dropdown-trigger .dropdown-arrow {
    color: #5f6368;
    transition: transform 0.2s ease;
    margin-left: auto; /* Pushes arrow to the right */
}

/* Rotate arrow when dropdown is open */
.custom-dropdown-wrapper.open .custom-dropdown-trigger .dropdown-arrow {
    transform: rotate(180deg);
}

/* Styles for the dropdown options list */
.custom-dropdown-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background-color: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 4px 0;
    z-index: 100;
    min-width: 100%; /* Match the width of the trigger button */
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
}

.custom-dropdown-options li {
    padding: 8px 16px;
    font-size: 13px;
    color: #3c4043;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.1s ease;
}

.custom-dropdown-options li:hover {
    background-color: #f1f3f4;
}

.custom-dropdown-options li.selected {
    background-color: #e8f0fe;
    color: #1967d2;
    font-weight: 500;
}


/*
================================================================================
  END OF TOP CONTROLS REDESIGN
================================================================================
*/


/* Scan Actions Row */
.scan-actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.scan-actions-row .scan-label { font-weight: 500; font-size: 12px; color: #1a73e8; margin-right: 5px; display: flex; align-items: center; gap: 4px; }
.scan-actions-row .scan-label .material-symbols-outlined { font-size: 18px; }
.scan-actions-row .advanced-filter-select,
.scan-actions-row .advanced-filter-query-input,
.scan-actions-row input[type="number"] { padding: 5px 8px; border: 1px solid #c6cacf; border-radius: 4px; font-size: 12px; background-color: #fff; color: #3c4043; line-height: 1.4; }
.scan-actions-row .advanced-filter-query-input { flex-grow: 1; min-width: 150px; }
.scan-actions-row .dimensions-ui { display: flex; gap: 5px; align-items: center; }
.scan-actions-row .dimensions-ui input[type="number"] { width: 60px; }
.scan-actions-row .dimensions-ui .to-label { font-size: 11px; color: #5f6368; margin: 0 3px; } 
.scan-actions-row .scan-button { padding: 5px 10px; font-size: 12px; border-radius: 4px; border: none; cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 5px; transition: background-color 0.2s ease; line-height: 1.4; }
.scan-actions-row .scan-button .material-symbols-outlined { font-size: 16px; }
.scan-actions-row .apply-scan-btn { background-color: #1a73e8; color: white; }
.scan-actions-row .apply-scan-btn:hover { background-color: #185abc; }
.scan-actions-row .clear-scan-btn { background-color: #f1f3f4; color: #3c4043; border: 1px solid #dadce0; }
.scan-actions-row .clear-scan-btn:hover { background-color: #e8eaed; }
.scan-actions-row .action-btn { padding: 6px 12px; font-size: 12px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; line-height: 1.4; }
.scan-actions-row .action-btn .material-symbols-outlined { font-size: 18px; }

.top-controls-wrapper.minimized {
    padding-bottom: 0;
    margin-bottom: 0;
    align-items: center;
    min-height: 0;
    border-bottom: none;
}
.top-controls-wrapper.minimized > * {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    flex-basis: 100%;
}

/* Drop Zones & Preview Area */
.zones-container {
    display: flex;
    gap: 12px;
    /* Added margin-top to separate from filter icons */
    margin-top: 12px; 
    margin-bottom: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 200px;
    opacity: 1;
    overflow: visible;
    background-color: transparent; 
    padding: 0 15px 10px 15px; 
    border: none;
}

/* Common Zone Styling */
.zone-area { 
    flex: 1; 
    /* Very subtle border based on app theme */
    border: 1px dashed var(--app-border-color); 
    border-radius: 8px; 
    padding: 12px 16px; 
    text-align: center; 
    /* Extremely subtle glass background (works on dark & light) */
    background-color: rgba(255, 255, 255, 0.03); 
    cursor: pointer; 
    transition: all 0.2s ease-out;
    position: relative; 
    outline: none; 
    min-height: 45px; /* Slightly taller for better text breathing room */
    display: flex; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Hover State - Subtle Polish */
.zone-area:hover { 
    /* Highlight border with primary accent color */
    border-color: var(--app-primary-accent); 
    /* Very subtle lighten effect */
    background-color: rgba(255, 255, 255, 0.08); 
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow lift */
}

/* Text Refinement */
.zone-area p { 
    margin: 0; 
    font-size: 13px; 
    font-weight: 500;
    /* Uses app text color for perfect visibility */
    color: var(--app-text-color); 
    opacity: 0.8; /* Slight transparency for elegance */
    pointer-events: none; 
    user-select: none;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Dragover - Soft Focus Indication */
.file-drop-zone.dragover { 
    background-color: rgba(59, 130, 246, 0.1); 
    border-color: var(--app-primary-accent); 
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); 
    transform: scale(1.01);
}

/* Processing State */
.file-drop-zone.processing-zip { 
    cursor: wait; 
    background-color: rgba(255, 255, 255, 0.1); 
    border-style: solid; 
    border-color: var(--app-border-color);
    opacity: 0.8;
}
.file-drop-zone.processing-zip p::after { 
    content: ' (Unzipping...)'; 
    font-style: italic;
    opacity: 0.7;
}

.file-input { display: none; }

/* Paste Zone Specifics */
.paste-zone { 
    caret-color: var(--app-primary-accent); 
    cursor: text; 
}
.paste-zone:focus {
    border-color: var(--app-primary-accent);
    border-style: solid;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); 
}
.paste-zone:focus p.placeholder-text { display: none; }

/* Minimized State */
.zones-container.minimized { 
    max-height: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    margin-bottom: 0; 
    margin-top: 0; /* Reset margin when hidden */
    opacity: 0; 
    overflow: hidden; 
    pointer-events: none;
}

/* 1. The Wrapper: Fills the screen, creates the Infinite Studio Backdrop */
.preview-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden; 
    position: relative;
    
    /* THE INFINITE ARCHITECTURAL GRID (Extremely subtle) */
    background-color: transparent;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center top;
    
    /* Vignette removed for a solid, infinite flat plane */
}

/* 2. The Scroll Area: This is where cards live */
.grid-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    
    /* FIX: Move scrollbar away from cards */
    /* Padding-right creates space between the cards and the scrollbar */
    padding: 20px 30px 20px 20px; 
    
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-color) transparent;
}

/* Custom Scrollbar Styling for Chrome/Safari */
.grid-scroll-area::-webkit-scrollbar {
    width: 8px;
}
.grid-scroll-area::-webkit-scrollbar-track {
    background: transparent;
    margin-right: 2px;
}
.grid-scroll-area::-webkit-scrollbar-thumb {
    background-color: var(--app-border-color);
    border-radius: 10px;
    border: 2px solid transparent; /* Acts as a margin */
    background-clip: content-box;
}

/* 3. The Muuri Grid: Keep it relative */
.preview-container {
    position: relative;
    width: 100%;
    min-height: 100%;
}

/* === CORRECTED: Card sizing via classes (Expanded to 6 Tiers) === */
.preview-card {
    margin: 10px;
    box-sizing: border-box;
    height: auto !important;
    aspect-ratio: 4 / 3;
    transition: width 0.35s ease-in-out, aspect-ratio 0.35s ease-in-out, box-shadow 0.3s ease;
}

/* NEW TIERS: 1=Micro, 2=Tiny, 3=Small, 4=Medium, 5=Large, 6=Full */
.preview-card.size-tier-1 { width: calc(12.5% - 20px); }    /* 8 across */
.preview-card.size-tier-2 { width: calc(16.666% - 20px); }  /* 6 across */
.preview-card.size-tier-3 { width: calc(25% - 20px); }      /* 4 across (Old 1) */
.preview-card.size-tier-4 { width: calc(33.333% - 20px); }  /* 3 across (Old 2) */
.preview-card.size-tier-5 { width: calc(50% - 20px); }      /* 2 across (Old 3) */
.preview-card.size-tier-6 { width: calc(100% - 20px); }     /* 1 across (Old 4) */

.preview-card.mobile-view-active {
    aspect-ratio: 375 / 667;
}
.preview-container.no-transitions .preview-card {
    transition: none !important;
}
/* =========================================== */

/* Preview Card General Styling */
.preview-card {
    position: absolute; 
    z-index: 1; 
    display: flex; 
    flex-direction: column; 
    
    /* Deep translucent glass */
    background-color: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border-radius: 12px; /* Slightly rounder for modern feel */
    border: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 0; 
    overflow: hidden;
    
    /* HIGH-CONTRAST 3D SHADOW: Deep drop shadow + Sharp inner top-highlight */
    box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.9), 
        0 0 15px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

.preview-card:hover { 
    /* Brighter border and an ambient purple/blue glow on hover */
    border-color: rgba(255, 255, 255, 0.25); 
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 1), 
        0 0 30px rgba(139, 92, 246, 0.15), /* Ambient Glow */
        inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}
.preview-card.muuri-item-dragging { z-index: 3; cursor: grabbing; transform: scale(1.02); border-color: #1a73e8; }
.preview-card.muuri-item-releasing { z-index: 2; }
.preview-card.muuri-item-hidden { z-index: 0; }
.resize-handle { display: none !important; }

/* Mini Header for Preview Card */
.preview-card-mini-header {
    position: absolute; top: 0; left: 0; width: 100%; height: 20px;
    background-color: rgba(60, 64, 67, 0.9);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; padding: 0 4px; gap: 4px;
    z-index: 4; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mini-action-btn {
    width: auto; height: 16px; padding: 0 6px; border: none; border-radius: 3px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #ffffff; transition: opacity 0.2s ease, transform 0.1s ease, background-color 0.2s, box-shadow 0.2s; outline: none;
    font-size: 11px;
    font-weight: 500;
}
.mini-action-btn .material-symbols-outlined { font-size: 14px; font-weight: 400; line-height: 1; margin-right: 2px; }
.mini-action-btn:hover { opacity: 0.85; transform: scale(1.05); }
.mini-action-btn:active { transform: scale(0.98); }

/* Standard Mini Buttons */
.mini-action-btn.close-btn { background-color: #d93025; }
.mini-action-btn.copy-btn { background-color: #1a73e8; }
.mini-action-btn.save-btn { background-color: #1e8e3e; }
.mini-action-btn.info-btn { background-color: #5f6368; }
.mini-action-btn.upscale-btn { background-color: #e37400; }
.mini-action-btn.mobile-toggle-btn { background-color: #8039c1; }
.mini-action-btn.mobile-toggle-btn.active { background-color: #007bff; }
.mini-action-btn-wrapper { margin-left: auto; display: flex; gap: 4px; }

/* RESPONSIVE HEADERS FOR SMALL GRID MODES                            */
/* ================================================================== */

/* --- TIER 1: MICRO VIEW (8 Across) --- */
/* Compact headers to maximize preview space */
.preview-card.size-tier-1 .preview-card-mini-header {
    height: 16px;
    padding: 0 2px;
}

.preview-card.size-tier-1 .mini-action-btn {
    height: 14px;
    padding: 0 2px;
    font-size: 0; /* Hide text if any */
}

.preview-card.size-tier-1 .mini-action-btn .material-symbols-outlined {
    font-size: 12px;
    margin-right: 0;
}

.preview-card.size-tier-1 .preview-header {
    height: 22px;
    top: 16px; /* Positions below the mini-header */
    padding: 0 4px;
}

.preview-card.size-tier-1 .preview-header .drag-handle {
    font-size: 14px;
    padding: 0;
}

.preview-card.size-tier-1 .file-title {
    font-size: 9px;
    margin-right: 2px;
}

.preview-card.size-tier-1 .preview-card-number {
    font-size: 8px;
    top: 19px; /* Aligns with new header height */
    left: 2px;
    padding: 0 2px;
}

.preview-card.size-tier-1 .live-preview {
    margin-top: 38px; /* 16px (Mini) + 22px (Main) */
}

/* --- TIER 2: TINY VIEW (6 Across) --- */
.preview-card.size-tier-2 .preview-card-mini-header {
    height: 20px; /* Slightly reduced from default */
}

.preview-card.size-tier-2 .mini-action-btn {
    height: 16px;
    padding: 0 4px;
}

.preview-card.size-tier-2 .mini-action-btn .material-symbols-outlined {
    font-size: 14px;
}

.preview-card.size-tier-2 .preview-header {
    height: 26px; /* Reduced from 30px */
    top: 20px;
    padding: 0 6px;
}

.preview-card.size-tier-2 .preview-header .drag-handle {
    font-size: 16px;
}

.preview-card.size-tier-2 .file-title {
    font-size: 10px;
}

.preview-card.size-tier-2 .preview-card-number {
    font-size: 9px;
    top: 24px;
    left: 4px;
}

.preview-card.size-tier-2 .live-preview {
    margin-top: 46px; /* 20px + 26px */
}

/* --- TIER 3: SMALL VIEW (4 Across) - Minor Tweaks --- */
/* Just ensuring it looks tidy, mostly keeps defaults */
.preview-card.size-tier-3 .file-title {
    font-size: 11px;
}


/* --- NEW: Add to Project Files Button --- */
.mini-action-btn.add-to-project-btn {
    background: linear-gradient(135deg, #a855f7, #7c3aed); /* Shiny Purple Gradient */
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.3);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-action-btn.add-to-project-btn:hover:not(.collected) {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.1);
    box-shadow: 0 4px 8px rgba(124, 58, 237, 0.4), inset 0 1px 1px rgba(255,255,255,0.3);
}

.mini-action-btn.add-to-project-btn:active:not(.collected) {
    transform: translateY(0) scale(1);
    filter: brightness(0.95);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1);
}

/* "Collected" State Styling */
.mini-action-btn.add-to-project-btn.collected {
    background: linear-gradient(135deg, #22c55e, #16a34a); /* Green Success Gradient */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
    pointer-events: none; /* Disable further clicks */
}

.mini-action-btn.add-to-project-btn .material-symbols-outlined {
    transition: transform 0.3s ease;
}

.mini-action-btn.add-to-project-btn:hover:not(.collected) .material-symbols-outlined {
    transform: scale(1.2) rotate(-15deg); /* Magic animation */
}

/* 
   -------------------------------------------------------
   NEW: Styles for Link Manager & Live Edit Buttons
   -------------------------------------------------------
*/

/* 1. Link Manager Button (Pink-Purple-Green Gradient) */
.mini-action-btn.link-mode-btn {
    background: linear-gradient(135deg, #ec4899, #a855f7, #10b981);
    color: white;
    border: none;
    box-shadow: 0 2px 5px rgba(168, 85, 247, 0.3);
    transition: all 0.2s ease;
}

.mini-action-btn.link-mode-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4); /* Greenish glow on hover */
}

.mini-action-btn.link-mode-btn:active {
    transform: scale(0.95);
}

/* 2. Live Edit Text Button (Cyan-Blue "Electric" Gradient) */
.mini-action-btn.live-edit-btn {
    background: linear-gradient(135deg, #06b6d4, #3b82f6); /* Cyan to Blue */
    color: white;
    border: none;
    box-shadow: 0 2px 5px rgba(6, 182, 212, 0.3);
    transition: all 0.2s ease;
}

.mini-action-btn.live-edit-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); /* Blue glow on hover */
}

.mini-action-btn.live-edit-btn:active {
    transform: scale(0.95);
}

/* Finalize & Edit Buttons */
.mini-action-btn.edit-sections-btn {
    background: linear-gradient(45deg, #1e8e3e, #28a745);
    box-shadow: 0 0 4px rgba(46, 204, 113, 0.5);
}
.mini-action-btn.edit-sections-btn:hover {
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.8);
}
.mini-action-btn.finalize-page-btn {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    animation: finalize-pulse 2s infinite;
}
@keyframes finalize-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 65, 108, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(255, 65, 108, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 65, 108, 0); }
}


/* Card Number Display */
.preview-card-number {
    position: absolute; top: 23px; left: 3px; background-color: rgba(0, 0, 0, 0.6);
    color: white; font-size: 10px; font-weight: bold; padding: 1px 4px;
    border-radius: 3px; z-index: 4; line-height: 1; pointer-events: none;
}

/* Preview Header - Shaded Gradient Update */
.preview-header {
    position: absolute; 
    top: 20px; 
    left: 0; 
    width: 100%; 
    height: 30px; 
    
    /* 1. Base Color from Theme */
    background-color: var(--app-card-header-bg);
    
    /* 2. The Subtle Shading Gradient (Adds curvature/depth) */
    background-image: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.6) 0%, 
        rgba(255, 255, 255, 0) 50%, 
        rgba(0, 0, 0, 0.03) 100%
    );
    
    /* 3. Top Highlight for "Sharp" feel */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    
    z-index: 3; 
    display: flex; 
    align-items: center; 
    padding: 0 8px 0 12px;
    justify-content: space-between; 
    border-radius: 0; 
    cursor: default;
    border-bottom: 1px solid var(--app-border-color); 
    flex-shrink: 0;
}
/* --- NEW: Drag Handle Styling for Preview Cards --- */
.preview-header .drag-handle {
    font-size: 20px;
    color: #9aa0a6; /* A neutral, non-intrusive color */
    cursor: grab;
    padding: 0 6px 0 2px; /* Give it some space */
    line-height: 1;
    transition: color 0.2s ease;
}

.preview-header:hover .drag-handle {
    color: #5f6368; /* Darken on hover for better affordance */
}

.muuri-item-dragging {
    cursor: grabbing;
}
.muuri-item-dragging .drag-handle {
    cursor: grabbing; /* Change cursor during the drag operation */
}

/* Adjust file-title padding to accommodate the new handle */
.file-title {
    padding-left: 0; /* Remove old padding */
    font-size: 12px; font-weight: 500; color: var(--app-card-header-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; text-align: left; margin-right: 8px; z-index: 3; pointer-events: none;
}


/* Live Preview Content Area */
.live-preview {
    margin-top: 50px; background-color: var(--app-card-preview-bg); border-radius: 0 0 8px 8px;
    overflow: hidden; position: relative; width: 100%; flex-grow: 1; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    cursor: default; border: none;
}
/* --- START OF FIX --- */
.html-preview-container { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
    background: var(--app-card-preview-bg); /* Use the theme variable instead of hardcoded white */
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
/* --- END OF FIX --- */
.html-preview-container iframe { border: none; transform-origin: top left; position: absolute; top: 0; left: 0; background: white; }

/* Prevent layout shifts during grid resizing */
.html-preview-container {
    contain: strict; /* High performance: tells browser this element won't change size of parents */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Instant grid resizing class */
.no-transitions .preview-card {
    transition: none !important;
}

.no-transitions iframe {
    transition: none !important;
}

/* Ensure iframe doesn't have its own border or padding that messes up math */
iframe {
    border: none;
    margin: 0;
    padding: 0;
}

/* ==================================================================
   UNIFIED TEXT STYLING: CONVERSATION & PASTED TEXT
   ================================================================== */

.conversation-preview-container,
.pasted-html-snippet {
    /* 1. Shared Foundation (Identical Look) */
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    
    font-family: 'Manrope', 'Roboto', sans-serif !important;
    font-weight: 500 !important;   /* Medium weight (Match) */
    color: #1e293b !important;     /* Dark Slate (Match) */
    background-color: #ffffff !important;
    
    /* Base Size for standard view */
    font-size: 14px !important;    
    line-height: 1.6 !important;   

    /* Scrollbars */
    overflow-y: auto !important;   
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* --- Specific Layout: Conversation (Bubbles) --- */
.conversation-preview-container {
    padding: 10px !important;      /* Tight padding for chat */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    gap: 16px !important; 
    white-space: normal !important; 
}

/* --- Specific Layout: Pasted Text (Document) --- */
.pasted-html-snippet {
    padding: 20px !important;      /* More breathing room for documents */
    display: block !important;
    white-space: pre-wrap !important; /* Preserve paragraphs */
    word-wrap: break-word !important;
}

.pasted-html-snippet * { 
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    background-color: transparent !important;
    margin: 0 0 0.5em 0 !important; /* Add spacing between paragraphs */
    padding: 0 !important;
}

/* --- Shared Scrollbar Styling --- */
.pasted-html-snippet::-webkit-scrollbar,
.conversation-preview-container::-webkit-scrollbar {
    width: 8px;
}
.pasted-html-snippet::-webkit-scrollbar-track,
.conversation-preview-container::-webkit-scrollbar-track {
    background: transparent;
}
.pasted-html-snippet::-webkit-scrollbar-thumb,
.conversation-preview-container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
    border: 2px solid #ffffff;
}

/* ==================================================================
   GRID TIER SCALING (Applying SAME rules to both)
   ================================================================== */

/* For Micro (Tier 1) and Tiny (Tier 2) views */
.preview-card.size-tier-1 .conversation-preview-container,
.preview-card.size-tier-2 .conversation-preview-container,
.preview-card.size-tier-1 .pasted-html-snippet,
.preview-card.size-tier-2 .pasted-html-snippet {
    /* Exact same scaling for both types */
    font-size: 18px !important;    
    font-weight: 600 !important;   /* Slightly bolder for readability */
    line-height: 1.4 !important;
}

/* Layout Adjustments for Small Sizes */
.preview-card.size-tier-1 .conversation-preview-container,
.preview-card.size-tier-2 .conversation-preview-container {
    padding: 15px !important;
    gap: 8px !important;
}

.preview-card.size-tier-1 .pasted-html-snippet,
.preview-card.size-tier-2 .pasted-html-snippet {
    padding: 15px !important;
}
.pasted-html-snippet * { 
    margin: revert; 
    padding: revert; 
    font-size: revert;
    line-height: revert; 
    color: revert; 
    background: revert; 
}
.live-preview img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.live-preview video { display: block; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.live-preview audio { display: block; margin: 10px auto 5px auto; max-width: 100%; width: calc(100% - 20px); filter: saturate(0.8); flex-shrink: 0; }
.audio-preview-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: flex-start; }
.audio-visualizer-canvas { display: block; width: calc(100% - 20px); height: 80px; margin: 0 auto 10px auto; background-color: rgba(230, 230, 230, 0.1); border-radius: 4px; flex-grow: 1; min-height: 50px; }
.live-preview pre { width: 100%; height: 100%; overflow: auto; white-space: pre-wrap; word-wrap: break-word; font-family: 'Roboto Mono', monospace; font-size: 12px; color: #3c4043; background-color: #f8f9fa; padding: 10px; box-sizing: border-box; margin:0; }
.live-preview .preview-not-available { display: block; margin: auto; font-size: 12px; color: #5f6368; text-align: center; padding: 15px; }

/* Prevent scroll chaining in preview containers */
.html-preview-container,
.live-preview {
    overscroll-behavior: contain;
}

/*
================================================================================
  DEFINITIVE FIX: WORKFLOW PREVIEW STYLING
================================================================================
*/
.live-preview.workflow-preview-container {
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #f8fafc;
    flex-grow: 1; /* <-- This is the key fix to fill the parent container */
}

.workflow-preview-container .workflow-header {
    flex-shrink: 0;
    position: relative; /* Overrides absolute positioning from general .preview-header */
    top: auto;
    left: auto;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.05);
}

.workflow-preview-container .workflow-details {
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    flex-shrink: 0;
}

.workflow-preview-container .workflow-actions-title {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    color: #64748b;
    padding: 8px 12px 4px 12px;
    flex-shrink: 0;
}

.workflow-preview-container .workflow-actions {
    flex-grow: 1;
    overflow-y: auto; /* <-- Allows content to scroll */
    padding: 0 12px 10px 12px;
    min-height: 0; /* Necessary for flex-grow to work with overflow */
}

.workflow-preview-container .workflow-footer {
    padding: 10px;
    border-top: 1px solid #eef2f7;
    flex-shrink: 0;
    background-color: #f1f5f9;
}

.workflow-preview-container .workflow-execute-btn {
    width: 100%;
    padding: 8px 12px;
}
/* ============================================================================= */


/* Card Actions Dropdown */
.card-actions-dropdown-container { position: relative; flex-shrink: 0; }
.card-options-trigger { background: transparent; border: none; color: #5f6368; cursor: pointer; font-size: 18px; padding: 0 4px; line-height: 1; transition: color 0.2s ease, background-color 0.2s ease; display: flex; align-items: center; height: 100%; border-radius: 50%; width: 24px; height: 24px; justify-content: center; }
.card-options-trigger:hover { color: #202124; background-color: rgba(60, 64, 67, .08); }
.card-options-trigger::after { content: '⋮'; font-size: 16px; display: inline-block; line-height: 1; font-weight: bold; }
.card-options-dropdown { display: none; position: absolute; top: calc(100% + 2px); right: 0; background-color: #ffffff; border: 1px solid #dadce0; border-radius: 4px; padding: 6px 0; z-index: 10; min-width: 130px; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15); list-style: none; margin: 0; }
.card-actions-dropdown-container.open .card-options-dropdown { display: block; }
.dropdown-item { display: block; background: none; border: none; color: #3c4043; padding: 8px 16px; text-align: left; font-size: 13px; cursor: pointer; width: 100%; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.dropdown-item:hover { background-color: #f1f3f4; color: #202124; }
.dropdown-item:disabled, .dropdown-item.disabled { color: #bdc1c6 !important; cursor: not-allowed !important; background-color: transparent !important; }
.preview-card:not(.has-html-preview) .mobile-toggle-action,
.preview-card:not([data-is-composed-page="true"]) .edit-sections-action { 
    display: none;
}
.dropdown-separator { height: 1px; background-color: #e0e0e0; margin: 6px 0; }

/* Overlay & Popups */
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); z-index: 999; }

/* --- Popups Base Styles --- */
.code-popup, .upscale-popup, .text-content-popup, .edit-prompt-popup, .page-editor-modal, .settings-modal, .workflow-preview-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff; padding: 0; border-radius: 8px;
    max-height: 95vh; overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
    border: 1px solid #dadce0;
    display: flex; flex-direction: column;
}

.code-popup, .upscale-popup, .text-content-popup, .edit-prompt-popup {
    z-index: 1000; width: 90%; max-width: 1400px; height: 90%;
}

.code-popup-header, .upscale-popup-header, .text-content-popup-header, .edit-prompt-popup-header { 
    padding: 12px 20px; flex-shrink: 0; align-items: center;
    display: flex; justify-content: space-between; border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa; 
}
.code-popup-title, .upscale-popup-title, .text-content-popup-header h3, .edit-prompt-popup-header h3 { 
    font-size: 15px; color: #202124; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 40px);
    font-weight: 500; margin: 0;
}
.code-popup-content, .upscale-preview, .text-content-popup-body, .edit-prompt-popup-body { 
    flex-grow: 1; overflow: auto; position: relative;
    background-color: #f8f9fa; padding: 15px;
}
.code-popup-content { display: flex; justify-content: center; }
.upscale-preview { display: flex; align-items: center; justify-content: center; }

.code-popup pre { font-size: 13px; color: #3c4043; padding: 15px; margin: 0; white-space: pre-wrap; word-break: break-word; width: 100%; height: 100%; box-sizing: border-box; text-align: left; background-color: #f8f9fa; font-family: 'Roboto Mono', monospace; }
.upscale-preview img, .upscale-preview video, .upscale-preview iframe, .upscale-preview pre { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; object-fit: contain; border: none; background-color: white; }
.upscale-preview iframe { width: 100%; height: 100%; min-height: 400px; }

.code-popup-close, .upscale-popup-close, .text-content-popup-close, .edit-prompt-popup-close { 
    background-color: transparent; color: #5f6368; border: none; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 22px; line-height: 1; flex-shrink: 0;
    transition: color 0.2s ease, background-color 0.2s ease; font-weight: 300;
}
.code-popup-close:hover, .upscale-popup-close:hover, .text-content-popup-close:hover, .edit-prompt-popup-close:hover {
    color: #202124; background-color: rgba(60, 64, 67, .08);
}
.copied-notification { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background-color: #3c4043; color: #ffffff; padding: 6px 12px; border-radius: 4px; font-size: 11px; z-index: 11; opacity: 0; transition: opacity 0.3s ease, bottom 0.3s ease; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* Text Content Popup Specific Styles */
.text-content-popup { width: 600px; max-width: 90vw; height: auto; max-height: 80vh; min-height: 300px; }
.tag-input-area { display: flex; gap: 10px; margin-bottom: 15px; }
.tag-input-area input[type="text"] { flex-grow: 1; padding: 8px 10px; border: 1px solid #dadce0; border-radius: 4px; font-size: 13px; }
.tag-input-area button { padding: 8px 12px; background-color: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; }
.tag-input-area button:hover { background-color: #1765c2; }
.tag-list-container { display: flex; flex-direction: column; gap: 12px; }
.tag-item { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tag-item-header { display: flex; justify-content: space-between; align-items: center; }
.tag-name-display { font-weight: 500; color: #3c4043; background-color: #e8f0fe; padding: 3px 8px; border-radius: 4px; font-size: 12px; border: 1px solid #d2e3fc; }
.tag-item textarea { width: 100%; min-height: 60px; max-height: 200px; padding: 8px; border: 1px solid #dadce0; border-radius: 4px; font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.remove-tag-btn { background: none; border: none; color: #d93025; font-size: 18px; cursor: pointer; padding: 2px; border-radius: 50%; line-height: 1; display: flex; align-items: center; justify-content: center; }
.remove-tag-btn:hover { background-color: rgba(217, 48, 37, 0.1); }
.text-content-popup-footer { padding: 12px 20px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 10px; background-color: #f8f9fa; }
.text-content-popup-footer button, .page-editor-footer button, .workflow-preview-footer button { padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; border: 1px solid transparent; }
.text-content-popup-footer .primary-action-btn, .page-editor-footer .primary-action-btn, .workflow-preview-footer .primary-action-btn { background-color: #1a73e8; color: white; }
.text-content-popup-footer .primary-action-btn:hover, .page-editor-footer .primary-action-btn:hover, .workflow-preview-footer .primary-action-btn:hover { background-color: #1765c2; }
.text-content-popup-footer .secondary-action-btn, .page-editor-footer .secondary-action-btn, .workflow-preview-footer .secondary-action-btn { background-color: #f1f3f4; color: #3c4043; border-color: #dadce0; }
.text-content-popup-footer .secondary-action-btn:hover, .page-editor-footer .secondary-action-btn:hover, .workflow-preview-footer .secondary-action-btn:hover { background-color: #e8eaed; }

/* Edit Prompt Popup Styles */
.edit-prompt-popup { width: 700px; max-width: 90vw; height: auto; max-height: 80vh; min-height: 250px; }
#editPromptTextarea { flex-grow: 1; width: 100%; padding: 10px; border: 1px solid #dadce0; border-radius: 4px; font-family: 'Roboto Mono', monospace; font-size: 13px; line-height: 1.6; resize: vertical; min-height: 150px; }
.edit-prompt-popup-footer { padding: 12px 20px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; background-color: #f8f9fa; }
.edit-prompt-popup-footer .primary-action-btn { padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; border: 1px solid transparent; background-color: #1a73e8; color: white; }
.edit-prompt-popup-footer .primary-action-btn:hover { background-color: #1765c2; }


/*
================================================================================
  PAGE EDITOR MODAL STYLES (REDESIGNED - DARK MODE "SECRET TOOL" THEME)
================================================================================
*/
.page-editor-modal { 
    z-index: 1001; 
    width: 95%; 
    max-width: 1800px; 
    height: 90vh; 
    background-color: #1a1d21;
    border: 1px solid #33373d;
    box-shadow: 0 10px 50px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.page-editor-header { 
    padding: 12px 20px; 
    flex-shrink: 0; 
    align-items: center; 
    display: flex; 
    justify-content: space-between; 
    border-bottom: 1px solid #33373d; 
    background-color: #23272c; 
}
.page-editor-title { 
    font-size: 15px; 
    color: #e0e2e5; 
    font-weight: 500; 
    margin: 0; 
}
.page-editor-close { 
    background: none; 
    border: none; 
    font-size: 22px; 
    cursor: pointer; 
    padding: 5px; 
    border-radius: 50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color: #9b9fa5; 
}
.page-editor-close:hover { 
    background-color: rgba(255, 255, 255, .08); 
    color: #ffffff; 
}

.page-editor-body {
    flex-grow: 1; 
    display: grid; 
    grid-template-columns: minmax(400px, 1fr) 2fr 1fr;
    gap: 0; 
    overflow: hidden;
    background-color: #33373d;
    position: relative;
}

.page-editor-pane {
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
    background-color: #1a1d21; 
}

/* --- Preview Pane --- */
#page-editor-preview-pane {
    grid-column: 1 / 2;
    background-color: #101214; 
    padding: 10px;
    border-right: 1px solid #33373d;
    justify-content: center;
    align-items: center; /* Re-center for proportional scaling */
    transition: max-width 0.4s ease-in-out;
}
#page-editor-preview-pane.preview-pane-mobile {
    max-width: 395px; /* 375px + (10px padding * 2) */
    align-items: center;
}

.editor-preview-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center; /* Re-center for proportional scaling */
    justify-content: center;
    width: 100%;
    min-height: 0;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: auto; /* Changed from hidden/auto */
}

.editor-preview-wrapper.mobile-view-active {
    align-items: center;
}

.editor-preview-wrapper .html-preview-container {
    background-color: #fff;
    width: 100%;
    /* CRITICAL FIX: The height: 100% property is removed. */
    /* The height will now be controlled entirely by the JS scaling function. */
    position: relative;
    overflow: hidden;
}

/* --- Code Editor Pane --- */
#page-editor-code-pane {
    grid-column: 2 / 3;
    padding: 0;
    border-right: 1px solid #33373d;
}
#page-editor-code-pane .fragment-editor-header {
    display: flex; 
    align-items: center; 
    padding: 8px 15px; 
    border-bottom: 1px solid #33373d; 
    background-color: #23272c; 
    flex-shrink: 0; 
}
#page-editor-code-pane #codeEditorTitle { 
    font-size: 14px; 
    font-weight: 500; 
    margin: 0; 
    text-transform: uppercase;
    color: #e0e2e5;
}
#page-editor-code-pane .fragment-editor-content { 
    flex-grow: 1; 
    display: flex;
    overflow: hidden; 
}
#page-editor-code-pane .editor-pane {
    flex-grow: 1;
    display: flex;
    background-color: #000000;
    position: relative;
}
#htmlFragmentTextarea, #highlighting-pre { 
    width: 100%; 
    height: 100%; 
    border: none; 
    resize: none; 
    padding: 12px; 
    font-family: 'Roboto Mono', monospace; 
    font-size: 14px; 
    line-height: 1.6; 
    white-space: pre; 
    overflow-wrap: normal;
    overflow: auto;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    scrollbar-color: #4a4f58 #23272c;
}
#htmlFragmentTextarea::-webkit-scrollbar, #highlighting-pre::-webkit-scrollbar { width: 10px; }
#htmlFragmentTextarea::-webkit-scrollbar-track, #highlighting-pre::-webkit-scrollbar-track { background: #23272c; }
#htmlFragmentTextarea::-webkit-scrollbar-thumb, #highlighting-pre::-webkit-scrollbar-thumb { background: #4a4f58; border-radius: 5px; }
#htmlFragmentTextarea::-webkit-scrollbar-thumb:hover, #highlighting-pre::-webkit-scrollbar-thumb:hover { background: #6b707a; }


#htmlFragmentTextarea { 
    color: transparent; 
    background-color: transparent; 
    outline: none; 
    caret-color: #528bff;
    z-index: 1;
}
#highlighting-pre {
    z-index: 0;
    pointer-events: none;
}
#highlighting-content {
    display: block;
    color: #abb2bf;
}
/* Atom One Dark inspired theme */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #5c6370; font-style: italic; }
.token.punctuation { color: #abb2bf; }
.token.selector, .token.tag { color: #e06c75; }
.token.property, .token.boolean, .token.number, .token.constant, .token.symbol, .token.attr-name, .token.deleted { color: #d19a66; }
.token.string, .token.char, .token.attr-value, .token.builtin, .token.inserted { color: #98c379; }
.token.operator, .token.entity, .token.url, .token.keyword { color: #56b6c2; }
.token.atrule, .token.function, .token.class-name { color: #61afef; }
.token.regex, .token.important, .token.variable { color: #c678dd; }


/* --- AI Assistant Pane --- */
#page-editor-ai-pane {
    grid-column: 3 / 4;
    padding: 15px;
}
#page-editor-ai-pane .pane-title {
    font-size: 13px; 
    font-weight: 500; 
    color: #e0e2e5;
    margin: 0 0 15px 0; 
    flex-shrink: 0;
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}
.ai-fragment-chat-pane {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: #23272c;
    border: 1px solid #33373d;
    border-radius: 6px;
    overflow: hidden;
}
.ai-fragment-chat-output { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 10px; 
    font-size: 13px; 
    line-height: 1.5; 
    display: flex; 
    flex-direction: column;
}
.ai-fragment-chat-input-area { 
    display: flex; 
    padding: 10px; 
    border-top: 1px solid #33373d; 
    background-color: #1a1d21; 
    flex-shrink: 0; 
    align-items: flex-start; 
}
#aiFragmentPromptInput { 
    flex-grow: 1; 
    min-height: 54px; 
    max-height: 80px; 
    padding: 8px; 
    border: 1px solid #33373d; 
    border-radius: 4px; 
    resize: none; 
    margin-right: 8px; 
    font-family: inherit; 
    font-size: 13px;
    background-color: #23272c;
    color: #e0e2e5;
}
#aiFragmentPromptInput:focus {
    border-color: #528bff;
    box-shadow: 0 0 0 3px rgba(82, 139, 255, 0.2);
}
#aiFragmentSubmitPromptBtn { 
    padding: 0 10px; 
    height: 34px; 
    background: linear-gradient(to right, #4F80FF, #2C6BFF);
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    align-self: flex-end; 
    transition: all 0.2s ease;
}
#aiFragmentSubmitPromptBtn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(82, 139, 255, 0.5);
}
#aiFragmentSubmitPromptBtn .material-symbols-outlined { 
    font-size: 18px; 
}
.ai-fragment-chat-output p { 
    margin-bottom: 8px; 
    padding: 8px 12px; 
    border-radius: 12px; 
    max-width: 95%; 
    word-wrap: break-word; 
    white-space: pre-wrap; 
}
.ai-fragment-chat-output .user-message { 
    background-color: #2c3a5e; 
    color: #d1d8ff; 
    align-self: flex-end; 
    margin-left: auto;
    border-top-right-radius: 4px;
}
.ai-fragment-chat-output .ai-message { 
    background-color: #33373d; 
    color: #d1d5db; 
    align-self: flex-start;
    border-top-left-radius: 4px;
}
.ai-fragment-chat-output .ai-message#ai-fragment-thinking-indicator { 
    font-style: italic; 
    background-color: #3f352b;
    color: #ffedd5;
}
.ai-fragment-chat-output .system-message { 
    background-color: transparent; 
    color: #00ff95;
    font-style: italic; 
    font-family: 'Roboto Mono', monospace;
    align-self: center; 
    width: 100%; 
    text-align: center; 
    font-size: 11px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 255, 149, 0.2);
    border-radius: 4px;
}

/* --- Editor Footer --- */
.page-editor-footer { 
    padding: 12px 20px; 
    border-top: 1px solid #33373d; 
    background-color: #23272c; 
    flex-shrink: 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.page-editor-footer-left { 
    flex-grow: 1; 
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-editor-footer-right { 
    display: flex; 
    gap: 10px; 
    align-items: center; 
}
#editor-preview-toggle-btn {
    padding: 6px;
    border: 1px solid #4a4f58;
    background-color: #33373d;
    color: #e0e2e5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
#editor-preview-toggle-btn .material-symbols-outlined {
    font-size: 20px;
}
#editor-preview-toggle-btn.active {
    background-color: #528bff;
    color: #ffffff;
    border-color: #528bff;
}
.page-editor-footer .secondary-action-btn {
    background-color: #33373d;
    color: #d1d5db;
    border-color: #4a4f58;
}
.page-editor-footer .secondary-action-btn:hover {
    background-color: #4a4f58;
    color: #fff;
}
.page-editor-footer .primary-action-btn {
    background: linear-gradient(to right, #4F80FF, #2C6BFF);
    color: white;
    box-shadow: 0 2px 8px rgba(82, 139, 255, 0.2);
    border: none;
}
.page-editor-footer .primary-action-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 4px 12px rgba(82, 139, 255, 0.4);
}

.page-editor-status-indicator { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 13px; 
    color: #9b9fa5; 
}
.page-editor-status-indicator .material-symbols-outlined { 
    color: #00ff95;
    animation: spin 1.5s linear infinite; 
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Responsive adjustments */
@media (max-width: 1400px) { 
    .page-editor-body { grid-template-columns: minmax(375px, 0.8fr) 1.5fr 0.7fr; } 
}
@media (max-width: 1100px) { 
    .page-editor-body { 
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
    } 
    #page-editor-preview-pane { grid-column: 1 / 2; grid-row: 1 / 2; max-width: none !important; }
    #page-editor-code-pane { grid-column: 1 / 3; grid-row: 2 / 3; }
    #page-editor-ai-pane { grid-column: 2 / 3; grid-row: 1 / 2; }
}
@media (max-width: 768px) { 
    .page-editor-body { display: flex; flex-direction: column; }
    #page-editor-preview-pane { order: 1; flex-grow: 1; padding: 10px; max-width: none !important; }
    #page-editor-code-pane { order: 2; height: 50vh; }
    #page-editor-ai-pane { order: 3; height: 40vh; }
}
/*
================================================================================
  END: REDESIGNED PAGE EDITOR MODAL STYLES
================================================================================
*/


/* Main Content Container & Loading */
.app-main-content .container {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 0; /* Padding will be moved to children */
}
.app-main-content .container > .top-controls-wrapper,
.zones-container {
    flex-shrink: 0;
    padding-left: 20px;
    padding-right: 20px;
}
.app-main-content.loading::after { content: "Loading View..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #9aa0a6; font-size: 16px; z-index: 1; }

/* ==================================================================
   CARD IDENTITIES & GLOW EFFECTS (Including Phase 4 Epic Architect)
   ================================================================== */

/* --- 1. Keyframes --- */
@keyframes red-glow-pulse { 
    0%, 100% { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15), 0 0 10px rgba(217, 48, 37, 0.4), 0 0 20px rgba(217, 48, 37, 0.3); } 
    50% { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15), 0 0 15px rgba(217, 48, 37, 0.7), 0 0 30px rgba(217, 48, 37, 0.5); } 
}

@keyframes voice-bible-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), inset 0 0 10px rgba(168, 85, 247, 0.2); }
    50% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.7), inset 0 0 15px rgba(168, 85, 247, 0.4); }
}

/* --- 2. Phase 4: Epic Identities --- */

/* Voice Bible (The Pinned Foundation) */
.preview-card.is-voice-bible {
    border: 2px solid #a855f7 !important;
    animation: voice-bible-glow 4s infinite ease-in-out !important;
    z-index: 10;
}
.preview-card.is-voice-bible .preview-header {
    background: linear-gradient(to right, #6d28d9, #a855f7) !important;
    color: white !important;
}

/* Project Blueprint (The Series Parent) */
.preview-card.workflow-type-blueprint .live-preview.workflow-preview-container {
    background: linear-gradient(to bottom, #4338ca, #3730a3) !important;
    border: 1px solid #4f46e5;
}

/* Placeholder Cards (The Epic Burst ghost state) */
.preview-card.is-placeholder {
    opacity: 0.5;
    border: 2px dashed #cbd5e1 !important;
    background: #f8fafc !important;
    filter: grayscale(100%);
    pointer-events: none;
}

/* --- 3. Functional Workflow Highlights --- */
.preview-card.editing-glow { animation: red-glow-pulse 2.5s infinite ease-in-out !important; }
.preview-card.composed-page-glow { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15), 0 0 8px rgba(217, 48, 37, 0.5); }
.preview-card.standard-html-glow { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15), 0 0 8px rgba(30, 142, 62, 0.5); }

.preview-card.editing-workflow {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4), 0 1px 3px 1px rgba(60, 64, 67, .15);
}




/*
================================================================================
  CLASS-BASED COMPONENT STYLES
  This new section defines generic component styles that use the design tokens
  from the :root block. The AI will be prompted to use these classes in its
  generated HTML.
================================================================================
*/

/* General purpose container for centered, max-width content */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* Base Typography using Design Tokens */
.gf-h1, .gf-h2, .gf-h3, .gf-h4, .gf-h5, .gf-h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  text-wrap: balance;
}
.gf-h1 { font-size: var(--font-size-h1); }
.gf-h2 { font-size: var(--font-size-h2); }
.gf-h3 { font-size: var(--font-size-h3); }

.gf-p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  text-wrap: pretty;
}

/* Button Component Styles */
.btn {
  display: inline-block;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--border-width) solid transparent;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius);
  transition: all var(--transition-speed) ease-in-out;
}
.btn:hover {
  filter: brightness(90%);
  transform: translateY(-1px);
}

.btn-primary {
  color: var(--color-text-light);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary {
  color: var(--color-text-light);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-success {
  color: var(--color-text-light);
  background-color: var(--color-success);
  border-color: var(--color-success);
}
.btn-danger {
  color: var(--color-text-light);
  background-color: var(--color-error);
  border-color: var(--color-error);
}
.btn-warning {
  color: var(--color-text);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  color: var(--color-text-light);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Section Padding Utility */
.section-padding {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

/* Card Component Style */
.card {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-lg);
}

/* *** UPDATED/NEW: Default Hero Styling *** */
/* Provides default centering for hero sections to ensure a professional look. */
.hero {
    display: grid;
    place-content: center;
    text-align: center;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    min-height: 50vh;
}

/* --- FIX: Added Navbar Component Styles --- */
.navbar {
  padding-block: var(--spacing-md);
  background-color: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
}
.navbar-brand {
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  color: var(--color-primary);
  text-decoration: none;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-text);
  text-decoration: none;
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-speed), border-color var(--transition-speed);
}
.nav-links a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.navbar-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* --- NEW STYLES FOR EDITABLE WORKFLOW PROMPTS --- */
.workflow-section-item > details > summary,
.workflow-action > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  list-style: none; /* Hide default marker */
  transition: background-color: 0.2s ease;
}

.workflow-section-item > details > summary:hover {
  background-color: #e8f0fe;
}

.workflow-section-item > details > summary::-webkit-details-marker,
.workflow-action > summary::-webkit-details-marker {
  display: none;
}

.workflow-section-item > details > summary .section-name {
  flex-grow: 1;
}

.prompt-editor-wrapper {
  padding: 0 8px 8px 8px;
  border-top: 1px solid #e0e0e0;
  background-color: #ffffff;
}

.workflow-prompt-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 8px;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  margin-top: 8px;
}

.workflow-prompt-textarea:focus {
  border-color: #1a73e8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

/* Card-specific overrides */
.workflow-preview-container .action-name {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
}

.workflow-preview-container .prompt-editor-wrapper {
  background-color: transparent;
  border-top: none;
  padding: 0;
}

.workflow-preview-container .workflow-prompt-textarea {
  margin-top: 4px;
}

/* --- NEW COLOR PALETTE MODAL STYLES --- */
#colorPaletteModalBody {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.palette-category {
    /* No special styling needed, just a container */
}

.palette-category h5 {
    font-size: 11px;
    color: #5f6368;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid #e8eaed;
    margin-bottom: 15px;
}

#palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.palette-card-modal {
    background-color: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.palette-card-modal:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #c6cacf;
}

.palette-card-modal.selected {
    border-color: #1a73e8;
    background-color: #e8f0fe;
    box-shadow: 0 0 0 3px #1a73e8, 0 4px 12px rgba(26, 115, 232, 0.3);
}

.palette-card-modal h4 {
    font-size: 13px;
    font-weight: 500;
    color: #3c4043;
    margin: 0 0 10px 0;
    text-align: center;
}

.palette-card-modal .palette-swatches {
    display: flex;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
}

.palette-card-modal .swatch {
    flex: 1;
}


/* === REFINED AI CHAT UI === */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--app-chat-bg);
    overflow: hidden;
}

.ai-chat-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--app-border-color);
    flex-shrink: 0;
}

.ai-chat-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--app-text-color);
}

.ai-chat-output {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    background-color: var(--app-chat-output-bg);
}

/* ------------------------------------------------------------
   NEW: Expandable Chat Bubbles (Replaces old p tags)
   ------------------------------------------------------------ */

/* 1. The Wrapper (Holds text + arrow button) */
.chat-bubble-wrapper {
    max-width: 90%;
    padding: 8px 12px;
    border-radius: 18px;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack text above arrow */
    position: relative;
    transition: all 0.2s ease;
}

/* 2. The Text Content Area */
.chat-text {
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 13px;
    margin: 0;
}

/* 3. Minimized State (Clamp to 3 lines + Fade effect) */
.chat-text.minimized {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show only 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Create a fade-out effect at the bottom */
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* 4. The Expand Arrow Button */
.chat-expand-btn {
    align-self: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit; /* Matches text color of bubble */
    opacity: 0.6;
    margin-top: 4px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 16px;
    transition: opacity 0.2s;
}

.chat-expand-btn:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.chat-expand-btn .material-symbols-outlined {
    font-size: 18px;
    font-weight: 700;
    transition: transform 0.3s ease; /* Smooth rotation */
}

/* 5. Expanded State (Rotate Arrow) */
.chat-bubble-wrapper.expanded .chat-expand-btn .material-symbols-outlined {
    transform: rotate(180deg);
}

/* --- Bubble Color Variants (Applied to Wrapper now) --- */

/* AI Message */
.chat-bubble-wrapper.ai-message { 
    background-color: var(--app-chat-ai-bubble-bg); 
    color: var(--app-chat-ai-text-color); 
    align-self: flex-start; 
    border-top-left-radius: 4px; 
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* User Message */
.chat-bubble-wrapper.user-message { 
    background: var(--app-chat-user-bubble-bg); 
    color: var(--app-chat-user-text-color); 
    align-self: flex-end; 
    border-top-right-radius: 4px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* System Message (Centered, no minimization usually) */
.chat-bubble-wrapper.system-message { 
    align-self: center; 
    background-color: #f8f9fa; 
    color: #5f6368; 
    font-size: 11px; 
    font-style: italic; 
    padding: 4px 8px; 
    border-radius: 4px; 
    text-align: center; 
    border: 1px solid #e2e8f0;
}

/* 
   FIX: Chat Message Styles using specific Variables.
   Note: Using 'background' to support gradients in user bubbles.
   Added borders and shadows for better visibility.
*/
.ai-chat-output p {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
    margin: 0;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* AI Message - Uses Theme Variables */
.ai-chat-output .ai-message {
    background-color: var(--app-chat-ai-bubble-bg); /* e.g., #1e293b */
    color: var(--app-chat-ai-text-color);           /* e.g., #cbd5e1 */
    align-self: flex-start;
    border-top-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* User Message - Uses Theme Variables */
.ai-chat-output .user-message {
    background: var(--app-chat-user-bubble-bg);     /* e.g., Prismatic Gradient */
    color: var(--app-chat-user-text-color);         /* e.g., #ffffff */
    align-self: flex-end;
    border-top-right-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* System Message - High contrast against dark backgrounds */
.ai-chat-output .system-message {
    align-self: center;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--app-primary-accent); /* Use your primary accent to make it pop */
    font-size: 11px;
    font-style: italic;
    padding: 6px 12px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--app-primary-accent);
}

.ai-chat-input-area {
    flex-shrink: 0;
    padding: 8px 8px;
    display: flex;
    align-items: flex-start;
    background-color: var(--app-chat-input-bg);
    border-top: 1px solid var(--app-border-color);
    position: relative;
}

#aiPromptInput {
    flex-grow: 1;
    border: 1px solid var(--app-chat-textarea-border-color);
    border-radius: 4px;
    padding: 12px 45px 12px 15px;
    font-size: 14px;
    resize: none;
    line-height: 1.5;
    min-height: 150px;
    max-height: 200px;
    background-color: var(--app-chat-textarea-bg);
    color: var(--app-text-color);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

#aiPromptInput:focus {
    outline: none;
    border-color: var(--app-primary-accent);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.2);
    background-color: var(--app-chat-textarea-focus-bg);
}

/* ... (send button styles remain mostly the same, just ensure positioning is correct) ... */
#aiSubmitPrompt {
    position: absolute;
    right: 18px;
    top: 16px;
    width: 25px;
    height: 135px;
    border-radius: 6px;
    /* ... rest of the button styles */
    border: none;
    background: linear-gradient(45deg, var(--app-primary-accent), var(--app-secondary-accent));
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 255, 149, 0.2);
}
#aiSubmitPrompt:hover {
    filter: brightness(1.1);
    animation: magic-green-glow 2s infinite ease-in-out;
}
#aiSubmitPrompt .material-symbols-outlined {
    font-size: 18px;
}
.ai-chat-output::-webkit-scrollbar { width: 8px; }
.ai-chat-output::-webkit-scrollbar-track { background: transparent; }
.ai-chat-output::-webkit-scrollbar-thumb { background-color: var(--app-border-color, #dadce0); border-radius: 4px; }
.ai-chat-output::-webkit-scrollbar-thumb:hover { background-color: #c6cacf; }
.ai-chat-output { scrollbar-width: thin; scrollbar-color: var(--app-border-color, #dadce0) transparent; }

/* === NEW SETTINGS MODAL STYLES (DARK MODE) === */
.settings-modal {
  width: 500px;
  max-width: 90vw;
  z-index: 1002; /* Above overlay, below other popups if needed */
}

.settings-modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #202124; /* Mörk bakgrund för hela modalen */
  color: #e8eaed; /* Ljus textfärg */
}

.settings-modal-header {
  padding: 12px 20px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3c4043;
  background-color: #28292c;
}

.settings-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #e8eaed;
}

.settings-modal-close {
  background-color: transparent;
  color: #9aa0a6;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.settings-modal-close:hover {
  background-color: rgba(232, 234, 237, .08);
}

.settings-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  background-color: #202124;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-group label {
  font-size: 12px;
  font-weight: 500;
  color: #bdc1c6;
}

.settings-group select,
.settings-group textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #5f6368;
  border-radius: 4px;
  font-size: 13px;
  background-color: #303134;
  color: #e8eaed;
}

.settings-group textarea {
  resize: vertical;
}

.settings-group select:focus,
.settings-group textarea:focus {
  outline: none;
  border-color: #8ab4f8;
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
}

/* --- NEW: WORKFLOW PREVIEW MODAL --- */
.workflow-preview-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    height: 90vh;
    max-height: 700px;
    background-color: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1002;
    display: none; /* Hidden by default */
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.workflow-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.workflow-preview-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
    margin: 0;
}

.workflow-preview-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #5f6368;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.workflow-preview-close:hover {
    background-color: #e8eaed;
}

.workflow-preview-body {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    background-color: #fff;
}

.workflow-column h4 {
    font-size: 13px;
    text-transform: uppercase;
    color: #5f6368;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #e8eaed;
    padding-bottom: 8px;
}

.workflow-detail-item {
    margin-bottom: 15px;
}

.workflow-detail-item label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #3c4043;
    margin-bottom: 6px;
}

.workflow-detail-item input[type="text"],
.workflow-detail-item textarea,
.workflow-detail-item select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-size: 13px;
    background-color: #fff;
    transition: border-color 0.2s;
}
.workflow-detail-item input[type="text"]:focus,
.workflow-detail-item textarea:focus,
.workflow-detail-item select:focus {
    border-color: #1a73e8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.workflow-detail-item textarea {
    resize: vertical;
    min-height: 80px;
}

.workflow-action-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.workflow-action-item {
    background-color: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    padding: 12px;
}

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

.workflow-action-guide-id {
    font-size: 11px;
    font-weight: 700;
    color: #1967d2;
    background-color: #e8f0fe;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: capitalize;
}

.workflow-action-prompt {
    width: 100%;
    min-height: 60px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 8px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}

.workflow-preview-footer {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

.workflow-preview-footer .primary-action-btn,
.workflow-preview-footer .secondary-action-btn {
     display: flex;
    align-items: center;
    gap: 8px;
}

/* --- NEW: PROJECT WORKFLOW EDITOR MODAL --- */
#projectWorkflowEditorModal {
    max-width: 1200px; /* Wider for two panes */
    max-height: 800px;
}

.project-workflow-editor-body {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Ratio for panes */
    gap: 0;
    overflow: hidden;
    background-color: #f8f9fa; /* Separator color */
}

.project-workflow-editor-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #fff;
    padding: 20px;
}
.project-workflow-editor-pane:first-child {
    border-right: 1px solid #e0e0e0;
}

.project-workflow-editor-pane h4 {
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.project-workflow-editor-pane h4 .material-symbols-outlined {
    font-size: 20px;
    color: #1a73e8;
}

/* Left Pane: Planning & AI */
.ai-brainstorming-section {
    margin-top: 20px;
    border-top: 1px solid #e8eaed;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Make this section fill remaining space */
    min-height: 0;
}
.ai-brainstorming-section h5 {
    font-size: 13px;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-brainstorming-section .ai-assistant-subtitle {
    font-size: 12px;
    color: #5f6368;
    margin-bottom: 15px;
}
#projectAiPromptInput {
    width: 100%;
    min-height: 60px;
    margin-bottom: 10px;
}
#projectAiChatOutput {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    background-color: #f8f9fa;
}

/* Right Pane: Assembly Line */
.assembly-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
#add-workflow-btn {
    background-color: #e8f0fe;
    color: #1967d2;
}
#add-workflow-dropdown {
    width: 200px;
    left: auto;
    right: 0;
}
#projectWorkflowListContainer {
    padding: 0 5px 0 0; /* Add padding for scrollbar */
}
/* Individual item in the assembly list */
.project-workflow-item-body {
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid #e8eaed;
}

/* --- NEW: PROJECT FILES STAGING AREA STYLES --- */

/* Main Container for the Project Files area */
.project-files-container {
  background-color: var(--app-project-files-bg);
  border: 1px dashed var(--app-project-files-border-color);
  border-radius: 6px;
  padding: 8px;
  min-height: 54px; /* Height for one row of icons + padding */
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: flex-start;
  position: relative; /* For the placeholder */
}

/* Style for when a file is being dragged over the zone */
.project-files-container.drag-over {
  border-color: #1a73e8;
  border-style: solid;
  background-color: #e8f0fe;
  transform: scale(1.01);
}

/* The list that holds all the file icons */
.staged-files-list-container {
  display: flex;
  flex-wrap: wrap; /* Allows icons to wrap to the next line */
  gap: 6px; /* Space between icons */
  width: 100%;
}

/* Placeholder text for when the zone is empty */
.project-files-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--app-sidebar-placeholder-color);
  font-size: 12px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Hide placeholder when there are files */
.staged-files-list-container:not(:empty) + .project-files-placeholder {
  opacity: 0;
  display: none;
}

/* --- Individual File Icon Styling --- */
.staged-file-icon {
  position: relative;
  width: 36px;
  height: 36px;
  background-color: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer; /* To indicate it's interactive */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0; /* Prevents icons from shrinking */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none; /* Prevent text selection */
}

.staged-file-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 5; /* Bring to front on hover */
}

/* The folded corner effect */
.staged-file-icon::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 0; /* Creates the triangle */
  border-color: transparent #e0e0e0 transparent transparent;
  transition: border-color 0.2s ease;
}

.staged-file-icon:hover::after {
  border-right-color: #c6cacf;
}

/* --- File Type Specific Colors & Letters --- */
.file-type-default { background-color: #e8eaed; color: #5f6368; }
.file-type-article { background-color: #e8eaf6; color: #3f51b5; }
.file-type-image { background-color: #e3f2fd; color: #1e88e5; }
.file-type-html { background-color: #fff3e0; color: #fb8c00; }
.file-type-text { background-color: #f1f8e9; color: #7cb342; }
.file-type-workflow { background-color: #fce4ec; color: #d81b60; }
.file-type-prompt { background-color: #e0f2f1; color: #00897b; }

/* --- Phase 4: Epic Architect Staged Icons --- */
.file-type-voice { background-color: #f3e8ff; color: #7e22ce; border-color: #d8b4fe; }    /* Purple Bible */
.file-type-blueprint { background-color: #e0e7ff; color: #4338ca; border-color: #a5b4fc; } /* Indigo Universe */

/* Folded Corner Colors for Phase 4 Types */
.file-type-voice::after { border-right-color: #c084fc; }
.file-type-blueprint::after { border-right-color: #818cf8; }

/* Ensure the empty list doesn't cause placeholder issues */
.staged-files-list-container:empty + .project-files-placeholder {
  opacity: 1;
  display: block;
}

/* --- NEW: Scrolling and Height Limit for Project Files --- */

/* Add max-height and overflow to the main container */
.project-files-container {
  max-height: 136px; /* Calculated for 3 rows of icons */
  overflow-y: auto;  /* Show scrollbar only when content exceeds the max-height */
}

/* Add custom scrollbar styling for consistency with the rest of the app */
.project-files-container::-webkit-scrollbar { width: 8px; }
.project-files-container::-webkit-scrollbar-track { background: transparent; }
.project-files-container::-webkit-scrollbar-thumb { background: var(--app-border-color, #c1c1c1); border-radius: 4px; border: 2px solid var(--app-project-files-bg, #f1f3f4); }
.project-files-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.project-files-container { scrollbar-width: thin; scrollbar-color: var(--app-border-color, #c1c1c1) var(--app-project-files-bg, #f1f3f4); }

/* NEW: Highlight for already-added workflow items and assets */
@keyframes flash-highlight {
  0%, 100% {
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px #1a73e8; /* A light blue flash */
  }
}

.workflow-section-item.flash-highlight, .staged-file-icon.flash-highlight {
  animation: flash-highlight 0.5s ease-in-out;
}

/*=======================================================================*/
/* NEW STYLES FOR WORKFLOW COLOR CODING & BUTTON GLOW
/*=======================================================================*/

/* --- Project Planner Button --- */
@keyframes magic-glow {
    0% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(168, 85, 247, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.7), 0 0 30px rgba(168, 85, 247, 0.6);
    }
    100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(168, 85, 247, 0.4);
    }
}

#saveAndGenerateWorkflowsBtn {
    background: linear-gradient(45deg, #3b82f6, #a855f7);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: magic-glow 3s infinite ease-in-out;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#saveAndGenerateWorkflowsBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/*=======================================================================*/
/* NEW: PROJECT WORKFLOW PLANNER REFINEMENTS (Three-Column Layout)
/*=======================================================================*/

#projectWorkflowEditorModal .project-workflow-editor-body.three-column-layout {
    grid-template-columns: 1fr 1.75fr 1.25fr; /* Research | AI Hub | Assembly */
}

/* Left Pane: Keyword Research */
#project-research-pane {
    background-color: #f8f9fa;
    border-right: 1px solid #e0e0e0;
}

.keyword-search-area {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

#keywordSearchInput {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-size: 14px;
}

#keywordSearchBtn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    background-color: #1a73e8;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#keywordResultsContainer .keyword-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #e8eaed;
    border-radius: 4px;
    margin-bottom: 8px;
}

.keyword-result-item .keyword-text {
    font-weight: 500;
    color: #3c4043;
}

.keyword-result-item .brainstorm-btn {
    background-color: #e8f0fe;
    color: #1967d2;
    border: 1px solid #d2e3fc;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Center Pane: AI Ideation Hub */
#project-main-planning-pane {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e0e0e0;
}

#project-main-planning-pane .ai-brainstorming-section {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

#project-main-planning-pane .ai-chat-output {
    flex-grow: 1;
    margin-bottom: 15px;
}

#project-main-planning-pane .core-concept-section {
    flex-shrink: 0;
    padding-top: 15px;
}
#project-main-planning-pane .core-concept-section h4 {
    display: none; /* Hide the title to save space */
}

/* Compact Form Styling */
.form-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.form-row label {
    flex-shrink: 0;
    font-size: 12px !important;
    font-weight: 500;
    color: #5f6368;
    width: 90px; /* Align inputs */
}
.form-row input {
    flex-grow: 1;
    font-size: 13px !important;
    padding: 6px 10px !important;
}


/* --- Actionable AI Snippets in Chat --- */
.ai-chat-output .ai-suggestion-card,
.ai-chat-output .ai-project-proposal {
    background-color: #e8f0fe;
    border: 1px solid #d2e3fc;
    border-radius: 8px;
    padding: 15px;
    margin: 8px 0;
    align-self: stretch; /* Make it take full width */
    max-width: 100%;
}

.ai-suggestion-card h6,
.ai-project-proposal h6 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: #1967d2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.ai-project-proposal ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.add-suggestion-btn,
.apply-plan-btn {
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.add-suggestion-btn:disabled {
    background-color: #16a34a;
    cursor: default;
}

.apply-plan-btn {
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
}

/*
================================================================================
  NEW: AI CHAT - DIRECT ACTION & COMPACT GLOSSY SUGGESTION BUTTONS
================================================================================
*/

/* --- 1. Main Grid Container for All Button Types --- */
.ai-suggestion-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Default for larger buttons */
    gap: 12px;
    padding: 10px 0;
    margin: 8px 0;
    align-self: stretch;
    max-width: 100%;
}

/* --- 2. Styles for Direct Action & Prefix Buttons (e.g., Analyze, Edit) --- */
.ai-suggestion-action-btn.direct-action,
.ai-suggestion-action-btn.prefix-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1px solid var(--app-border-color);
    border-radius: 8px;
    background: var(--app-chat-ai-bubble-bg);
    color: var(--app-text-color);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-suggestion-action-btn.direct-action:hover,
.ai-suggestion-action-btn.prefix-action:hover {
    transform: translateY(-2px);
    border-color: var(--app-primary-accent);
    background: rgba(0, 191, 255, 0.1);
    color: var(--app-primary-accent);
}

.ai-suggestion-action-btn .material-symbols-outlined {
    font-size: 22px;
}

/* Working state for the direct action button */
.ai-suggestion-action-btn.direct-action.is-working {
    cursor: wait;
    background: rgba(0, 191, 255, 0.1);
    color: var(--app-primary-accent);
}
.ai-suggestion-action-btn.direct-action.is-working .material-symbols-outlined {
    animation: spin 1.5s linear infinite;
}


/* --- 3. Styles for Compact, Glossy Suggestion Buttons (Design 1, Section 1) --- */

.ai-suggestion-actions-grid.compact-glossy {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Smaller columns */
    gap: 10px;
}

.ai-suggestion-action-btn.glossy-btn {
    padding: 10px 5px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s ease-out;
}

.ai-suggestion-action-btn.glossy-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.1);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.25);
}

.ai-suggestion-action-btn.glossy-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
}

/* Color Variants for Glossy Buttons */
.ai-suggestion-action-btn.glossy-btn.improvement {
    background: linear-gradient(135deg, #22c55e, #16a34a); /* Green */
}

.ai-suggestion-action-btn.glossy-btn.next-step {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* Blue */
}

/* Disabled/Working State for Glossy Buttons */
.ai-suggestion-action-btn.glossy-btn:disabled {
    cursor: wait;
    opacity: 0.7;
    filter: grayscale(50%);
    background: #6b7280;
}

.ai-suggestion-action-btn.glossy-btn.is-working {
    animation: pulse 1.5s infinite ease-in-out;
}

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

/*
================================================================================
  LAYOUT OVERRIDE FOR WIDER WORKSPACE
  This rule targets the main container for the grid and filter controls,
  removing the max-width constraint to allow it to fill the space.
================================================================================
*/
.grid-scroll-container > .container {
  max-width: none; /* Removes the width limit */
  padding-left: 20px;  /* Adjusts side padding for the wider view */
  padding-right: 20px; /* Adjusts side padding for the wider view */
}

/* --- NEW: Centered Workflow Planner Style --- */
.centered-workflow-planner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    flex-grow: 1; /* Make it take up space */
}

.large-display-wrapper {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 20px 30px;
    height: 65px;
    border: 2px solid #e0e0e0;
    border-radius: 35px;
    color: #3c4043;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

/* Color Theming for Workflow Planners */
.planner-green .large-display-wrapper { border-color: #a7f3d0; background-color: #f0fdf4; color: #047857;}
.planner-green .large-action-btn { background: linear-gradient(45deg, #4ade80, #22c55e); }
.planner-green .large-action-btn:hover { box-shadow: 0 7px 25px rgba(34, 197, 94, 0.4); }

.planner-blue .large-display-wrapper { border-color: #c7d2fe; background-color: #eef2ff; color: #4338ca;}
.planner-blue .large-action-btn { background: linear-gradient(45deg, #a78bfa, #8b5cf6); }
.planner-blue .large-action-btn:hover { box-shadow: 0 7px 25px rgba(139, 92, 246, 0.3); }

.planner-yellow .large-display-wrapper { border-color: #fde68a; background-color: #fffbeb; color: #b45309;}
.planner-yellow .large-action-btn { background: linear-gradient(45deg, #fbbf24, #f59e0b); }
.planner-yellow .large-action-btn:hover { box-shadow: 0 7px 25px rgba(250, 204, 21, 0.4); }




.style-card-title { margin: 0; font-family: 'Caveat', cursive; font-size: 1.3em; color: #4A5568; line-height: 1.2; }
.custom-style-generator { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 1rem 0; }
.custom-style-generator .line { height: 1px; background-color: #e0e0e0; flex-grow: 1; }
.custom-style-generator h5 { font-family: 'Caveat', cursive; font-size: 1.4em; color: #6d28d9; flex-shrink: 0; }

/* --- 10. Specific Content: Category Accordion --- */

================================================================================
  REVISED: ICON-STYLE GLOSSY WORKFLOW CARDS (V2)
================================================================================
*/

/* --- 1. Hide Workflow Details (No Change) --- */
.workflow-preview-container .workflow-details,
.workflow-preview-container .workflow-actions-title,
.workflow-preview-container .workflow-actions,
.workflow-preview-container .workflow-footer {
    display: none;
}

/* --- 2. Style the Entire Card Body --- */
.live-preview.workflow-preview-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-align: center;
    position: relative; 
    overflow: hidden; 
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

/* --- 3. Style Header and Title --- */
.workflow-preview-container .workflow-header {
    background: none;
    border: none;
    box-shadow: none;
    position: relative;
    padding: 0;
    z-index: 2; 
}

.workflow-preview-container .workflow-header h4 {
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); 
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.2;
}

/* --- 4. Large, Subtle Background Icon (Now correctly centered) --- */
.workflow-preview-container .workflow-header .material-symbols-outlined {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    color: rgba(255, 255, 255, 0.15);
    z-index: 1;
    transition: transform 0.3s ease;
}

/* --- 5. Apply Color Gradients to the Card Body --- */
.preview-card.workflow-type-project .live-preview.workflow-preview-container {
    background: linear-gradient(to bottom, #60a5fa, #3b82f6);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.preview-card.workflow-type-website .live-preview.workflow-preview-container {
    background: linear-gradient(to bottom, #4ade80, #22c55e);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.preview-card.workflow-type-article .live-preview.workflow-preview-container {
    background: linear-gradient(to bottom, #c084fc, #a855f7);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.preview-card.workflow-type-image_gallery .live-preview.workflow-preview-container {
    background: linear-gradient(to bottom, #fbbf24, #f59e0b);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* --- MODIFICATION START --- */
/* Styling: Beige/Brown to match editable sidebar item */
.preview-card.workflow-type-styling .live-preview.workflow-preview-container {
    background: linear-gradient(to bottom, #fde68a, #fbd38d);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
/* Adjust text and icon color for readability on the new background */
.preview-card.workflow-type-styling .workflow-header h4 {
    color: #92400e;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}
.preview-card.workflow-type-styling .workflow-header .material-symbols-outlined {
    color: rgba(146, 64, 14, 0.1);
}
/* --- MODIFICATION END --- */


/* --- 6. Unified Hover Effect (No Change) --- */
.preview-card.workflow-card:hover .live-preview.workflow-preview-container {
    filter: brightness(1.15); 
    transform: translateY(-3px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0,0,0,0.15);
}

.preview-card.workflow-card:hover .workflow-header .material-symbols-outlined {
    transform: translate(-50%, -50%) scale(1.1);
}

/*
================================================================================
  NEW STYLE EDITOR MODAL & SIDEBAR ITEM STYLES
================================================================================
*/

/* --- 1. Style Editor Modal --- */
#styleEditorModal .wizard-content {
    display: flex;
    flex-direction: column;
}

/* --- REFINED WIZARD CLOSE BUTTON --- */
.wizard-skip-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background-color: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
    color: #5f6368;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wizard-skip-btn:hover {
    background-color: rgba(217, 48, 37, 0.1);
    color: #d93025;
    transform: scale(1.1);
}
.wizard-skip-btn .material-symbols-outlined {
    font-size: 20px;
}


.style-editor-header-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px 15px 20px !important;
    gap: 4px;
}

.style-editor-header-art .header-main-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.8em;
    color: #4A5568;
    margin: 0;
}

.current-style-display-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.current-style-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9em;
    color: #64748b;
}

.current-style-name {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 1.6em;
    color: #3B82F6;
    margin: 0;
}

.style-generator-input-area {
    display: flex;
    gap: 10px;
    align-items: center;
}

#customStyleGeneratorInput {
    flex-grow: 1;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s ease-in-out;
}
#customStyleGeneratorInput:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

#customStyleGeneratorBtn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(45deg, #a78bfa, #8b5cf6);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px -5px rgba(139, 92, 246, 0.5);
    transition: all 0.3s ease;
}
#customStyleGeneratorBtn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 7px 20px -5px rgba(139, 92, 246, 0.6);
}

/* --- 2. Make styling workflow item in sidebar look interactive --- */
.workflow-section-item.is-editable-style {
    cursor: pointer;
    background: linear-gradient(to bottom, #fde68a, #fbd38d) !important;
    color: #92400e !important;
    text-shadow: none !important;
    border: 1px solid #fce3a0;
}

.workflow-section-item.is-editable-style:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0,0,0,0.1);
}

.workflow-section-item.is-editable-style .section-name {
    color: #92400e !important;
}

.workflow-section-item.is-editable-style .edit-indicator {
    color: #b45309;
    font-size: 20px;
    transition: transform 0.2s ease;
}

.workflow-section-item.is-editable-style:hover .edit-indicator {
    transform: scale(1.1);
}

/* --- REFINED: Style for the Assembly Line Style Toggle --- */
.style-toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px; /* smaller width */
    height: 20px; /* smaller height */
}

.style-toggle-switch .style-apply-toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

.style-toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.2);
    transition: .3s;
    border-radius: 20px;
}

.style-toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 16px; /* smaller handle */
    width: 16px;  /* smaller handle */
    left: 2px;
    bottom: 2px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: .3s;
    border-radius: 50%;
}

.style-apply-toggle:checked + .slider {
    background-color: #16a34a; /* Green for 'On' */
}

.style-apply-toggle:focus + .slider {
    box-shadow: 0 0 1px #16a34a;
}

.style-apply-toggle:checked + .slider:before {
    transform: translateX(14px); /* Adjusted for new size */
}

/* === NEW: AI Chat - Launchpad Analyzer Report Card === */
.analyzer-report-card {
    background-color: #fff;
    border: 1px solid var(--app-border-color, #dadce0);
    border-radius: 12px;
    padding: 15px 20px;
    margin: 8px 0;
    align-self: stretch;
    max-width: 100%;
    box-shadow: var(--app-shadow, 0 2px 4px rgba(0,0,0,0.05));
}

.analyzer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--app-border-color, #dadce0);
}

.analyzer-header h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--app-text-color, #3c4043);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analyzer-overall-progress {
    font-size: 16px;
    font-weight: 600;
    color: #1e8e3e; /* Green for success */
}

.analyzer-category {
    margin-top: 15px;
}

.analyzer-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.analyzer-category-header h6 {
    font-size: 11px;
    font-weight: 700;
    color: var(--app-sidebar-title-color, #5f6368);
    text-transform: uppercase;
    margin: 0;
    flex-grow: 1;
}

.category-progress-bar {
    width: 100px;
    height: 6px;
    background-color: #e8eaed;
    border-radius: 3px;
    overflow: hidden;
}

.category-progress-bar .fill {
    height: 100%;
    background-color: #1a73e8; /* Blue by default */
    border-radius: 3px;
    transition: width 0.5s ease;
}

.category-progress-bar .fill.is-good { background-color: #1e8e3e; } /* Green */
.category-progress-bar .fill.is-ok { background-color: #f9ab00; } /* Yellow */
.category-progress-bar .fill.is-bad { background-color: #d93025; } /* Red */


.audit-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.audit-item .status-icon {
    margin-right: 10px;
    font-size: 18px;
}

.audit-item .status-icon.pass { color: #1e8e3e; }
.audit-item .status-icon.attention { color: #f9ab00; }
.audit-item .status-icon.fail { color: #d93025; }

.audit-item .item-label {
    flex-grow: 1;
    color: #5f6368;
}

.audit-item .fix-item-btn {
    background: #e8f0fe;
    color: #1967d2;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.audit-item .fix-item-btn:hover {
    background-color: #d2e3fc;
}

/* --- NEW: Working State Animation for Fix Buttons --- */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.audit-item .fix-item-btn.is-working,
#fix-all-btn.is-working {
    cursor: wait;
    opacity: 0.8;
}

.audit-item .fix-item-btn.is-working .material-symbols-outlined,
#fix-all-btn.is-working .material-symbols-outlined {
    animation: spin 1.5s linear infinite;
}
/* --- END: Working State Animation --- */


.analyzer-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--app-border-color, #dadce0);
    text-align: center;
}

#fix-all-btn {
    background: linear-gradient(45deg, var(--app-primary-accent), var(--app-secondary-accent));
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
#fix-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(45, 212, 191, 0.3);
}

#fix-all-btn:disabled {
    cursor: not-allowed;
    filter: brightness(0.8);
}

/* ADD THIS NEW SECTION AT THE END OF THE FILE */

/*
================================================================================
  NEW: AI CONVERSATION PREVIEW CARD STYLES
================================================================================
*/

/* --- 1. Highlight for the active conversation card --- */
.preview-card.active-conversation {
  border-color: var(--app-primary-accent);
  box-shadow: 0 0 0 4px var(--app-primary-accent), 0 4px 12px rgba(0,0,0,0.15);
  transform: scale(1.02);
}

/* --- 2. Main container for the conversation preview --- */
.conversation-preview-container {
    padding: 15px;
    background-color: var(--app-card-preview-bg, #f8f9fa);
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* --- 3. Message bubble styling (reusing chat panel variables) --- */
.conversation-preview-container p {
    max-width: 90%;
    padding: 8px 12px;
    border-radius: 18px;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
    margin: 0;
}

/* AI Message */
.conversation-preview-container .ai-message {
    /* Background: Use theme variable, fallback to Light Grey */
    background: var(--app-chat-ai-bubble-bg, #f1f5f9) !important;
    
    /* Text: Use theme variable, fallback to Dark Slate */
    color: var(--app-chat-ai-text-color, #1e293b) !important;
    
    border: 1px solid rgba(0,0,0,0.05);
    align-self: flex-start;
    border-top-left-radius: 4px; 
}

/* User Message */
.conversation-preview-container .user-message {
    /* Background: Use 'background' to support Gradients. Fallback is Blue Gradient. */
    background: var(--app-chat-user-bubble-bg, linear-gradient(135deg, #3b82f6, #2563eb)) !important;
    
    /* Text: CRITICAL FIX - Use the theme's text color variable */
    color: var(--app-chat-user-text-color, #ffffff) !important;
    
    align-self: flex-end;
    border-top-right-radius: 4px;
    
    /* Only add text-shadow if the text is white (simple check isn't possible in CSS, 
       so we use a very subtle one that works on dark or light backgrounds) */
    text-shadow: 0 1px 1px rgba(0,0,0,0.1); 
}

/* --- 4. Scrollbar styling for consistency --- */
.conversation-preview-container::-webkit-scrollbar { width: 8px; }
.conversation-preview-container::-webkit-scrollbar-track { background: transparent; }
.conversation-preview-container::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 4px; }
.conversation-preview-container::-webkit-scrollbar-thumb:hover { background: #c6cacf; }

/*
================================================================================
  NEW: RATE LIMIT & UPGRADE SUBSCRIPTION MODAL
================================================================================
*/

/* --- 1. Modal Overlay --- */
.upgrade-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 5, 20, 0.5); /* Deep purple transparent background */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.upgrade-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* --- 2. Main Modal Container --- */
.upgrade-modal {
    width: 90%;
    max-width: 980px;
    /* ADDED: Ensure it doesn't exceed 90% of the viewport height */
    max-height: 90vh; 
    
    background: rgba(28, 15, 48, 0.7);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: 30px 40px;
    position: relative;
    
    /* ADDED: This makes the modal internally scrollable */
    overflow-y: auto; 
    
    color: #f0f0f5;
    font-family: 'Satoshi', 'Inter', sans-serif;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* ADDED: Ensure scrollbar looks good in dark mode */
    scrollbar-width: thin;
    scrollbar-color: #a855f7 rgba(0,0,0,0.2);
}

/* Optional: Improve spacing for smaller screens */
@media (max-height: 700px) {
    .upgrade-modal {
        padding: 20px 30px;
    }
    .upgrade-modal-header {
        margin-bottom: 15px;
    }
    .subscription-cards-grid {
        gap: 10px;
    }
}

.upgrade-modal-overlay.visible .upgrade-modal {
    transform: scale(1);
}

/* Glossy background gradient effect */
.upgrade-modal::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 70% 30%, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.2), transparent 40%);
    animation: rotate-glow 20s linear infinite;
}

@keyframes rotate-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- 3. Modal Header --- */
.upgrade-modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.upgrade-modal-header .header-icon {
    font-size: 48px;
    color: #a855f7;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.8);
    margin-bottom: 10px;
}

.upgrade-modal-header h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 8px 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.upgrade-modal-header p {
    font-size: 1rem;
    color: #d1d5db;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- New X Close Button --- */
.upgrade-modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10;
}

.upgrade-modal-close-btn .material-symbols-outlined {
    font-size: 24px;
    font-weight: 500;
}

.upgrade-modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: rotate(90deg);
}

.upgrade-modal-close-btn:active {
    transform: scale(0.9);
}

/* --- 4. Usage Meter Section --- */
.usage-meter-section {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.usage-meter {
    margin-bottom: 10px;
}
.usage-meter:last-child {
    margin-bottom: 0;
}

.usage-meter-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 500;
}

.usage-meter-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.usage-meter-bar .fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

.reset-timer {
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 15px;
}

.subscription-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* Reduced gap */
    margin-bottom: 15px;
    align-items: stretch;
}

.subscription-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px; /* Reduced padding */
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.subscription-card:hover {
    transform: translateY(-5px);
}

.subscription-card h3 {
    font-size: 1.1rem; /* Smaller title */
    margin: 0 0 5px 0;
}

.subscription-card .price {
    font-size: 1.6rem; /* Smaller price */
    font-weight: 700;
    margin-bottom: 10px;
}

.subscription-card .credit-highlight {
    font-size: 0.9rem;
    font-weight: 800;
    color: #10b981;
    margin-bottom: 10px;
    display: block;
}

.subscription-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    text-align: left;
    font-size: 0.75rem; /* Smaller list text */
    flex-grow: 1;
}

.subscription-card ul li {
    padding: 4px 0; /* Tighter list spacing */
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 6px;
}

.subscription-card ul li .material-symbols-outlined {
    color: #4ade80;
    font-size: 14px;
}

.upgrade-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-top: auto; /* Pushes button to bottom */
}

/* Highlight the Pro Plan */
.subscription-card.pro-plan {
    transform: scale(1.02); /* Less aggressive scale */
    border: 1px solid #a855f7;
}

.popular-banner {
    position: absolute;
    top: -8px;
    right: 15px;
    background: linear-gradient(45deg, #f59e0b, #fbbf24);
    color: #422006;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* --- 6. Modal Footer --- */
.upgrade-modal-footer {
    text-align: center;
    margin-top: 15px;
}

.close-modal-link {
    color: #9ca3af;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.close-modal-link:hover {
    color: #fff;
    border-color: #fff;
}

/* ... existing styles ... */

/* NEW: Styles for the Credit Highlight in Cards */
.subscription-card .credit-highlight {
    font-size: 1.2rem;
    font-weight: 800;
    color: #10b981; /* Dollar Green */
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.1);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.pro-plan .credit-highlight {
    color: #a855f7; /* Purple for Pro */
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

/* Ensure lists look cleaner */
.subscription-card ul li {
    font-size: 0.85rem;
    color: #cbd5e1;
}
.subscription-card ul li strong {
    color: white;
}

/* Fix the modal icon */
.upgrade-modal-header .header-icon {
    background: linear-gradient(135deg, #10b981, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 56px; /* Larger */
}

/* ================================================================================
  NEW: HEADER UPGRADE BUTTON (Dollar Green Theme)
================================================================================ */

@keyframes subtle-glow {
  0%, 100% {
    /* Your Inner Shadow + Low Outer Glow */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.3), /* Top Highlight */
        inset 0 -2px 5px rgba(0,0,0,0.2),         /* Bottom Depth */
        0 4px 15px rgba(16, 185, 129, 0.4),       /* Outer Glow */
        0 0 5px rgba(5, 150, 105, 0.2);
  }
  50% {
    /* Your Inner Shadow + Intense Outer Glow */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -2px 5px rgba(0,0,0,0.2),
        0 4px 20px rgba(16, 185, 129, 0.6), 
        0 0 15px rgba(16, 185, 129, 0.4);
  }
}

.upgrade-btn-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 14px;
    border: none;
    border-radius: 58px;
    font-size: 14px;
    font-weight: 700; /* Made slightly bolder for value */
    color: white;
    /* Dollar Green Gradient: Emerald 500 to Emerald 700 */
    background: linear-gradient(45deg, #10b981, #047857); 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow 0.3s ease, 
                filter 0.2s ease;
    animation: subtle-glow 4s infinite ease-in-out;
}

.upgrade-btn-header:hover {
    transform: translateY(-1px) scale(1.00);
    filter: brightness(1.1); /* Makes the green pop more on hover */
    animation-duration: 2s; 
}

.upgrade-btn-header:active {
    transform: translateY(0) scale(1);
    filter: brightness(0.95);
    box-shadow: 0 2px 8px rgba(4, 120, 87, 0.5); /* Dark green shadow */
    animation: none;
}

.upgrade-btn-header .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.upgrade-btn-header:hover .material-symbols-outlined {
    transform: rotate(-15deg) scale(1.1);
}

/* --- NEW: Styling for the "No Workflow Active" Placeholder --- */

#active-workflow-title.is-placeholder {
  /* Override default title styles */
  white-space: normal; /* Allow text to wrap */
  overflow: visible;   /* Prevent clipping */
  text-overflow: unset;
  display: block;      /* Change from flex to block */
  text-align: center;
  font-weight: 400;    /* Make it less bold */
  font-size: 13px;
  
  /* Use placeholder colors and add spacing */
  color: var(--app-sidebar-placeholder-color);
  background-color: rgba(0,0,0,0.1);
  border: 1px dashed var(--app-sidebar-placeholder-border-color);
  border-radius: 8px;
  padding: 15px 10px;
  margin: 0 15px 10px 15px; /* Give it space within the sidebar */
  line-height: 1.5;
}
/*
================================================================================
  NEW: AI Website Updater Interactive Card (Glossy Yellow)
================================================================================
*/

.ai-website-updater-card {
    background: linear-gradient(135deg, #fef9c3, #fde047); /* Glossy yellow gradient */
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 15px;
    margin: 8px 0;
    align-self: stretch;
    max-width: 100%;
    box-shadow: 0 4px 15px -5px rgba(250, 204, 21, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    color: #422006; /* Dark brown text for readability */
}

.updater-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(146, 64, 14, 0.2);
}

.updater-header .material-symbols-outlined {
    font-size: 20px;
}

.updater-subtitle {
    font-size: 13px;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.updater-asset-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 8px;
    border: 1px solid rgba(146, 64, 14, 0.1);
}

.updater-asset-list::-webkit-scrollbar { width: 6px; }
.updater-asset-list::-webkit-scrollbar-track { background: transparent; }
.updater-asset-list::-webkit-scrollbar-thumb { background: #f59e0b; border-radius: 3px; }

.updater-asset-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.updater-asset-list li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.asset-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.asset-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.updater-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 15px;
}

.updater-input-group label {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
}

#updater-manual-instructions {
    width: 100%;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    background-color: rgba(255, 255, 255, 0.6);
    resize: vertical;
    min-height: 60px;
    color: #422006;
}

#updater-manual-instructions:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

#run-website-update-btn {
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px -2px rgba(217, 70, 2, 0.5);
    transition: all 0.2s ease;
}

#run-website-update-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px -2px rgba(217, 70, 2, 0.6);
}

#run-website-update-btn:disabled {
    cursor: wait;
    background: #fb923c;
    opacity: 0.8;
}

/*
================================================================================
  NEW: AI Website Updater & AI Image Studio Interactive Cards (Glossy Yellow)
================================================================================
*/

.ai-website-updater-card {
    background: linear-gradient(135deg, #fef9c3, #fde047); /* Glossy yellow gradient */
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 15px;
    margin: 8px 0;
    align-self: stretch;
    max-width: 100%;
    box-shadow: 0 4px 15px -5px rgba(250, 204, 21, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    color: #422006; /* Dark brown text for readability */
}

.updater-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(146, 64, 14, 0.2);
}

.updater-header .material-symbols-outlined {
    font-size: 20px;
}

.updater-subtitle {
    font-size: 13px;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.updater-asset-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 8px;
    border: 1px solid rgba(146, 64, 14, 0.1);
}

.updater-asset-list::-webkit-scrollbar { width: 6px; }
.updater-asset-list::-webkit-scrollbar-track { background: transparent; }
.updater-asset-list::-webkit-scrollbar-thumb { background: #f59e0b; border-radius: 3px; }

.updater-asset-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.updater-asset-list li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.asset-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.asset-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.updater-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 15px;
}

.updater-input-group label {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
}

/* Styles for both the textarea and the new select dropdown */
#updater-manual-instructions,
.updater-select {
    width: 100%;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #422006;
}

#updater-manual-instructions {
    resize: vertical;
    min-height: 60px;
}

.updater-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2392400e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

#updater-manual-instructions:focus,
.updater-select:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

/* Grouped selector for both buttons */
#run-website-update-btn,
#run-image-studio-btn {
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px -2px rgba(217, 70, 2, 0.5);
    transition: all 0.2s ease;
}

#run-website-update-btn:hover:not(:disabled),
#run-image-studio-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px -2px rgba(217, 70, 2, 0.6);
}

#run-website-update-btn:disabled,
#run-image-studio-btn:disabled {
    cursor: wait;
    background: #fb923c;
    opacity: 0.8;
}

/* --- NEW: In-Chat AI Website Planner --- */

/* 1. The '+' Trigger Button */
#open-chat-planner-btn {
    position: absolute;
    left: 15px;
    bottom: 18px; /* Aligns with the bottom of the send button */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--app-chat-textarea-border-color);
    background-color: var(--app-chat-textarea-bg);
    color: var(--app-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#open-chat-planner-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background-color: var(--app-primary-accent);
    color: white;
    border-color: var(--app-primary-accent);
}

#open-chat-planner-btn .material-symbols-outlined {
    font-size: 20px;
}

/* 2. The Main Green Card */
.ai-chat-planner-card {
    background: linear-gradient(135deg, #d1fae5, #6ee7b7); /* Glossy green gradient */
    border: 1px solid #34d399;
    border-radius: 12px;
    padding: 15px;
    margin: 8px 0;
    align-self: stretch;
    max-width: 100%;
    box-shadow: 0 4px 15px -5px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    color: #064e3b; /* Dark green text for readability */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-chat-planner-card .planner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(5, 150, 105, 0.2);
}

.ai-chat-planner-card .planner-dropdown-group {
    display: flex;
    gap: 10px;
}

.ai-chat-planner-card .planner-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ai-chat-planner-card label {
    font-size: 11px;
    font-weight: 600;
    color: #047857;
}

.ai-chat-planner-card input[type="text"],
.ai-chat-planner-card .planner-select,
.ai-chat-planner-card textarea {
    width: 100%;
    border: 1px solid #6ee7b7;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #065f46;
}

.ai-chat-planner-card .planner-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23047857' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

#chat-planner-output-prompt {
    font-family: 'Roboto Mono', monospace;
    background-color: rgba(16, 185, 129, 0.1);
    color: #064e3b;
    border-color: #10b981;
}

/* 3. The "Create Plan" Checkbox */
.ai-chat-planner-card .planner-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.ai-chat-planner-card .planner-option label {
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #047857;
}

.ai-chat-planner-card .planner-option input[type="checkbox"] {
    accent-color: #059669;
    width: 16px;
    height: 16px;
}


/* 4. The Generate Button */
#run-chat-planner-btn {
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.5);
    transition: all 0.2s ease;
}

#run-chat-planner-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px -2px rgba(16, 185, 129, 0.6);
}

/* style.css */

/* ... existing styles ... */

/*
================================================================================
  NEW: AI SMART EDITOR MODAL (RED THEME)
================================================================================
*/

.ai-edit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 10, 10, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.ai-edit-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.ai-edit-modal {
    width: 90%;
    max-width: 700px;
    background-color: #2D2A2A; /* Dark charcoal */
    border-radius: 12px;
    border: 1px solid #4a3a3a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    color: #F0E9E9;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-edit-modal-overlay.visible .ai-edit-modal {
    transform: scale(1);
}

.ai-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #4a3a3a;
    background-color: #383434;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.ai-edit-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FF5C5C; /* Red accent */
}

.ai-edit-modal-close {
    background: none;
    border: none;
    color: #a09393;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.ai-edit-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.ai-edit-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edit-target-info {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid #4a3a3a;
}

.edit-target-info p {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 500;
    color: #c7baba;
}

#aiEditModalFileList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#aiEditModalFileList li {
    background-color: #554a4a;
    color: #f0e9e9;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.edit-prompt-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.edit-prompt-area label {
    font-size: 14px;
    font-weight: 500;
}

#aiEditModalPrompt {
    width: 100%;
    min-height: 80px; /* Approx 3 lines */
    resize: vertical;
    background-color: #221f1f;
    border: 1px solid #5c4f4f;
    border-radius: 6px;
    padding: 10px;
    color: #f0e9e9;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

#aiEditModalPrompt:focus {
    outline: none;
    border-color: #FF5C5C;
    box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.25);
}

#aiEditModalApplyCustomBtn {
    align-self: flex-end;
    background: linear-gradient(45deg, #e53e3e, #c53030);
    color: white;
    font-weight: 600;
    border: none;
    display: flex;
    gap: 8px;
}

.edit-suggestions-area {
    border-top: 1px solid #4a3a3a;
    padding-top: 20px;
}

.edit-suggestions-area h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #d6caca;
}

#aiEditModalSuggestionsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ai-edit-suggestion-btn {
    background-color: #383434;
    border: 1px solid #5c4f4f;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
    color: #e3dada;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-edit-suggestion-btn:hover:not(:disabled) {
    background-color: #4a4545;
    border-color: #FF8A8A;
    transform: translateY(-2px);
}

.ai-edit-suggestion-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ai-edit-suggestion-btn .suggestion-title {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-edit-suggestion-btn .suggestion-title .material-symbols-outlined {
    font-size: 20px;
    color: #FF8A8A;
}

.ai-edit-suggestion-btn .suggestion-desc {
    font-size: 12px;
    color: #b3a7a7;
    line-height: 1.5;
}

.suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.suggestions-header h4 {
    margin: 0;
}

.small-btn {
    padding: 6px 12px;
    font-size: 12px;
    gap: 6px !important;
}

#applySelectedImprovementsBtn {
    background-color: #554a4a;
    border-color: #7a6c6c;
}
#applySelectedImprovementsBtn:hover {
    background-color: #665a5a;
}

/* Checkbox for Improvement Cards */
.ai-edit-suggestion-btn {
    position: relative;
    padding-left: 45px; /* Make space for checkbox */
}

.improvement-checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 20px;
    height: 20px;
    accent-color: #FF8A8A;
}

/* Theme Suggestion Area */
.theme-suggestions-area {
    border-top: 1px solid #4a3a3a;
    margin-top: 10px;
    padding-top: 20px;
}

#suggestThemesBtn {
    background-color: #554a4a;
    border-color: #7a6c6c;
    color: #FFA500; /* Orange icon */
}
#suggestThemesBtn:hover {
     background-color: #665a5a;
}
#suggestThemesBtn .material-symbols-outlined {
    text-shadow: 0 0 5px #FFA500;
}

.theme-suggestions-area .suggestions-container.theme-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ai-style-suggestion-card {
    background: linear-gradient(145deg, #422d0b, #2d1c05);
    border: 1px solid #78350F;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-style-suggestion-card:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: #F59E0B;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.ai-style-suggestion-card:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ai-style-suggestion-card h5 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #FBBF24;
}

.ai-style-suggestion-card p {
    font-size: 12px;
    line-height: 1.5;
    color: #D1D5DB;
    margin: 0;
}

/*
================================================================================
  NEW: HYDRA MODAL (GREEN/PURPLE THEME)
================================================================================
*/
.hydra-modal {
    background: linear-gradient(145deg, #1D2B29, #1A1A2E); /* Dark Green to Dark Purple */
    border-color: #3a4a48;
    color: #E8E4F3;
}

.hydra-modal .ai-edit-modal-header {
    background-color: transparent;
    border-bottom: 1px solid #3a4a48;
}

.hydra-modal .ai-edit-modal-header h3 {
    color: #5EEAD4; /* Teal/Aqua accent */
    text-shadow: 0 0 8px rgba(94, 234, 212, 0.5);
}

.hydra-modal .ai-edit-modal-body {
    padding-top: 10px;
}

.hydra-modal .edit-target-info {
    background-color: transparent;
    border: none;
    padding: 0 0 10px 0;
}

.hydrate-points-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hydrate-point-item {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #3a4a48;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.2s ease;
}

.hydrate-point-item.is-disabled {
    opacity: 0.5;
    background-color: transparent;
}

.hydrate-point-header {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.hydrate-point-header input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #A78BFA; /* Lavender */
    cursor: pointer;
}

.hydrate-point-header label {
    font-size: 16px;
    font-weight: 500;
    flex-grow: 1;
    cursor: pointer;
}

.hydrate-point-details {
    padding-left: 32px;
    margin-top: 10px;
}

.hydrate-point-details textarea {
    width: 100%;
    min-height: 60px; /* Approx 2-3 lines */
    resize: vertical;
    background-color: #221f1f;
    border: 1px solid #5c4f4f;
    border-radius: 6px;
    padding: 8px 10px;
    color: #f0e9e9;
    font-size: 13px;
    line-height: 1.6;
}

.hydra-footer {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid #3a4a48;
}

#runHydrateBtn {
    background: linear-gradient(45deg, #5EEAD4, #A78BFA);
    color: #1A1A2E;
    font-weight: 700;
}

/* In style.css */

/* ================================================================== */
/* STYLE: "FAST CREATION" WIZARD TAB                                  */
/* ================================================================== */

@keyframes glow-pulse {
  0% {
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.4), 0 0 10px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.7), 0 0 25px rgba(59, 130, 246, 0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.4), 0 0 10px rgba(59, 130, 246, 0.3);
  }
}

.fast-creation-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important; /* Override fixed width */
    padding: 10px 12px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    background: linear-gradient(45deg, #a855f7, #3b82f6);
    color: white !important;
    border: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
    animation: glow-pulse 4s infinite ease-in-out;
}

.fast-creation-tab::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    z-index: -1;
    border-radius: 26px;
    /* Rustic Magic Gradient: Gold, Pink, Deep Blue */
    background: linear-gradient(45deg, #f59e0b, #ec4899, #6366f1, #f59e0b); 
    background-size: 400%;
    animation: border-flow 10s linear infinite;
    opacity: 0.6;
}

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

@keyframes breathing-glow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.2));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.4));
        transform: scale(1.005);
    }
}

/* Text Shimmer for the Header */
@keyframes text-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.fast-creation-tab:hover {
    transform: translateY(-2px) scale(1.05);
}

.fast-creation-tab.active {
    transform: scale(1.02) !important;
    color: white !important;
    background-color: transparent !important; /* Background is handled by the gradient */
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.7), 0 0 25px rgba(59, 130, 246, 0.9) !important;
}

/* In style.css */

/* ================================================================== */
/* STYLE: "FAST CREATION" PROMPT FIELD (Magical Notebook Theme)       */
/* ================================================================== */

/* Container: Moved up, centered, with a magical aura */
.magic-prompt-container {
    text-align: center; 
    width: 90%;             /* Use % instead of fixed pixels */
    max-width: 850px; 
    margin: 0 auto;         /* Center it perfectly */
    z-index: 10;
    overflow-wrap: break-word; /* Force text to wrap */
    padding: 0 20px;
    box-sizing: border-box;
}



/* Subtitle: Clean and Modern */
.magic-prompt-container p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.25rem;
    color: #57534e;
    margin-bottom: 50px;
    font-weight: 500;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* The Input Wrapper: A Magical "Spell Bar" */
.magic-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 40px; /* More rounded for a modern feel */
    background: #ffffff;
    
    /* PERMANENT MULTI-LAYER GLOW */
    box-shadow: 
        0 15px 45px -10px rgba(99, 102, 241, 0.5), /* Deep Indigo Glow */
        0 0 20px rgba(56, 189, 248, 0.3),          /* Soft Cyan Aura */
        0 0 0 1px rgba(99, 102, 241, 0.1),        /* Thin Definition Line */
        inset 0 2px 5px rgba(255, 255, 255, 1);   /* Inner Glass Highlight */
        
    /* Permanent Animation */
    animation: breathing-glow 4s infinite ease-in-out;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* THE PERMANENT GRADIENT BORDER */
.magic-input-wrapper::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    z-index: -1;
    border-radius: 43px;
    /* High-vibrancy gradient */
    background: linear-gradient(45deg, #f59e0b, #ec4899, #6366f1, #06b6d4, #f59e0b); 
    background-size: 400%;
    animation: border-flow 8s linear infinite;
    opacity: 1; /* Always visible */
}

/* Hover scales the "power" slightly */
.magic-input-wrapper:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
        0 20px 60px -10px rgba(99, 102, 241, 0.6),
        0 0 30px rgba(56, 189, 248, 0.4);
}

/* The Text Input Field */
#magic-prompt-input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.2rem; /* Larger text */
    padding: 15px 25px;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

#magic-prompt-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* The Action Button: A Glossy Magical Jewel */
#magic-prompt-button {
    width: 64px;
    height: 64px;
    border-radius: 18px; /* Slightly squircle */
    border: none;
    margin-left: 8px;
    cursor: pointer;
    flex-shrink: 0;
    
    /* Glossy Gem Gradient */
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 25%),
                linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
                
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3D Depth */
    box-shadow: 
        0 10px 20px rgba(37, 99, 235, 0.3),
        inset 0 0 0 1px rgba(255,255,255,0.3),
        inset 0 -4px 2px rgba(0,0,0,0.1); /* Bottom lip */
        
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#magic-prompt-button .material-symbols-outlined {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: transform 0.4s ease;
}

/* Button Hover State */
#magic-prompt-button:hover {
    transform: scale(1.1) rotate(3deg);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%),
                linear-gradient(135deg, #a855f7 0%, #60a5fa 100%);
    box-shadow: 
        0 15px 35px rgba(124, 58, 237, 0.5),
        0 0 20px rgba(255,255,255,0.6), /* Magic Glow */
        inset 0 0 0 1px rgba(255,255,255,0.5);
}

#magic-prompt-button:hover .material-symbols-outlined {
    transform: rotate(-15deg) scale(1.1);
}

#magic-prompt-button:active {
    transform: scale(0.95);
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.2);
}

/* ================================================================== */
/* STYLE: FULL-SCREEN CONTENTTOOLS EDITOR                             */
/* ================================================================== */
.fullscreen-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* A neutral background */
    z-index: 1000; 
    display: flex;
    flex-direction: column;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    position: relative;
    z-index: 1001;
}

.editor-title {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

#editable-page-content {
    flex-grow: 1;
    overflow-y: auto; /* Allows scrolling of the page content */
    position: relative;
    z-index: 1000;
    /* --- THE FIX IS HERE --- */
    /* This prevents the flex item from growing beyond the viewport height due to its content size. */
    min-height: 0; 
}

/* This is a required class by ContentTools for the editing toolbox. */
/* The library will inject its UI at a higher z-index (e.g., 1010+), */
/* which will now correctly appear above our .fullscreen-editor-overlay. */
.ct-app--ready {
    /* No custom styles needed here; the library handles its own layering. */
}

/* 1. Make the entire overlay invisible to mouse clicks by default. */
.fullscreen-editor-overlay {
    pointer-events: none;
}

/* 2. Re-enable mouse clicks ONLY for the header area and the save button. */
.fullscreen-editor-overlay .editor-header,
.fullscreen-editor-overlay .editor-header * {
    pointer-events: auto;
}

/* 3. Re-enable mouse clicks on the editable content area itself so you can click to edit text. */
#editable-page-content, #editable-page-content * {
    pointer-events: auto;
}

/* ================================================================== */
/* STYLE: LIVE EDITOR (contenteditable)                               */
/* ================================================================== */
[contenteditable="true"] {
    outline: 2px dashed #FF5C5C; /* Red theme from aiEditModal */
    outline-offset: 2px;
    cursor: text;
    transition: background-color 0.2s ease;
}
[contenteditable="true"]:hover {
    background-color: rgba(255, 92, 92, 0.05);
}

/* ================================================================== */
/* --- START: LINK MANAGER & WIREFRAME MODE STYLES (VIVID & CLEAN) -- */
/* ================================================================== */

/* 1. The Overlay (Glassmorphism) */
.link-manager-overlay {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto;
}

/* 2. Overlay Header */
.link-manager-title {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #f3f4f6;
}

/* 3. List Items (Slots) */
.link-slot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-slot-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left-width: 6px; /* Color Bar */
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.link-slot-item:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.link-slot-item.active {
    background-color: #f0f9ff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* --- UPLIFTING ICON STYLING --- */
.link-slot-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.link-slot-item:hover .link-slot-icon-wrapper {
    transform: scale(1.15) rotate(-6deg);
}

.link-slot-icon-wrapper .material-symbols-outlined {
    font-size: 20px;
    font-weight: 600;
}

.link-slot-info {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.link-slot-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 2px;
}

.link-slot-value {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Roboto Mono', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- BOLD VERSION TAGS (V.2, EDITED) --- */
.link-version-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900; /* Super Bold */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* Specific Colors for Version Tags */
.link-version-tag.v-edited { background: linear-gradient(135deg, #f59e0b, #d97706); } /* Amber */
.link-version-tag.v-final { background: linear-gradient(135deg, #10b981, #059669); }  /* Green */
.link-version-tag.v-num { background: linear-gradient(135deg, #3b82f6, #2563eb); }    /* Blue */
.link-version-tag.v-unknown { background: #6b7280; } /* Grey */


/* --- COLOR VARIANTS --- */
/* Image */
.link-slot-item.type-img { border-left-color: #f59e0b; }
.type-img .link-slot-icon-wrapper { background: linear-gradient(135deg, #FFF7ED, #FFEDD5); border: 1px solid #FDE68A; color: #D97706; }

/* Anchor/Link */
.link-slot-item.type-a { border-left-color: #a855f7; }
.type-a .link-slot-icon-wrapper { background: linear-gradient(135deg, #FAF5FF, #F3E8FF); border: 1px solid #E9D5FF; color: #9333EA; }

/* Stylesheet */
.link-slot-item.type-link { border-left-color: #06b6d4; }
.type-link .link-slot-icon-wrapper { background: linear-gradient(135deg, #ECFEFF, #CFFAFE); border: 1px solid #A5F3FC; color: #0891B2; }


/* --- GRID FOCUS STATES --- */
.grid-linking-active .preview-card {
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

/* 1. The Source Card */
.preview-card.linking-source {
    opacity: 1; 
    filter: none; 
    z-index: 100 !important;
    /* Changed rgba(255, 255, 255, 0.8) to rgba(144, 238, 144, 0.8) for light green */
    box-shadow: 0 0 0 8px rgba(144, 238, 144, 0.8), 0 30px 60px rgba(0,0,0,0.6) !important;
    transform: scale(1.05);
}

/* 2. The Link Tree (Connected) */
.preview-card.linking-tree-node {
    opacity: 1 !important; filter: none !important; z-index: 40;
    border: 4px solid #10b981; /* Green border */
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
}


/* 3. Dimmed Cards (Readable Backgrounds) */
.preview-card.linking-dimmed:not(.linking-source):not(.linking-tree-node):not(.linking-target-candidate) {
    opacity: 0.1; /* Much more visible (was 0.1) */
    filter: grayscale(100%); /* Black & white only, NO BLUR */
    pointer-events: none; 
    transform: scale(0.98);
    transition: all 0.3s ease;
}

/* 4. Candidate Cards */
.preview-card.linking-target-candidate {
    opacity: 1; filter: none; z-index: 60; cursor: pointer; transform: scale(1.0);
    border-width: 4px; border-style: dashed; background-color: rgba(255,255,255,0.95);
}
.preview-card.linking-target-candidate:hover { transform: scale(1.03); z-index: 70; box-shadow: 0 20px 40px rgba(0,0,0,0.25); }

/* Target Colors */
.preview-card.target-img { border-color: #f59e0b; }
.preview-card.target-a { border-color: #a855f7; }
.preview-card.target-link { border-color: #06b6d4; }

/* 5. UPGRADE CANDIDATE (The "Unlinked Newer Version") */
.preview-card.target-upgrade { 
    border: 5px solid #ec4899 !important; /* Bold Pink Border */
    background-color: rgba(255,255,255,1) !important;
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
    transform: scale(1.05);
    z-index: 75;
}

/* --- THE "PINK-PURPLE-GREEN" BUTTON OVERLAY --- */
.link-upgrade-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.3s ease-out;
    border-radius: 8px;
}

.link-update-btn-tricolor {
    /* PINK - PURPLE - GREEN GRADIENT */
    background: linear-gradient(90deg, #FF00CC, #AA00FF, #00CC66); 
    background-size: 200% 200%;
    animation: gradient-move 2s ease infinite;
    
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px; /* Fully round pill */
    font-family: 'Poppins', sans-serif;
    font-weight: 900; /* Max Bold */
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5), 0 0 0 4px rgba(255,255,255,0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.link-update-btn-tricolor:hover {
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.6);
}

.link-update-btn-tricolor .material-symbols-outlined {
    font-size: 24px;
    font-weight: bold;
}

.link-upgrade-subtext {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
}

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

/* ... existing styles ... */

/* Add this near the Link Manager styles */
.link-update-dot {
    width: 8px; 
    height: 8px; 
    background-color: #ec4899; /* Pink */
    border-radius: 50%; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: 8px;
    box-shadow: 0 0 6px rgba(236, 72, 153, 0.8);
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}



/* --- BADGES --- */
.link-badge-pick-me {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: white; color: #111827; font-weight: 800; font-size: 14px; padding: 8px 16px;
    border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); pointer-events: none; z-index: 10;
    display: flex; align-items: center; gap: 6px; border: 2px solid transparent; text-transform: uppercase;
}
.target-img .link-badge-pick-me { border-color: #f59e0b; color: #d97706; }
.target-a .link-badge-pick-me { border-color: #a855f7; color: #7e22ce; }
.target-link .link-badge-pick-me { border-color: #06b6d4; color: #0891b2; }

.link-badge-connected {
    position: absolute; top: -10px; right: -10px;
    background: #10b981; color: white; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4); z-index: 11; border: 3px solid white;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { transform: scale(0); } to { transform: scale(1); } }

/* ================================================================== */
/* --- START: LINK MANAGER & WIREFRAME MODE STYLES (VIVID & CLEAN) -- */
/* ================================================================== */

/* ... (Keep existing Overlay and List Item styles) ... */

/* --- 1. THE PINK-PURPLE-GREEN BUTTON (Manual Linker) --- */
.link-upgrade-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(0px);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.3s ease-out;
    border-radius: 8px;
}

.link-update-btn-tricolor {
    /* THE GLOSSY PINK-PURPLE-GREEN GRADIENT */
    background: linear-gradient(135deg, #ec4899, #a855f7, #10b981);
    background-size: 200% 200%;
    animation: gradient-move 3s ease infinite;
    
    color: white;
    border: 3px solid rgba(255,255,255,0.5);
    padding: 12px 24px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.6);
    transform: scale(1);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.link-update-btn-tricolor:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.7);
    border-color: white;
}

.link-update-btn-tricolor .material-symbols-outlined {
    font-size: 20px;
    font-weight: 900;
}

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

/* --- 2. THE SUPER STYLED HUGE CHECKMARK (Active Connection) --- */
.link-badge-huge-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    
    /* Circle Styling */
    width: 80px;
    height: 80px;
    background: #10b981; /* Green */
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5);
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Animation */
    animation: pop-in-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.link-badge-huge-check .material-symbols-outlined {
    font-size: 48px;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-weight: 900;
}

/* Active Card Border to match checkmark */
.preview-card.is-active-link {
    border: 4px solid #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 10px 30px rgba(0,0,0,0.2);
    transform: scale(1.02);
    z-index: 90;
    opacity: 1 !important;
    filter: none !important;
}

@keyframes pop-in-bounce {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}



/* ================================================================== */
/* --- END: LINK MANAGER STYLES --- */
/* ================================================================== */

/* ================================================================== */
/*  2. UPLIFTING LIVE EDITOR TOGGLE (Holographic Pill)                */
/* ================================================================== */

#editor-preview-toggle-btn {
    /* Size & Shape */
    width: auto;
    height: 36px;
    padding: 0 16px;
    border-radius: 20px;
    
    /* Default "Off" State (Dark Glass) */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Animation */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#editor-preview-toggle-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Label Text (We will add this span in JS if it doesn't exist, or just style the container) */
#editor-preview-toggle-btn::after {
    content: "Desktop";
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* HOVER STATE */
#editor-preview-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ACTIVE (MOBILE) STATE - The "Uplifting" Part */
#editor-preview-toggle-btn.active {
    /* Vivid Purple/Pink Gradient */
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), inset 0 1px 1px rgba(255,255,255,0.3);
}

#editor-preview-toggle-btn.active::after {
    content: "Mobile";
}

/* Subtle Shine Animation on Active */
#editor-preview-toggle-btn.active::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: shine-sweep 3s infinite;
}

@keyframes shine-sweep {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* ================================================================== */
/* LIVE EDITOR HEADER & BUTTON STYLES (High Contrast Fix)             */
/* ================================================================== */

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: #ffffff; /* Explicit White Background */
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    position: relative;
    z-index: 1001;
}

/* 1. Fix Title Visibility */
.editor-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a; /* Dark Slate (Almost Black) */
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-title .material-symbols-outlined {
    color: #3b82f6; /* Blue icon for flair */
    font-size: 22px;
}

.editor-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-btn-separator {
    width: 1px;
    height: 24px;
    background-color: #cbd5e1;
    margin: 0 4px;
}

/* Base Button Style */
.editor-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 36px;
    font-family: 'Roboto', sans-serif;
}

.editor-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Cancel Button */
.editor-btn-cancel {
    background-color: transparent;
    border: 1px solid transparent;
    color: #64748b; /* Medium Grey */
}

.editor-btn-cancel:hover {
    background-color: #f1f5f9;
    color: #0f172a; /* Darker on hover */
}

/* Primary Save Button (Solid) */
.editor-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 1px solid rgba(0,0,0,0.1);
    color: white;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.editor-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

/* 2. Fix "Save Copy" Button Visibility */
.editor-btn-secondary {
    background-color: #ffffff;
    border: 1px solid #cbd5e1; /* Visible Grey Border */
    color: #334155;            /* Dark Slate Text */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.editor-btn-secondary:hover {
    border-color: #3b82f6;     /* Blue border on hover */
    color: #2563eb;            /* Blue text on hover */
    background-color: #eff6ff; /* Light blue tint bg */
}


/* ================================================================== */
/* NEW: IN-CHAT SMART EDITOR WIDGET                                   */
/* ================================================================== */

.ai-inline-edit-card {
    background-color: #2D2A2A; /* Match Modal Charcoal */
    border: 1px solid #4a3a3a;
    border-radius: 12px;
    padding: 12px;
    margin: 10px 0;
    color: #F0E9E9;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: fade-in 0.3s ease-out;
}

.ai-inline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #4a3a3a;
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.ai-inline-title {
    font-size: 13px;
    font-weight: 600;
    color: #FF5C5C; /* Red Accent */
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-inline-expand-btn {
    background: transparent;
    border: 1px solid #5c4f4f;
    color: #b3a7a7;
    border-radius: 4px;
    padding: 2px 1px;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.ai-inline-expand-btn:hover {
    background-color: #4a3a3a;
    color: white;
    border-color: #FF5C5C;
}

.ai-inline-textarea {
    width: 100%;
    background-color: #221f1f;
    border: 1px solid #5c4f4f;
    border-radius: 6px;
    padding: 8px;
    color: #f0e9e9;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    resize: vertical;
    min-height: 60px;
}

.ai-inline-textarea:focus {
    outline: none;
    border-color: #FF5C5C;
    box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.15);
}

.ai-inline-actions-row {
    display: flex;
    gap: 8px;
}

.ai-inline-btn {
    flex: 1;
    padding: 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.ai-inline-btn.primary {
    background: linear-gradient(135deg, #e53e3e, #c53030);
    border: 1px solid #9b2c2c;
    color: white;
}

.ai-inline-btn.primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
}

.ai-inline-btn.secondary {
    background-color: #383434;
    border: 1px solid #5c4f4f;
    color: #d1d5db;
}

.ai-inline-btn.secondary:hover {
    background-color: #4a4545;
    border-color: #FF8A8A;
}

.ai-inline-results {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    margin-top: 5px;
    border-top: 1px solid #4a3a3a;
    padding-top: 10px;
}

/* Scrollbar for inline results */
.ai-inline-results::-webkit-scrollbar { width: 4px; }
.ai-inline-results::-webkit-scrollbar-track { background: transparent; }
.ai-inline-results::-webkit-scrollbar-thumb { background: #5c4f4f; border-radius: 2px; }

/* Reuse suggestion button styles but smaller */
.ai-inline-results .ai-edit-suggestion-btn, 
.ai-inline-results .ai-style-suggestion-card {
    padding: 8px;
    font-size: 11px;
}
.ai-inline-results h5, .ai-inline-results .suggestion-title {
    font-size: 12px;
}

/* ================================================================== */
/* SAAS POWER BAR & COST BADGES                                       */
/* ================================================================== */

/* --- Header Power Bar --- */
.credit-balance-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 140px;
    margin-right: 15px;
}

.credit-text-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: var(--app-text-color);
    margin-bottom: 3px;
    text-transform: uppercase;
}

.credit-progress-track {
    width: 100%;
    height: 6px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.credit-progress-fill {
    height: 100%;
    width: 0%; /* JS will update this */
    background: linear-gradient(90deg, #10b981, #059669); /* Dollar Green */
    border-radius: 3px;
    transition: width 0.5s ease;
}

.credit-progress-fill.low { background: #f59e0b; } /* Orange warning */
.credit-progress-fill.empty { background: #ef4444; } /* Red alert */

/* --- Cost Badges (⚡) --- */
.cost-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background-color: rgba(0,0,0,0.1);
    color: currentColor;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 8px;
    opacity: 0.8;
}

.cost-badge .material-symbols-outlined {
    font-size: 10px;
    font-weight: bold;
}

/* Specific styling for the Generate Button badge to make it pop */
#main-build-btn .cost-badge {
    background-color: rgba(255,255,255,0.2);
    color: white;
}

/* Container for the individual bubble to allow absolute positioning of the button */
.conv-bubble-wrapper {
    position: relative;
    margin-bottom: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* The actual bubble text (re-using your existing styles) */
.conversation-preview-container .bubble-text {
    max-width: 90%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
    cursor: default;
    transition: background-color 0.2s ease;
}

/* The Smart Copy Button */
.bubble-copy-btn {
    position: absolute;
    top: 50%;
    right: -30px; /* Hidden outside the bubble area initially */
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

/* Show button on hover */
.conv-bubble-wrapper:hover .bubble-copy-btn {
    opacity: 1;
    right: 5px; /* Slide inward */
}

.bubble-copy-btn:hover {
    background: #ffffff;
    color: #3b82f6;
    transform: translateY(-50%) scale(1.1);
}

.bubble-copy-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Feedback state for "Copied" */
.bubble-copy-btn.copied {
    background: #10b981 !important;
    color: white !important;
    border-color: #10b981;
}


.planner-select optgroup {
    font-weight: 700;
    color: #047857; /* Dollar Green Group Titles */
    background-color: #f0fdf4;
    padding: 10px;
    font-style: normal;
}

.planner-select option {
    font-weight: 400;
    color: #064e3b;
    padding: 8px;
    background-color: #ffffff;
}

/* Ensure the planner card takes priority and scrolls well */
.ai-chat-planner-card {
    border-left: 6px solid #10b981;
    animation: slide-in-left 0.4s ease-out;
}

@keyframes slide-in-left {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* ================================================================== */
/* HYPER-MODERN PRO PLANNER CARD (Green Modal) - UPDATED & TALLER     */
/* ================================================================== */

.ai-chat-planner-card {
    /* Visuals: Light Green Gradient & Border */
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 1px solid #86efac !important;
    border-radius: 14px !important;
    
    /* Layout: Fixed Clipping & Spacing */
    padding: 20px 15px !important;
    margin: 10px 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;

    /* THE TALLER FIX: Prevents insides from being cut off */
    min-height: 540px !important; 
    height: auto !important;

    /* Depth & Shadows */
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.2), 
                inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    position: relative;
    overflow: hidden; /* Required for the Holographic Sweep */
    color: #064e3b !important; /* Dark green text for readability */
}

/* --- Holographic Sweep Animation --- */
.ai-chat-planner-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 100%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(30deg);
    pointer-events: none;
    animation: holograph-sweep 6s infinite;
}

@keyframes holograph-sweep {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

/* --- Dropdown / Select UI Adjustments --- */
.planner-select optgroup {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    background: #f8fafc !important;
    color: #059669 !important; /* Emerald 600 */
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding-top: 8px !important;
}

.ai-chat-planner-card .planner-select {
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background-color: #ffffff !important;
    border: 1px solid #6ee7b7 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

/* Ensure the output textarea remains readable and fits */
#chat-planner-output-prompt {
    min-height: 100px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #6ee7b7 !important;
    border-radius: 8px !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 12px !important;
    resize: none !important;
}

/*
================================================================================
  SIDEBAR COMMAND CENTER: GLOSSY BUILD SYSTEM & WRITER STUDIO
================================================================================
*/

/* --- 1. KEYFRAMES (The Magic & Sparkles) --- */
@keyframes magic-glow-pulse {
  0% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(168, 85, 247, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2); }
  50% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), 0 0 30px rgba(168, 85, 247, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.2); }
  100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(168, 85, 247, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2); }
}

@keyframes sparkle-sweep {
  0% { transform: translateX(-150%) skewX(-30deg); }
  100% { transform: translateX(150%) skewX(-30deg); }
}

/* --- 2. STRUCTURAL WRAPPERS (The Click & Layering Fix) --- */

/* Base container for buttons in the sidebar */
.compose-page-button-wrapper {
    position: relative;
    padding: 10px 15px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* Fix for the button inside the Studio Tab (Should NOT be at bottom) */
#sidebar-writer-studio-content .compose-page-button-wrapper {
    margin-top: 10px;
    padding: 10px 0;
    z-index: 100; /* High z-index to ensure it is above the sidebar pit */
    pointer-events: auto !important;
}

/* Fix for the main Build button (Always forced to bottom) */
.app-sidebar-left > .compose-page-button-wrapper {
    margin-top: auto; 
    border-top: 1px solid rgba(0,0,0,0.1);
    background: var(--app-sidebar-bg);
    z-index: 10;
}

/* --- 3. SHARED BUTTON COMPONENT (Glossy Base) --- */
.compose-page-btn, 
.studio-modal-trigger {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.2);
    pointer-events: auto !important;
    isolation: isolate;
}

/* The Glossy Highlight (Top Shine) */
.compose-page-btn::before, 
.studio-modal-trigger::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
    transform: translateY(-60%) translateX(10%);
    z-index: -1;
}

/* The Sparkle Sweep (Moving Shine) */
.compose-page-btn:not(:disabled)::after, 
.studio-modal-trigger:not(:disabled)::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-150%) skewX(-30deg);
    animation: sparkle-sweep 3s infinite linear;
    z-index: -1;
}

/* Hover/Active States */
.compose-page-btn:not(:disabled):hover, 
.studio-modal-trigger:not(:disabled):hover {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.1);
}

.compose-page-btn:active, 
.studio-modal-trigger:active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.3);
}

/* Disabled State */
.compose-page-btn:disabled, 
.studio-modal-trigger:disabled {
    cursor: not-allowed;
    filter: saturate(0.4) brightness(0.7);
    opacity: 0.8;
}

/* --- 4. UNIQUE IDENTITIES --- */

/* The Blue Build Button (Glows when active) */
.compose-page-btn {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    border: 1px solid #2563eb;
}
.compose-page-btn:not(:disabled) {
    animation: magic-glow-pulse 3s infinite ease-in-out;
}

/* The Purple Manuscript Button */
.studio-modal-trigger {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: 1px solid #6d28d9;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}

/* --- 5. STUDIO TOOLS & PANES --- */

.sidebar-tab-item[data-tab="studio"].active {
    color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.08) !important;
}

.studio-tools-header {
    display: block !important;
    font-size: 10px;
    font-weight: 800;
    color: #a855f7;
    margin: 15px 0 10px 0;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.studio-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.studio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 5px;
    background: #ffffff;
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 10px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.studio-btn:hover {
    background: #a855f7;
    color: white;
}

#sidebar-writer-studio-content {
    min-height: 200px;
    display: none;
    flex-direction: column;
}

#sidebar-writer-studio-content.active {
    display: flex !important;
}

/* --- 6. MODAL OVERLAYS (Manuscript Editor) --- */
.manuscript-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(8, 5, 20, 0.9) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 999999 !important;
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
}

.manuscript-modal-overlay.visible {
    display: flex !important;
    opacity: 1 !important;
}

.manuscript-modal {
    background-color: #13111c !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    width: 700px !important;
    max-width: 95vw;
    border-radius: 12px;
    padding: 0;
}

/* --- Fix for Markdown Scrolling & Harvesting UI --- */

/* Enable scrolling for the text container */
.markdown-body-container {
    height: 100%;
    width: 100%;
    overflow-y: auto !important; /* Force scroll */
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Individual sentence styling */
.sentence-row {
    padding: 4px 10px;
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
    color: #1e293b;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: text;
}

/* Scissors Mode visual feedback */
.scissors-active .sentence-row {
    cursor: cell !important;
}

.scissors-active .sentence-row:hover {
    background: rgba(168, 85, 247, 0.1);
}

/* Selected state for harvesting */
.sentence-row.selected {
    background: #a855f7 !important;
    color: #ffffff !important;
}

/* The floating toolbar at the bottom of the card */
.harvesting-toolbar {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(4px);
    padding: 8px;
    display: flex;
    gap: 8px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 100;
}

.harvesting-toolbar .mini-action-btn {
    font-size: 10px;
    height: 24px;
    white-space: nowrap;
}

/* --- Sidebar Contextual Visibility --- */

/* 1. Hide the Build Header and the Main Build Button by default when not in assembly mode */
.design-guides-container:not([data-active-tab="assembly"]) .assembly-pit-header,
.design-guides-container:not([data-active-tab="assembly"]) #main-build-btn {
    display: none !important;
}

/* 2. Ensure they are visible in assembly mode */
.design-guides-container[data-active-tab="assembly"] .assembly-pit-header {
    display: flex;
}

.design-guides-container[data-active-tab="assembly"] #main-build-btn {
    display: flex;
}

/* 3. Handle the "Build" button wrapper padding when hidden to avoid empty space at bottom */
.design-guides-container:not([data-active-tab="assembly"]) .compose-page-button-wrapper:has(#main-build-btn) {
    padding: 0;
    border: none;
}

/* ================================================================== */
/* --- NEW: SLIM ORACLE FOOTER BAR (40px Sticky) -------------------- */
/* ================================================================== */

  .oracle-footer-bar {
    position: relative;
    height: 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    padding: 0 20px;
    
    /* 1. Deep Void "Liquid" Gradient */
    background: linear-gradient(
        90deg, 
        #08050d 0%,    /* Almost black-purple */
        #1c1626 50%,   /* Deep, glowing core */
        #08050d 100%   /* Almost black-purple */
    );

    /* 2. Soft, Luxury "Thread-Thin" Border with a Shimmer */
    border-top: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 30px;
    
    /* 3. Subtle inner glow & active energy */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.08), 
        0 -2px 15px rgba(128, 50, 255, 0.25);
    
    z-index: 100;
    box-sizing: border-box;
    overflow: hidden; /* Contains the shimmer animation */
}

/* 4. The "Lively" Shimmer Beam */
.oracle-footer-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(168, 85, 247, 0.15), 
        transparent
    );
    animation: oracle-shimmer 12s linear infinite;
    pointer-events: none;
}

/* 5. The "Energy Pulse" Animation */
@keyframes oracle-shimmer {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
}

/* Optional: Make the text feel more alive by adding a subtle breathing opacity */
.oracle-bar-stats {
    animation: breathing-text 6s ease-in-out infinite;
}

@keyframes breathing-text {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

.oracle-bar-center-container {
    display: flex;
    justify-content: center;
    padding: 0 10px;
}


/* Stats Area */
.oracle-bar-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff !important; 
    white-space: nowrap;
}

.oracle-bar-stats span { color: #ffffff !important; }

.oracle-stat-number {
    color: #2dd4bf !important; 
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    margin-right: 4px;
}

.oracle-bar-stats .material-symbols-outlined {
    color: #a855f7 !important; 
    font-variation-settings: 'FILL' 1;
}

/* Actions Container */
.oracle-bar-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Right align the actions */
    align-items: center;
}

.thread-map-btn {
    height: 26px;
    padding: 0 15px !important;
    font-weight: 800 !important; 
    border: 1px solid #60a5fa !important;
    background: #3b82f6 !important;
    color: white !important;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-sizing: border-box; 
    transform: none !important;
    transition: background 0.2s ease;
}

.thread-map-btn:hover {
    background: #2563eb !important;
    box-shadow: none !important;
}

/* Standard Oracle Buttons */
.oracle-mini-btn {
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(168, 85, 247, 0.3); 
    background: rgba(255, 255, 255, 0.05);
    color: #c084fc;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s ease, color 0.2s ease;
    box-sizing: border-box; 
}

.oracle-mini-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    transform: none !important;
    box-shadow: none !important;
}

.oracle-mini-btn:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
    transform: none !important;
}

.oracle-mini-btn.primary {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: white;
    border: none;
}

.oracle-mini-btn.primary:hover {
    filter: brightness(1.1);
}

/* ================================================================== */
/* --- UPDATED: PROJECT COMMAND CENTER HUD (FULL WIDTH DARK THEME) -- */
/* ================================================================== */

.oracle-report-modal {
    max-width: 1400px !important; /* Wide screen for 3-column data */
    width: 95% !important;
    height: 85vh !important;
    background: #0f1117 !important; /* Deep Graphite */
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(168, 85, 247, 0.1) !important;
    border-radius: 20px !important;
    color: #e2e8f0;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 1. REMOVE NOTEBOOK SIDEBAR & SPIRAL BINDING */
.oracle-report-modal::after, 
.oracle-report-modal .wizard-sidebar,
.oracle-report-modal .wizard-spiral-binding {
    display: none !important;
}

/* 2. HEADER: PINNED TO TOP */
.oracle-report-modal .wizard-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 40px;
    display: flex;
    justify-content: center; /* Center the title */
    align-items: center;
    flex-shrink: 0;
}

.oracle-report-modal .wizard-header h2 {
    font-family: 'Clash Display', 'Manrope', sans-serif;
    font-size: 1.4rem !important;
    color: #ffffff;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

/* 3. MAIN CONTENT: THE 3-COLUMN GRID */
.oracle-report-modal .wizard-content {
    flex-grow: 1;
    padding: 25px !important;
    margin: 0 !important;
    mask-image: none !important; /* Remove the fade effect from the notebook */
    -webkit-mask-image: none !important;
    overflow: hidden; /* Grid will handle internal scrolling */
}

.oracle-hud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 20px;
    height: 100%;
    width: 100%;
}

.hud-column {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    min-height: 0; /* Important for internal scroll areas */
}

/* 4. INTERNAL SCROLLING */
.hud-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 8px;
    margin-top: 10px;
}

.hud-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.hud-scroll-area::-webkit-scrollbar-thumb {
    background: #4c1d95;
    border-radius: 10px;
}

/* 5. HUD COMPONENTS (HEAL & SUGGEST) */
.btn-heal {
    background: linear-gradient(135deg, #ef4444, #b91c1c); /* Red Alert */
    color: white; 
    padding: 8px 14px; 
    border: none;
    border-radius: 8px; 
    font-size: 11px; 
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all 0.2s ease;
}

.btn-heal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.5);
    filter: brightness(1.2);
}

.btn-suggest {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* Proactive Blue */
    color: white; 
    padding: 10px 16px; 
    border: none;
    border-radius: 8px; 
    font-size: 12px; 
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transition: all 0.2s ease;
}

.btn-suggest:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.5);
}

/* 6. PULSE TIMELINE ITEMS */
.pulse-item {
    font-size: 12px; 
    padding: 12px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.pulse-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.pulse-time { 
    color: #a855f7; 
    font-weight: 800; 
    margin-right: 8px; 
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
}

/* 7. FOOTER */
.oracle-report-modal .wizard-footer {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px 30px;
    flex-shrink: 0;
}

/* ================================================================== */
/* THREDWEB: THREAD EXTENSION UI                                      */
/* ================================================================== */

.active-thread-indicator {
    position: absolute;
    top: -12px;
    right: -8px;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255,255,255,0.3);
    border: 2px solid var(--app-bg-color);
    z-index: 20;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: thread-pulse 2s infinite ease-in-out;
}

.active-thread-indicator:hover {
    transform: scale(1.2) rotate(15deg);
    filter: brightness(1.1);
}

.active-thread-indicator .material-symbols-outlined {
    font-size: 16px;
    font-weight: bold;
}

@keyframes thread-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 6px 15px rgba(245, 158, 11, 0.6); }
}

/* ================================================================== */
/* THREADWEB HUB: MASTER UI & 3x3 DASHBOARD ENGINE (VER 5.5 - GRAY)   */
/* ================================================================== */

/* --- 1. THE MODAL FRAMEWORK --- */
.welcome-wizard-overlay {
    position: fixed !important; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 900 !important; /* FIXED: Lowered so popups can appear over the wizard */
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); font-family: 'Plus Jakarta Sans', sans-serif;
}

.welcome-wizard-modal.threadweb-hub {
    width: 1240px; height: 820px; max-width: 98vw; max-height: 92vh;
    background: #949494; border: 1px solid #ffffff;
    border-radius: 12px; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* --- 2. MASTER HEADER & NEURON CANVAS --- */
.master-header {
    height: 100px; background: #000000; position: relative;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid #333; flex-shrink: 0;
}

.main-title {
    color: white; font-size: 38px; font-weight: 900; letter-spacing: 4px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.main-title .dot { color: #5dade2; }

.header-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#neuronCanvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    z-index: 1; 
}

/* --- 3. SIDEBAR & TACTILE PUSH BUTTONS (MAGIC METALLIC THEME) --- */

/* 1. Main Wrapper Background */
.paper-stack { 
    background: #0b0f19; /* Deep Void Blue - creates contrast with sidebar */
    display: flex; 
    flex-grow: 1; 
    overflow: hidden; 
}

/* 2. The Metallic Sidebar */
.sidebar {
    width: 200px;
    /* Deep Metallic Gradient: Slate to Graphite */
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    /* High-end depth shadows */
    box-shadow: 
        inset -1px 0 0 rgba(255, 255, 255, 0.05), 
        5px 0 25px rgba(0, 0, 0, 0.5); 
    padding: 25px 12px;
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    overflow-y: auto; 
    flex-shrink: 0;
    z-index: 10;
}

/* 3. Magic Thread Buttons (Base) */
.btn-push, .wizard-tab {
    position: relative;
    border-radius: 8px;
    padding: 12px 14px; /* Optimized spacing */
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Inactive State: Dark Metal with transparent background */
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid transparent; /* Overridden by color classes */
    color: #94a3b8; /* Overridden by color classes */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hover State: Lift & Glow */
.btn-push:hover, .wizard-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Active State: "Lit Up" Logic */
.btn-push.active, .wizard-tab.active {
    transform: translateY(0);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Crisp bright border */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- Color Variants: Thin Magic Border (Inactive) & Full Color (Active) --- */

/* Violet (Fast Launch) */
.btn-purple { border: 1px solid rgba(168, 85, 247, 0.4); color: #c084fc; }
.btn-purple:hover { border-color: #a855f7; background: rgba(168, 85, 247, 0.1); color: #d8b4fe; }
.btn-purple.active {
    background: linear-gradient(135deg, #9333ea, #a855f7) !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.5), inset 0 1px 1px rgba(255,255,255,0.3) !important;
}

/* Gray (Niches/Category) */
.btn-neutral { border: 1px solid rgba(148, 163, 184, 0.4); color: #94a3b8; }
.btn-neutral:hover { border-color: #cbd5e1; background: rgba(148, 163, 184, 0.1); color: #e2e8f0; }
.btn-neutral.active {
    background: linear-gradient(135deg, #475569, #64748b) !important;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.5), inset 0 1px 1px rgba(255,255,255,0.3) !important;
}

/* Green (Website) */
.btn-green { border: 1px solid rgba(16, 185, 129, 0.4); color: #34d399; }
.btn-green:hover { border-color: #10b981; background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }
.btn-green.active {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.5), inset 0 1px 1px rgba(255,255,255,0.3) !important;
}

/* Deep Blue (Thread Map) */
.btn-blue { 
    background: transparent !important; 
    border: 1px solid rgba(29, 78, 216, 0.5) !important; 
    color: #60a5fa; 
}
.btn-blue:hover { 
    border-color: #3b82f6 !important; 
    background: rgba(29, 78, 216, 0.15) !important; 
    color: #93c5fd; 
}
.btn-blue.active {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8) !important; /* Dark blue fill */
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(29, 78, 216, 0.6), inset 0 1px 1px rgba(255,255,255,0.3) !important;
}

/* Yellow (Gallery) */
.btn-yellow { border: 1px solid rgba(245, 158, 11, 0.4); color: #fbbf24; }
.btn-yellow:hover { border-color: #f59e0b; background: rgba(245, 158, 11, 0.1); color: #fcd34d; }
.btn-yellow.active {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255,255,255,0.3) !important;
}

/* Red (Epic Hub) */
.btn-red { border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171; }
.btn-red:hover { border-color: #ef4444; background: rgba(239, 68, 68, 0.1); color: #fca5a5; }
.btn-red.active {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5), inset 0 1px 1px rgba(255,255,255,0.3) !important;
}

/* Icon Animation */
.btn-push .material-symbols-outlined,
.wizard-tab .material-symbols-outlined {
    font-size: 18px;
    transition: all 0.3s ease;
    /* Color is inherited from text color */
}
.btn-push.active .material-symbols-outlined, 
.wizard-tab.active .material-symbols-outlined {
    color: #ffffff;
    transform: scale(1.1);
}

/* --- 4. DARK MODE TOGGLE SWITCH (Updated) --- */
.sidebar-mode-toggle-wrapper {
    padding: 0;
    margin-top: 10px;
    /* Negative margin pulls the switch down to perfectly hug the green Website button */
    margin-bottom: -6px; 
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 20; /* Keeps the toggle clickable over the gap */
}

.slim-sidebar-switch {
    display: flex !important;
    background: rgba(0, 0, 0, 0.3) !important; /* Dark track */
    width: 100% !important;
    margin: 0 !important; /* Override any other margins */
    padding: 3px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}

.slim-sidebar-switch .toggle-btn {
    flex: 1 !important;
    border: none !important;
    padding: 6px 0 !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer;
    color: #64748b !important;
    background: transparent !important;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

/* Active Toggle: Lit up Blue */
.slim-sidebar-switch .toggle-btn.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.slim-sidebar-switch .toggle-btn:hover:not(.active) {
    color: #e2e8f0 !important;
    background: rgba(255,255,255,0.05) !important;
}

/* --- 4. THE UNIFIED SCROLL & GRID ENGINE --- */
.wizard-pane-container { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }

.wizard-content-scroll { 
    display: flex !important; flex-direction: column; flex: 1 1 auto;
    min-height: 0; max-height: calc(92vh - 140px); overflow-y: auto !important; 
    padding: 30px; padding-bottom: 160px;
    scrollbar-width: thin; scrollbar-color: #ffffff #d1d1d1;
}

/* 3x3 Grid applied to Website, Articles, Gallery, and Epics */
.blueprint-track, .suggestions-container, .epic-suggestions-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important; width: 100% !important; padding: 15px 0;
    overflow-x: hidden !important;
}

/* CARDS: Website Blueprint Items */
.blueprint-section-item {
    min-width: 0; 
    height: auto !important; /* Allows it to grow */
    min-height: 60px;        /* Keeps a nice size when closed */
    background: #b0b0b0 !important; 
    border-top: 1px solid #ffffff !important;
    border-radius: 12px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Adds a smooth animation when size changes */
}

/* CARDS: Epic Chapters & Asset Widgets */
.content-suggestion-card {
    height: 200px; background: #ffffff !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 12px !important; display: flex; flex-direction: column;
    overflow: hidden; transition: all 0.2s ease; padding: 0 !important;
}
.content-suggestion-card[open] { height: auto; grid-row: span 2; background: #f8f8f8 !important; }
.content-suggestion-card:hover { border-color: #7367f0; transform: translateY(-5px); }

/* CATEGORY VIEW: Industry Grid */
.wizard-grid-scroll-area {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px; padding: 20px 0 100px 0;
}

/* --- 5. FAST LAUNCH / MAGIC PROMPT (PROFESSIONAL PNG WITH GLITCH FX) --- */
#fastCreationPane {
    display: none; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    height: 100%; 
    width: 100%; 
    padding: 40px;
    position: relative;
    overflow: hidden;
    
    /* 🟢 JUSTERAD: Ändra alfa-värdena (t.ex. 0.95) för att styra bildens synlighet */
    background-image: 
        radial-gradient(circle at center, rgba(11, 15, 25, 0.5) 0%, rgba(5, 5, 5, 0.95) 95%),
        url('./assets/background.jpg');
        
    /* 🟢 TILLAGD: Mixar gradienten med bilden för önskad opacitetseffekt */
    background-blend-mode: multiply; 
        
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    animation: slow-pan 60s linear infinite alternate;
    filter: contrast(1.05) saturate(1.1) hue-rotate(-5deg);
}

/* Subtle panning animation */
@keyframes slow-pan {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* --- 🟢 NEW: GENTLE GLITCH FX LAYER --- */
#fastCreationPane::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Subtle grainy overlay mimics digital interference */
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05; 
    pointer-events: none;
    z-index: 2;
    animation: gentle-glitch 5s infinite;
}

@keyframes gentle-glitch {
    0%, 95%, 100% { transform: skew(0deg); opacity: 0.05; }
    96% { transform: skew(0.5deg); opacity: 0.08; }
    97% { transform: skew(-0.5deg); opacity: 0.08; }
    98% { transform: skew(0.2deg); }
}

/* Subtle background glow animation */
#fastCreationPane::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
    animation: pulse-warm 6s infinite alternate;
    pointer-events: none;
    z-index: 1;
}

@keyframes pulse-warm {
    0% { transform: scale(0.9); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.8; }
}



/* --- 1. THE MAGIC GLOWING TITLE (Brushed Steel & Mist) --- */
.magic-prompt-container h2 {
    font-family: 'Archivo Black', 'Clash Display', sans-serif;
    /* 1. FORCE FONT TO SCALE WITH VIEWPORT WIDTH */
    font-size: min(3rem, 10vw); 
    
    font-weight: 900; 
    margin-bottom: 20px;
    
    /* 2. Fix the line height */
    line-height: 0.9; 
    letter-spacing: -2px; 
    text-transform: uppercase;
    
    /* 3. Gradient & Chrome FX (Kept same) */
    background: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 35%, #999999 50%, #BDBDBD 71%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 4. SHARPENED BORDERS */
    -webkit-text-stroke: 1px rgba(255,255,255,0.1);
    filter: drop-shadow(0 2px 0px rgba(255,255,255,0.2)) 
            drop-shadow(0 -2px 0px rgba(0,0,0,0.4));
    
    /* 5. CRITICAL: Prevent the text from expanding beyond the container */
    max-width: 100%;
    display: inline-block; /* Ensures it respects container width */
}

/* 4. Optional: Add a "Glossy Reflection" on hover */
.magic-prompt-container h2:hover {
    background: linear-gradient(
        180deg, 
        #FFFFFF 0%, 
        #FFFFFF 45%, 
        #BCC6CC 50%, 
        #FFFFFF 61%, 
        #FFFFFF 100%
    );
    -webkit-background-clip: text;
    transition: all 0.4s ease;
}

/* Updated Subtitle for better readability */
.magic-prompt-container p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem; /* Slightly smaller for longer paragraph */
    color: #e2e8f0; 
    font-weight: 500;
    max-width: 750px; /* Wider to allow the ecosystem text to flow */
    margin: 0 auto 40px auto;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    padding: 0 20px; /* Padding for mobile safety */
    border-radius: 22px;
    backdrop-filter: blur(15px);
    background: rgba(0, 0, 0, 0.08);
    border-color: #10b981;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.2);
}

/* --- 2. THE INPUT WRAPPER (Frosted Glass Core) --- */
.magic-input-wrapper {
    position: relative; 
    display: flex; 
    align-items: center; 
    padding: 8px;
    border-radius: 40px; 
    
    /* Frosted Glass Effect */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transition: all 0.4s ease;
}

/* The "Threat" Glow Border */
.magic-input-wrapper::before {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    z-index: -1; border-radius: 42px;
    background: linear-gradient(90deg, #10b981, #d4f700);
    opacity: 0.04;
}

.magic-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: #10b981;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.2);
}

#magic-prompt-input {
    flex-grow: 1; border: none; outline: none; background: transparent;
    font-size: 1.4rem; padding: 20px 30px; color: #ffffff;
    font-family: 'Poppins', sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* --- BOLD DATA-BLOCK CHIPS (Clickable Version) --- */
.booster-chip-group {
    width: 100%;
    max-width: 450px; 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px auto 0 auto;
    padding: 0 10px;
}

/* Treat the chip as the button itself */
.booster-chip {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.booster-chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    
    /* Modern Glass Plate */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #e2e8f0;
    
    /* Depth */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1);
}

/* Hover State */
.booster-chip:hover span {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

/* Active "Selected" State */
.booster-chip.active-chip span {
    background: rgba(16, 185, 129, 0.25);
    border: 1px solid #10b981;
    color: #ffffff;
    text-shadow: 0 0 8px #10b981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4), inset 0 0 10px rgba(16, 185, 129, 0.2);
}

/* --- 4. THE LAUNCH BUTTON (Chrome Jewel) --- */
#magic-prompt-button {
    width: 68px; height: 68px;
    background: linear-gradient(135deg, #d4f700, #10b981);
    color: #064e3b;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    transition: all 0.3s ease;
}

#magic-prompt-button:hover {
    transform: scale(1.08);
    background: #ffffff; /* Turns clean white/chrome on hover */
    color: #10b981;
    box-shadow: 0 0 30px #d4f700;
}

/* ================================================================== */
/* THREADWEB: MASTER COMMAND & ARCHITECT ENGINE (V10 - 4x4 TILED)     */
/* ================================================================== */

/* 1. MODAL FOUNDATION (KEEP EXISTING) */
.welcome-wizard-modal.threadweb-hub {
    background: var(--paper) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border: 1px solid #ffffff !important;
}

.wizard-content-scroll {
    display: flex !important;
    flex-direction: column !important;
    padding: 30px !important;
    gap: 30px;
    background: var(--paper) !important;
    overflow-x: hidden !important; 
    overflow-y: auto !important;
    scroll-behavior: smooth;
}

/* 2. STEP 0: CORE LOGIC (KEEP EXISTING) */
.step-box.full-width:first-of-type {
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 4px solid #10b981 !important;
    padding: 24px !important;
    min-height: 185px !important;
    position: relative;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.step-box.full-width:first-of-type h3 {
    color: var(--hub-dark) !important;
    font-size: 14px !important;
    font-weight: 900;
    text-transform: uppercase;
}

.step-box.full-width:first-of-type .styled-textarea {
    height: 110px !important;
    font-family: 'Roboto Mono', monospace !important;
    background: #ffffff !important;
    border: 1px solid #c1c1c1 !important;
    color: #334155 !important;
    font-size: 14px !important;
}

/* Ensures the header matches Step 0 exactly */
#manualPlannerPane .step-box.full-width .step-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

/* Styling for the "!" icon to match the "0" circle */
#manualPlannerPane .step-box.full-width .step-num {
    flex-shrink: 0 !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    font-weight: 900 !important;
}

/* Layout for the Brand Input and Extract Button */
.manual-actions {
    display: flex !important;
    flex-direction: column !important; /* Stack for better visibility on smaller cards */
    gap: 12px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

/* Style the Brand Name input to match Guided Niche inputs */
#manualBrandNameInput {
    width: 100% !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    color: #0f172a !important;
}

/* The Big Extract Blueprint Button */
#extractPlanBtn {
    width: 100% !important;
    height: 48px !important; /* Larger for easy clicking */
    background: #0f172a !important; /* High-contrast dark button */
    color: #10b981 !important;    /* Magic green text */
    border: none !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px !important;
    box-shadow: 0 4px 0 rgba(0,0,0,1) !important;
    transition: all 0.1s ease;
    cursor: pointer;
}

#extractPlanBtn:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 rgba(0,0,0,1) !important;
}

#extractPlanBtn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,1) !important;
}


/* --- STEP 0: Horizontal Asset Architect (Paired Image & Text) --- */

.wizard-asset-grid {
    display: flex !important;
    flex-direction: row !important; /* Forces the Add button and Track into a row */
    gap: 15px;
    margin-top: 20px;
    padding-bottom: 15px;
    overflow-x: auto !important; /* Enables Left-to-Right scrolling */
    scrollbar-width: thin;
}

.asset-track {
    display: flex !important;
    flex-direction: row !important; /* Keeps uploaded items in a row */
    gap: 15px;
}

/* Wrapper for ONE Image + ONE Textarea */
.asset-item-wrap {
    display: flex !important;
    flex-direction: column !important; /* Stacks text vertically UNDER its image */
    width: 120px !important; /* Fixed width for the pair */
    flex-shrink: 0;
}

/* The Square Image Card */
.staged-asset-card {
    width: 120px !important;  
    height: 120px !important; 
    border-radius: 10px;
    background: #000;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    margin-bottom: 10px; /* Space between image and its description */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staged-asset-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- THE BIGGER TEXT FIELD BELONGING TO THE IMAGE --- */
.asset-desc-input {
    width: 120px !important;
    height: 65px !important; /* Taller for multi-line instructions */
    background: #ffffff !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 8px;
    
    /* Text Styling - Bigger & Readable */
    font-size: 11px !important; 
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    padding: 8px !important;
    
    /* Alignment Fix */
    text-align: left !important;
    display: block !important;
    resize: none !important;
    font-family: 'Manrope', sans-serif;
}

.asset-desc-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* The "Add File" slot to match the size */
.add-asset-slot {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0;
    border-radius: 10px;
    border: 2px dashed rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Ensure the main Step 0 card grows to hold the new taller row */
#inlineSmartPlanner > .step-box.full-width:first-of-type {
    min-height: 250px !important; 
    padding-bottom: 40px !important;
}

#manualPlanDescription {
    height: 70px !important;
    background: #0b0f19 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    font-weight: 500 !important;
}



/* Ensure inner inputs pop against the aluminum */
.step-box .styled-input, 
.step-box .styled-textarea,
.step-box .brand-input-wrap {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: #94a3b8 !important;
}

/* Ensure child containers also respect the width */
.step-box .step-header,
.step-box .ai-suggestion-chip-list {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important; /* Forces chips to stack vertically instead of pushing sideways */
}

/* --- UPDATED: Compact Step Headers --- */
.step-header {
    display: flex !important;
    align-items: flex-start !important; /* Aligns number with the top line of text */
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;           /* Allows header to grow vertically */
    margin-bottom: 10px !important;
    padding-right: 5px !important;
}

.step-box h3 {
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.2 !important;       /* Tight line height for titles */
    white-space: normal !important;    /* Forces text to wrap to new line */
    word-wrap: break-word !important;
    flex: 1 !important;                /* Allows text to fill all horizontal space next to number */
}

.step-box .step-num {
    flex-shrink: 0 !important;         /* CRITICAL: Stops the number from turning into an oval */
    color: #000000 !important;
    background: transparent !important;
    border: 2px solid #000000 !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* 3. Ensure labels and sub-text are also black/dark */
.step-box .field-label, 
.step-box p {
    color: #000000 !important;
    opacity: 0.8 !important;
}

/* 4. ROUND & GREENER SUGGESTION CHIPS (KEEP EXISTING) */
.ai-suggestion-chip-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px;
}

.ai-suggestion-chip {
    background: #ffffff !important;
    border: 1px solid #10b981 !important; /* Ökad tjocklek för tydligare inramning */
    color: #047857 !important;
    padding: 2px 4px !important; /* Mer rymd runt texten för "premium" känsla */
    border-radius: 12px !important; /* Något mjukare hörn för bättre balans med större text */
    
    /* Text-optimering för maximal läsbarhet */
    font-size: 15px !important; 
    font-weight: 700 !important;
    letter-spacing: -0.01em !important; /* Gör fet text mer kompakt och professionell */
    line-height: 1.2 !important;
    text-align: center !important;
    
    /* Interaktion och layout */
    cursor: pointer;
    white-space: normal !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtil skugga för att lyfta fram chippet */
}

.ai-suggestion-chip:hover {
    background: #f0fdf4 !important; /* Mycket ljust grön vid hovring */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



.ai-suggestion-chip.selected {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}





/* 6. BLUEPRINT ENGINE (4x4 TECHNICAL TILE GRID) */
.blueprint-section {
    border-top: 2px solid var(--hub-dark) !important;
    padding-top: 40px !important;
    margin-top: 20px !important;
    scroll-margin-top: 100px; 
}



/* The container for the prompt area */
.blueprint-form-group.full-width {
    flex: 1 !important;            /* Fills all remaining vertical space to the bottom */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;        /* Fills horizontal space */
    margin: 0 !important;
}

/* The label ("Content Prompt for AI") inside the card */
.blueprint-form-group.full-width label {
    padding: 10px 12px 4px 12px !important;
    background: #f8fafc;           /* Subtle highlight for the label area */
    border-top: 1px solid #e2e8f0;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #475569 !important;
}

.blueprint-prompt-textarea {
    flex: 1 !important;            /* Stretches text area to very bottom of card */
    width: 100% !important;        /* Stretches text area to both side edges */
    border: none !important;       /* Removes internal borders for a clean "sheet" look */
    border-top: 1px solid #e2e8f0 !important;
    padding: 15px !important;      /* Generous typing space */
    font-size: 14px !important;    /* Clear, readable text */
    font-weight: 600 !important;
    line-height: 1.5 !important;
    background: #ffffff !important;
    resize: none !important;       /* Prevents user from breaking the card layout */
    color: #0f172a !important;
}

/* Add a subtle scrollbar if the prompt is very long */
.blueprint-prompt-textarea::-webkit-scrollbar {
    width: 6px;
}
.blueprint-prompt-textarea::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.blueprint-section-item:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* SLIM INTEGRATED CARD HEADER */
.blueprint-section-header {
    padding: 10px 14px !important;
    background: var(--hub-dark);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.blueprint-section-header h5 {
    font-weight: 800;
    font-size: 11px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* SLIM BUILT-IN MENU BAR (Layout / Theme / Asset) */
.blueprint-controls-bar {
    display: flex;
    background: #f1f3f4;
    border-bottom: 1px solid #ddd;
    padding: 4px;
    gap: 4px;
}

.blueprint-controls-bar select {
    flex: 1;
    height: 24px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    text-transform: uppercase;
}

/* BOLD TYPOGRAPHY AREA - MAXIMIZED */
.blueprint-item-internal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
}

.blueprint-prompt-textarea {
    flex-grow: 1;
    width: 100% !important;
    height: 100% !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important; /* BOLD TEXT */
    font-size: 15px !important; /* BIGGER TEXT */
    line-height: 1.4 !important;
    border: none !important;
    background: #fff !important;
    padding: 15px !important;
    resize: none !important;
    color: var(--hub-dark);
}

/* Internal Scrollbar Styling */
.blueprint-item-internal-content::-webkit-scrollbar { width: 4px; }
.blueprint-item-internal-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* 7. BRAND / AI SPARKLE COMPONENT */
.brand-input-wrap {
    display: flex !important;
    align-items: stretch !important; /* Ensures button and input are same height */
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden !important; /* Keeps everything inside the card */
    margin-top: 10px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

.step-box .styled-input {
    flex: 1 !important;        /* Takes up all available width */
    min-width: 0 !important;   /* Critical: prevents input from pushing outside card */
    height: 42px !important;   /* Expanded vertically for better touch/visibility */
    border: none !important;   /* Remove double borders */
    padding: 10px 12px !important;
    font-size: 13px !important;
    background: transparent !important;
}

.ai-sparkle {
    width: 40px !important;    /* Fixed width so it never clips text */
    flex-shrink: 0 !important; /* Prevents button from being squashed */
    border: none !important;
    background: #0f172a !important; /* Dark contrast */
    color: #10b981 !important;    /* Green sparkle */
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: background 0.2s;
}

.ai-sparkle:hover {
    background: #1e293b !important;
}

/* Fix: Black text for readability on gray planning boxes */
.step-box p {
    color: #000000 !important;
    opacity: 0.9 !important;
}



.planner-mode-switch .toggle-btn {
    border: none;
    padding: 6px 18px;
    border-radius: 40px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    cursor: pointer;
    color: #64748b;
    background: transparent;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.planner-mode-switch .toggle-btn.active {
    background: #ffffff;
    color: var(--hub-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.planner-mode-switch .toggle-btn:hover:not(.active) {
    color: var(--hub-dark);
    opacity: 0.8;
}

/* Expensive-Tool Aesthetic for Planning Inputs & Mini Buttons */
.step-box .styled-input, 
.step-box .styled-textarea,
.step-box .brand-input-wrap {
    border: 1px solid #334155 !important;
    background: #0b0f19 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease;
}

.step-box .styled-input:focus, 
.step-box .styled-textarea:focus {
    border-color: var(--btn-purple) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.step-box .btn-push.mini, 
.step-box .btn-blue-action.mini {
    height: 28px !important;
    padding: 0 14px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.step-box .btn-push.mini:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: var(--hub-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08) !important;
}

.step-box .btn-push.mini:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* --- FIXED: Purpose Card (Step 2) Layout --- */
#sitePurposeSection {
    display: flex !important;
    flex-direction: column !important;
}

/* Forces text to the top-left and allows multi-line wrapping */
#sitePurposeSection .styled-input {
    height: 90px !important;           
    margin-bottom: 12px !important;
    padding: 12px !important;          
    display: block !important;
    line-height: 1.5 !important;       
    text-align: left !important;
    resize: none !important;           
    background: #0b0f19 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    overflow-y: auto !important;       
}

/* Label styling to stay above the boxes */
#sitePurposeSection .field-label {
    display: block !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    color: #475569 !important;
}

/* Professional styling for the Auto-Fill Action */
#suggestSitePurposeBtn {
    margin-top: auto !important; /* Pushes button to the very bottom of the card */
    width: 100% !important;
    height: 38px !important;
    background: #0f172a !important; /* Matches the dark Sparkle theme */
    color: #10b981 !important;    /* "Magic" green text */
    border: none !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 0 rgba(0,0,0,1) !important; /* Tactile push-button look */
    transition: all 0.1s ease;
}

#suggestSitePurposeBtn:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 rgba(0,0,0,1) !important;
}

#suggestSitePurposeBtn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,1) !important;
}

/* Custom spacing for the "Extract" button */
#extractPlanBtn {
    height: 34px !important;
    background: var(--hub-dark) !important;
    color: #fff !important;
    border: none !important;
}

/* --- UNIVERSAL BLUEPRINT: RED EPIC THEME --- */
.preview-card.workflow-type-blueprint {
    background: linear-gradient(145deg, #050101 0%, #1a0505 100%) !important;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(239, 68, 68, 0.3) !important;
    animation: blueprint-pulse-red 4s infinite ease-in-out !important;
}

@keyframes blueprint-pulse-red {
    0%, 100% { border-color: #dc2626; box-shadow: 0 0 20px rgba(220, 38, 38, 0.2); }
    50% { border-color: #f87171; box-shadow: 0 0 45px rgba(239, 68, 68, 0.5); }
}

.preview-card.workflow-type-blueprint .file-title {
    color: #f87171 !important;
    font-weight: 900 !important;
}

/* Sidebar Handoff Items */
.workflow-type-chapter {
    background: linear-gradient(135deg, #ef4444, #991b1b) !important;
}

/* ================================================================== */
/* THREADWEB: HARMONIZED CATEGORY HUB (DARK METALLIC THEME)           */
/* ================================================================== */

/* 1. Force the main parent pane to stretch fully! */
#projectContentPane {
    position: relative;
    flex-grow: 1;
    height: 100%;
    width: 100%;
}

/* 2. Release the trap */
.wizard-content-scroll { 
    position: static !important; 
    flex-grow: 1;
    height: 100%;
}

/* 3. Lock the Category Selector to all 4 corners of the full pane */
#wizardCategorySelector {
    /* JS toggles display: flex/none */
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background: #0b0f19; /* Deep Void Background */
    overflow: hidden;
    z-index: 50; /* Sits above the normal padded scrolling area */
}

.category-split-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}

/* LEFT: Navigation & Tiny Inputs */
.category-left-pane {
    width: 32%; 
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    overflow-y: auto;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); /* Dark Metallic Slate */
    padding: 30px 20px;
    scrollbar-width: none; 
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5); /* Cast shadow onto right pane */
    z-index: 2;
}

/* RIGHT: AI Results Area */
.category-right-pane {
    width: 68%;
    background: radial-gradient(circle at center, #111827 0%, #0b0f19 100%); /* Deep Void */
    overflow-y: auto;
    padding: 40px 40px; /* Generous padding */
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* HIGH-CONTRAST HEADERS (Dark Metallic Style) */
.wizard-category-header {
    background: linear-gradient(145deg, #2d384e, #1e293b) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-category-header:hover {
    background: linear-gradient(145deg, #3b4d66, #253146) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* TINY MANUAL INPUT (The "Brain" Trigger) */
.category-ai-trigger-wrap {
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 6px;
    margin: 8px 0 12px 0;
    display: flex;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.tiny-niche-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    outline: none;
}
.tiny-niche-input::placeholder { color: #64748b; }

.tiny-ai-btn {
    background: linear-gradient(135deg, #a855f7, #3b82f6);
    color: #fff;
    border: none;
    font-size: 9px;
    font-weight: 900;
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(168, 85, 247, 0.4);
    transition: all 0.2s ease;
}

.tiny-ai-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 4px 10px rgba(168, 85, 247, 0.6);
}

/* SHORTCUT BUTTONS (Left Pane) */
.category-left-pane .wizard-shortcut-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    width: 100% !important; 
    margin-bottom: 6px;
    transform: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.category-left-pane .wizard-shortcut-btn:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important; 
    transform: translateX(3px) !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

/* RESULTS HEADER */
.results-header {
    margin-bottom: 30px;
    border-left: 4px solid #a855f7;
    padding: 5px 20px;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.1) 0%, transparent 100%);
    border-radius: 0 8px 8px 0;
}

.results-header h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 5px 0;
    text-shadow: 0 2px 10px rgba(168, 85, 247, 0.5);
}

.results-header p {
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
}

/* SUB-CATEGORY CHIPS (Tactile Dark Metallic Tiles) */
.sub-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    padding-bottom: 60px;
}

.sub-niche-chip {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    padding: 18px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 80px;
}

.sub-niche-chip:hover {
    background: linear-gradient(145deg, #2d384e, #1e293b);
    color: #ffffff;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0,0,0,0.6), 0 0 15px rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
}

/* Loading/Empty Vibe */
.placeholder-vibe {
    color: #475569;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 100%;
    grid-column: 1 / -1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Ensure the manual category input section matches the dark theme */
.manual-category-input-section .large-input-wrapper {
    display: flex;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.manual-category-input-section input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 10px 15px;
    font-size: 13px;
    outline: none;
}

.manual-category-input-section input::placeholder {
    color: #64748b;
}

.manual-category-input-section .large-action-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    color: white;
    border-radius: 6px;
    width: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.manual-category-input-section .large-action-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.planner-split-wrapper {
    /* 1. Structural Breakout: Ignore parent padding */
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    z-index: 50; /* Layer above the scroll container */
    margin: 0 !important; /* Ensure no external margins affect it */

    /* 2. Dimensions & Background */
    width: 100%;
    height: 100%;
    background: #0b0f19; /* Deep Void */
    overflow: hidden;
}

.planner-split-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}

* 
   FORCE FULL-SCREEN FOR WEBSITE PLANNER 
   (Replicates the logic from #wizardCategorySelector)
*/
#inlineSmartPlanner {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background: #0b0f19; /* Deep Void */
    overflow: hidden;
    z-index: 50; /* Sits above the wizard's default padding layer */
    display: none; /* Controlled by JS toggling */
}

/* LEFT: Configuration - Dark Metallic Slate */
.planner-left-pane {
    width: 60%;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important; 
    overflow-y: auto !important;   
    box-sizing: border-box;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* RIGHT: Blueprint - Deep Void */
.planner-right-pane {
    width: 40%;
    background: radial-gradient(circle at center, #111827 0%, #0b0f19 100%);
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1;
}

.planner-pane-header {
    margin-bottom: 20px;
    border-left: 4px solid #10b981; /* Green Accent */
    padding-left: 15px;
}

.planner-steps-scroll-area {
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; 
}

.steps-3x3-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 15px !important;
    margin-top: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* TACTILE STEP BOXES (Dark Metal Cards) */
.tactile-step, .step-box.full-width {
    background: linear-gradient(145deg, #2d384e, #1e293b) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    padding: 15px !important;
    min-height: 180px !important; 
    min-width: 0 !important;      
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.step-box.full-width:first-of-type {
    border-left: 4px solid #10b981 !important; /* Green Pillar */
}

/* STEP HEADERS & NUMBERS */
.step-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

.step-box h3 {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.2 !important;       
    text-transform: uppercase;
}

.step-box .step-num {
    flex-shrink: 0 !important;         
    color: #10b981 !important; /* Glowing Green Number */
    background: rgba(16, 185, 129, 0.1) !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.step-box p, .step-box .field-label {
    color: #94a3b8 !important; /* Slate gray text */
}

/* DEEP VOID INPUTS & TEXTAREAS */
.step-box .styled-input, 
.step-box .styled-textarea,
.step-box .brand-input-wrap,
.asset-desc-input,
#manualPlanDescription {
    background: #0b0f19 !important; /* Pitch black */
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease;
    width: 100% !important;
    box-sizing: border-box !important;
}

.step-box .styled-input:focus, 
.step-box .styled-textarea:focus,
.asset-desc-input:focus,
#manualPlanDescription:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), inset 0 2px 4px rgba(0,0,0,0.5) !important;
    outline: none;
}

/* AI SPARKLE BUTTON */
.ai-sparkle {
    width: 40px !important;    
    flex-shrink: 0 !important; 
    border: none !important;
    background: rgba(16, 185, 129, 0.1) !important; 
    color: #10b981 !important; 
    border-left: 1px solid rgba(255,255,255,0.05) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.ai-sparkle:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    text-shadow: 0 0 8px #10b981;
}

/* MAGIC GREEN BUTTONS (Build, Extract, Autofill) */
#extractPlanBtn, #suggestSitePurposeBtn, .btn-blue-action, .full-width-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#extractPlanBtn:hover, #suggestSitePurposeBtn:hover, .btn-blue-action:hover, .full-width-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

/* NEON GREEN SUGGESTION CHIPS */
.ai-suggestion-chip-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px;
}

.ai-suggestion-chip {
    background: rgba(16, 185, 129, 0.05) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
    padding: 6px 12px !important; 
    border-radius: 12px !important; 
    font-size: 13px !important; 
    font-weight: 700 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
}

.ai-suggestion-chip:hover {
    background: rgba(16, 185, 129, 0.15) !important; 
    border-color: #10b981 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2) !important;
}

.ai-suggestion-chip.selected {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4) !important;
}

/* RIGHT PANE: BLUEPRINT CARDS (Dark Metal + Green Stripe) */
.blueprint-vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blueprint-sidebar-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 100px;
}

#website-sections-list .blueprint-section-item,
#website-sections-list-manual .blueprint-section-item {
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 4px solid #10b981 !important; /* Green accent */
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    transition: transform 0.2s ease;
}

#website-sections-list .blueprint-section-item:hover,
#website-sections-list-manual .blueprint-section-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    border-color: rgba(255,255,255,0.15) !important;
}

#website-sections-list .blueprint-section-item summary,
#website-sections-list-manual .blueprint-section-item summary {
    min-height: 46px !important; 
    padding: 10px 45px !important; 
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important; 
    cursor: pointer !important;
    background: transparent !important;
    list-style: none !important;
}

#website-sections-list .blueprint-section-item h5,
#website-sections-list-manual .blueprint-section-item h5 {
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Blueprint Inside Area */
.blueprint-item-internal-content {
    padding: 12px !important;
    background: rgba(0, 0, 0, 0.3) !important; /* Darker recess */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.blueprint-form-group.full-width label {
    background: transparent !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    font-weight: 800 !important;
    padding: 10px 12px 4px 0 !important;
}

.blueprint-prompt-textarea {
    background: #0b0f19 !important; /* Pitch black */
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
    padding: 10px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important; 
    font-size: 13px !important; 
    line-height: 1.5 !important;
    width: 100% !important;
}

.blueprint-prompt-textarea:focus {
    outline: none !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* Blueprint Dropdowns */
.blueprint-controls-bar {
    display: flex;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 4px 0;
    gap: 8px;
}

.blueprint-controls-bar select, .blueprint-layout-select, .blueprint-theme-select {
    flex: 1;
    background: #0b0f19 !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
    border-radius: 4px;
    height: 28px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* Delete Button inside Blueprint */
.delete-section-btn {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
    transition: all 0.2s ease;
}
.delete-section-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* ASSET STAGING (Step 0) */
.wizard-asset-grid {
    display: flex !important;
    flex-direction: row !important; 
    gap: 15px;
    margin-top: 15px;
    padding-bottom: 10px;
    overflow-x: auto !important; 
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.asset-track { display: flex !important; flex-direction: row !important; gap: 15px; }
.asset-item-wrap { display: flex !important; flex-direction: column !important; width: 120px !important; flex-shrink: 0; }

.staged-asset-card {
    width: 120px !important;  
    height: 120px !important; 
    border-radius: 10px;
    background: #000;
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    margin-bottom: 10px; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-asset-slot {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0;
    border-radius: 10px;
    border: 2px dashed rgba(255,255,255,0.2) !important;
    background: rgba(0,0,0,0.3) !important;
    color: #64748b !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.add-asset-slot:hover {
    border-color: #10b981 !important;
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.05) !important;
}

/* ============================================================ */
/* STEP 4: VISUAL STYLE BARS - OVERWHELMING HIGHLIGHT THEME     */
/* ============================================================ */

.style-cards-stack {
    display: flex !important;
    flex-direction: column !important; 
    gap: 12px !important;
    margin-top: 15px !important;
    width: 100% !important;
    background: transparent !important; 
    box-sizing: border-box !important;
}

.wizard-style-card {
    width: 100% !important;
    min-height: 60px !important; 
    margin: 0 !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    
    background: linear-gradient(145deg, #1e293b, #0f172a) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; 
}

.style-card-title {
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important; 
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 14px !important; 
    color: #ffffff !important; 
    z-index: 2 !important;
    pointer-events: none !important;
}

.wizard-style-card:hover {
    transform: translateY(-3px) scale(1.02) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* SELECTION STATE: Overwhelming Neon Glow */
.wizard-style-card.selected {
    background: #10b981 !important; /* Vivid Emerald */
    border-color: #34d399 !important;
    animation: overwhelming-pulse-green 2s infinite ease-in-out !important;
}

.wizard-style-card.selected .style-card-title {
    color: #022c22 !important; /* Extremely dark green/black for contrast */
}

/* The Pulse of Power */
@keyframes overwhelming-pulse-green {
    0% { box-shadow: 0 0 5px #10b981, 0 0 20px rgba(16, 185, 129, 0.4), inset 0 2px 2px rgba(255,255,255,0.5); }
    50% { box-shadow: 0 0 15px #34d399, 0 0 40px rgba(52, 211, 153, 0.8), inset 0 2px 5px rgba(255,255,255,0.8); }
    100% { box-shadow: 0 0 5px #10b981, 0 0 20px rgba(16, 185, 129, 0.4), inset 0 2px 2px rgba(255,255,255,0.5); }
}

/* Fix Purpose Card Layout */
#sitePurposeSection .styled-input {
    height: 90px !important;           
    margin-bottom: 12px !important;
    text-align: left !important;
}

#suggestSitePurposeBtn {
    margin-top: auto !important; 
    height: 38px !important;
}

/* Remove default marker */
.blueprint-section-item summary::-webkit-details-marker { display: none !important; }



/* Ensure the Epic/Article/Gallery container is visible when active */
#workflowPlanningArea.active, 
#workflowPlanningArea[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure the specific Dynamic Epic Slot fills the area */
[id^="epic-slot-"] {
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* ============================================================ */
/* NEW: SLIM DARK HEADERS & MAGIC BUTTONS                       */
/* ============================================================ */
.slim-dark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f172a;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.slim-header-title {
    font-size: 11px;
    font-weight: 900;
    color: #94a3b8;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.slim-magic-btn {
    background: linear-gradient(135deg, #a855f7, #3b82f6);
    color: white; border: none; border-radius: 6px;
    padding: 6px 14px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slim-magic-btn:hover {
    transform: translateY(-2px); filter: brightness(1.1);
    box-shadow: 0 6px 15px rgba(168, 85, 247, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.slim-magic-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(168, 85, 247, 0.4); }

.slim-magic-btn.red-magic { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3); }
.slim-magic-btn.red-magic:hover { box-shadow: 0 6px 15px rgba(239, 68, 68, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4); }

.wizard-footer { display: none !important; }

.welcome-wizard-overlay {
    position: fixed !important; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 900 !important; /* FIXED: Lowered so popups can appear over the wizard */
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ============================================================ */
/* EPIC HUB 3-PANE LAYOUT (NEW)                                 */
/* ============================================================ */
.epic-hub-header {
    display: flex; justify-content: space-between; align-items: center;
    background: #0f172a; border-bottom: 1px solid #1e293b; padding: 10px 20px; flex-shrink: 0;
}
.epic-dropdown-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    background: #1e293b; 
    padding: 6px 12px; 
    border-radius: 6px; 
    border: 1px solid #334155;
    
    /* FIX: Constrain width to prevent header blowout */
    max-width: 250px; 
    flex-shrink: 1;
    min-width: 0; /* Allows flex item to shrink below content size */
}

.epic-select { 
    background: transparent; 
    color: white; 
    border: none; 
    outline: none; 
    font-weight: 700; 
    font-size: 13px; 
    cursor: pointer;
    
    /* FIX: Truncate text with ellipsis (...) if too long */
    flex-grow: 1;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional: Ensure options have a background in case they are transparent */
.epic-select option {
    background-color: #0f172a;
    color: white;
}
.epic-icon-btn { background: #8b5cf6; color: white; border: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; transition: background 0.2s;}
.epic-icon-btn:hover { background: #a855f7; }
.epic-context-toggles { display: flex; align-items: center; gap: 15px; color: #cbd5e1; font-size: 11px; font-weight: 700; }
.epic-url-input { background: #1e293b; border: 1px solid #334155; color: white; padding: 6px 12px; border-radius: 4px; font-size: 11px; width: 200px; }

.epic-split-container { display: grid; grid-template-columns: 200px 1fr 350px; flex-grow: 1; min-height: 0; background: #0b0f19; }
.epic-left-pane { border-right: 1px solid #1e293b; padding: 20px 15px; display: flex; flex-direction: column; gap: 10px; background: #0f172a; overflow-y: auto; }
.epic-middle-pane { padding: 30px; overflow-y: auto; background: #0b0f19; }
.epic-right-pane { border-left: 1px solid #1e293b; padding: 30px 20px; overflow-y: auto; background: #0f172a; }

.epic-type-btn { background: transparent; border: 1px solid transparent; color: #94a3b8; font-weight: 800; font-size: 11px; text-transform: uppercase; padding: 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s; text-align: left; }
.epic-type-btn:hover { background: #1e293b; color: white; }
.epic-type-btn.active { background: #ef4444; color: white; box-shadow: 0 4px 10px rgba(239,68,68,0.3); }

.epic-manual-input-wrap { display: flex; background: #1e293b; border-radius: 6px; padding: 4px; border: 1px solid #334155; }
.epic-manual-goal-input { flex-grow: 1; background: transparent; border: none; color: white; font-size: 11px; padding: 0 8px; outline: none; width: 100%; min-width: 0; }
.epic-manual-trigger-btn { background: transparent; color: #94a3b8; border: none; cursor: pointer; display: flex; align-items: center; }
.epic-manual-trigger-btn:hover { color: white; }

.epic-pane-title h3 { color: white; font-size: 16px; font-weight: 800; margin: 0 0 4px 0; text-transform: uppercase; }
.epic-pane-title p { color: #64748b; font-size: 12px; margin: 0 0 20px 0; }

.epic-topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.epic-topic-card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 15px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 8px; }
.epic-topic-card:hover { border-color: #ef4444; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239,68,68,0.15); }
.epic-topic-card h4 { color: white; font-size: 13px; font-weight: 700; margin: 0; line-height: 1.3; }
.epic-topic-card p { color: #94a3b8; font-size: 11px; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Red version of blueprint striped items */
.epic-blueprint-item {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid #334155 !important;
    border-left: 5px solid #ef4444 !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}
.epic-blueprint-item summary { padding: 12px 15px !important; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.epic-blueprint-item summary::-webkit-details-marker { display: none; }
.epic-blueprint-item h5 { color: white !important; font-size: 12px !important; font-weight: 700 !important; margin: 0; }
.epic-blueprint-item-content { padding: 15px; background: rgba(15, 23, 42, 0.5); border-top: 1px solid #334155; }
.epic-blueprint-textarea { width: 100%; box-sizing: border-box; background: #0b0f19; border: 1px solid #334155; color: #cbd5e1; font-size: 12px; padding: 10px; border-radius: 6px; resize: vertical; min-height: 80px; font-family: 'Roboto Mono', monospace; }
.epic-blueprint-textarea:focus { outline: none; border-color: #ef4444; }

/* ============================================================ */
/* EPIC PLANNER TARGET HOOKS & STATUS BADGES                    */
/* ============================================================ */

.epic-target-hooks { background: rgba(0,0,0,0.2); padding: 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #1e293b; }
.epic-target-hooks label { display: block; font-size: 9px; font-weight: 800; color: #64748b; text-transform: uppercase; margin-bottom: 6px; }
.epic-target-hooks input, .epic-target-hooks select { width: 100%; box-sizing: border-box; background: #0f172a; border: 1px solid #334155; color: white; padding: 8px; border-radius: 4px; font-size: 11px; margin-bottom: 10px; outline: none;}
.epic-target-hooks input:last-child, .epic-target-hooks select:last-child { margin-bottom: 0; }
.epic-target-hooks input:focus, .epic-target-hooks select:focus { border-color: #ef4444; }

.epic-status-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; margin-left: 10px; }
.epic-status-badge.planned { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid #d97706; }
.epic-status-badge.generated { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid #2563eb; }
.epic-status-badge.linked { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid #059669; }

.epic-header-mode-select {
    background: #1e293b;
    border: 1px solid #334155;
    color: #a855f7; /* Neon Purple Text */
    font-weight: 800;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 4px;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    min-width: 140px;
}

.epic-header-mode-select:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

/* --- EPIC SPLIT PANE LAYOUT REFACTOR --- */

/* 1. Reset the Parent Pane padding/layout */
.epic-left-pane {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* Remove padding so footer touches edges */
    overflow: hidden !important; /* Prevent double scrollbars */
    background: #0f172a;
}

/* 2. Scrollable Button Area */
.epic-types-list-scroll {
    flex-grow: 1;
    min-height: 0; /* <--- THIS IS THE MAGIC FIX */
    overflow-y: auto;
    padding: 15px; /* Internal padding for the buttons */
}

/* Custom Scrollbar for the list */
.epic-types-list-scroll::-webkit-scrollbar { width: 4px; }
.epic-types-list-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* 3. Slimmer Framework Buttons */
.epic-type-btn {
    padding: 8px 12px !important;    /* Reduced padding */
    font-size: 10px !important;      /* Smaller font */
    min-height: 34px !important;     /* Tighter height */
    margin-bottom: 5px !important;   /* Less gap between buttons */
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.epic-type-btn .material-symbols-outlined {
    font-size: 16px !important;      /* Smaller icons */
}

/* Active State High-Contrast */
.epic-type-btn.active {
    background: #1e293b !important;
    border-color: #a855f7 !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #a855f7; /* Left purple bar indicator */
}

/* 4. Sticky Footer Area */
.epic-inputs-footer {
    flex-shrink: 0;
    padding: 12px 15px;
    background: #0b0f19; /* Slightly darker than list for separation */
    border-top: 1px solid #1e293b;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.3); /* Shadow to show it sits on top */
    z-index: 10;
}

/* 5. Tighter Input Styling within Footer */
.epic-target-hooks {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 8px !important;
}

.epic-target-hooks input, 
.epic-target-hooks select {
    font-size: 10px !important;
    padding: 6px !important;
    height: 30px !important;
    background: #1e293b !important;
}

/* === File: style.css (Add to bottom) === */

.btn-blue { background: #3b82f6; border-bottom: 4px solid #2563eb; color: white; }

.thread-horizontal-scroll {
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.thread-horizontal-scroll::-webkit-scrollbar { height: 6px; }
.thread-horizontal-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.thread-tab-item {
    padding: 10px 15px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.thread-tab-item:hover { background: #334155; color: #fff; }
.thread-tab-item.active { background: #3b82f6; border-color: #60a5fa; color: #fff; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
.thread-tab-item.proposed { border-style: dashed; border-color: #64748b; background: rgba(30, 41, 59, 0.5); }
.thread-tab-item.proposed:hover { border-color: #3b82f6; color: #3b82f6; }

.longform-health-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-left: 4px solid #ef4444;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}
.longform-health-card:hover { transform: translateY(-2px); border-color: #ef4444; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2); }
.longform-health-card.proposed { border-style: dashed; border-left-style: dashed; opacity: 0.8; }
.longform-health-card.proposed:hover { opacity: 1; }

/* ============================================================ */
/* GLOBAL WIZARD DARK MODE FIX (Unifies all tabs & wrappers)    */
/* ============================================================ */

/* 1. Strip the old light gray paper background from the main containers */
.welcome-wizard-modal.threadweb-hub,
.wizard-content-scroll,
.paper-stack {
    background: #0b0f19 !important; /* Deep Void Black */
    border-color: #334155 !important;
}

/* 2. Make the main modal border dark metallic */
.welcome-wizard-modal.threadweb-hub {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

/* 3. Article & Gallery Suggestion Cards (Dark Metallic Glass) */
.content-suggestion-card {
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

.content-suggestion-card:hover {
    border-color: #3b82f6 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

.content-suggestion-card[open] {
    background: linear-gradient(145deg, #0f172a, #0b0f19) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5) !important;
}

.content-suggestion-card summary {
    color: #ffffff !important;
}

/* 4. Inner textareas and dropdowns inside Article/Gallery cards */
.mini-planner-outline,
.mini-planner-keywords,
.mini-planner-integration-point,
.mini-planner-image-mode {
    background: #0b0f19 !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px !important;
}

.mini-planner-outline:focus,
.mini-planner-keywords:focus {
    border-color: #3b82f6 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* 5. Manual Add Input Bars (At the bottom of Article/Gallery tabs) */
.manual-add-section {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.manual-add-section input {
    flex-grow: 1;
    background: #0b0f19 !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    padding: 10px 15px;
    border-radius: 6px;
}

.manual-add-section input::placeholder {
    color: #64748b !important;
}

/* 6. Clean up old colorful Headers (Make them Dark Metal) */
.planner-blue .large-display-wrapper,
.planner-yellow .large-display-wrapper,
.planner-red .large-display-wrapper {
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Aesthetic Backlink Patterns */
.inline-backlink {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
    transition: all 0.3s ease;
    padding: 0 2px;
}
.inline-backlink:hover { background: rgba(13, 110, 253, 0.1); }

.card-link-box {
    display: block;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.card-link-box:hover { transform: translateY(-3px); border-color: var(--color-primary); }

.thread-nav-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
    margin: 1.5rem 0;
    font-weight: 600;
}

/* Update the .gf-id-badge style */
.gf-id-badge {
    position: absolute !important; 
    top: -15px !important; /* Move slightly higher to clear the element border */
    left: -15px !important; 
    z-index: 2147483647 !important; /* Maximum possible Z-index */
    background: #10b981 !important; 
    color: white !important;
    font-family: sans-serif !important;
    font-size: 20px !important; /* Doubled from 10px */
    font-weight: 900 !important;
    padding: 6px 12px !important; /* Larger padding for the bigger font */
    border-radius: 50% !important; 
    pointer-events: none !important; /* Ensure they don't block clicks to the links */
    border: 3px solid #fff !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    width: 40px !important; /* Doubled from 24px */
    height: 40px !important; /* Doubled from 24px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Ensure no clipping from parent */
    overflow: visible !important; 
}

/* Ensure the wrapper does not clip */
.gf-id-wrapper { 
    position: relative !important; 
    display: inline-block !important;
    overflow: visible !important; 
}

/* Add to style.css */
.hub-toggle-btn.active {
    color: #10b981 !important; /* Emerald Green */
    background: rgba(16, 185, 129, 0.1) !important;
}