/* ============================================================================
   PIPULATE STYLES.CSS - Master Stylesheet Organization
   ============================================================================
   
   📁 FILE STRUCTURE:
   1. 🎨 FORM FIELD COLOR SYSTEM (Key Fields + Dim Gray Global Theme)
   2. 📐 LAYOUT VARIABLES (Spacing, grid, navigation)  
   3. 🏗️  CORE LAYOUT (Main structure, navigation, grid)
   4. 🎨 ROLE-BASED COLORS (Menu item colors by plugin role)
   5. 🔧 UTILITY CLASSES (Text, spacing, etc.)
   6. 🧹 SEMANTIC CLEANUP CLASSES (Replacing inline styles)
   
   ⭐ KEY COLORS TO KNOW:
   • Key Fields (search/password): BLACK (#000000) - "Key hole" styling
   • Global Forms: DIM GRAY (#696969) - All standard form inputs
   • Role Colors: 6 distinct colors for plugin role organization
   
   🎯 FUTURE GOALS:
   • Separate navigation menu forms from workflow input forms
   • Currently both use the same dim gray styling
   
   ============================================================================ */

/* Layout Variables - CRITICAL: Adjust --nvav-group-actual-height */
:root {
    /* Base viewport spacing units */
    --spacing-vw: .5vw;  /* Base horizontal spacing */
    --spacing-vh: .5vh;  /* Base vertical spacing */

    /* Derived spacing units */
    --space-xs: calc(var(--spacing-vw) * 0.5);  /* Extra small spacing */
    --space-sm: var(--spacing-vw);              /* Small spacing */
    --space-md: calc(var(--spacing-vw) * 1.5);  /* Medium spacing */
    --space-lg: calc(var(--spacing-vw) * 2);    /* Large spacing */

    /* Layout specific variables */
    --web-ui-width: 100%;                       /* Full width */
    --web-ui-padding: var(--space-md);          /* Consistent padding */
    --web-ui-margin: 0 auto;
    --grid-layout-columns: 65% 35%;
    --grid-gap: 20px;                          /* Fixed grid gap */
    --nav-group-actual-height: 60px;           /* Fixed height for nav */

    /* Key Field Colors - The distinctive "key hole" appearance */
    --key-field-bg: #000000;                   /* Pure black background for key fields */
    --key-field-text: #ffffff;                 /* White text for contrast */
    --key-field-placeholder: #888888;          /* Gray placeholder text */
    --key-field-border: #333333;               /* Dark gray border */
    --key-field-focus-border: #007bff;         /* Blue border on focus */


    /* ========================================================================
       FORM FIELD COLOR SYSTEM - Master Configuration
       ========================================================================
       
       This section controls ALL form field appearances across Pipulate.
       Currently applies to BOTH navigation and workflow forms - future plans
       will differentiate between navigation menus vs. workflow input fields.
       
       FUTURE GOAL: Separate navigation menus from workflow form styling
       ======================================================================== */

    /* ========================================================================
       KEY FIELDS - Special "Key Hole" Appearance
       ========================================================================
       Key fields (search/password inputs) get distinctive black styling for
       visual consistency. Used for pipeline IDs, API tokens, etc.
       ======================================================================== */
    --key-field-bg: #000000;                   /* Pure black background */
    --key-field-text: #ffffff;                 /* White text for contrast */
    --key-field-placeholder: #888888;          /* Gray placeholder text */
    --key-field-border: #333333;               /* Dark gray border */
    --key-field-focus-border: #007bff;         /* Blue border on focus */

    /* ========================================================================
       GLOBAL FORM THEME - DIM GRAY SYSTEM ⭐ MAIN FORM COLORS ⭐
       ========================================================================
       
       🎨 PRIMARY FORM COLOR: #696969 (DIM GRAY)
       
       This is the master color scheme for ALL standard form elements:
       - Text inputs, textareas, selects, buttons
       - Currently applies to navigation AND workflow forms
       - Easy to modify - change --custom-form-base-bg to change everything
       
       TO CHANGE FORM COLORS: Modify the hex values below
       ======================================================================== */
    
    /* 🎨 MASTER FORM COLORS - Change these to restyle all forms */
    --custom-form-base-bg: #696969;            /* 🎨 DIM GRAY - Main form background color */
    --custom-form-active-bg: #5a5a5a;          /* Darker gray when hovering/active */
    --custom-form-border-color: #505050;       /* Form field borders */
    --custom-form-text-color: #FFFFFF;         /* White text on gray background */
    --custom-form-placeholder-color: #cccccc;  /* Light gray placeholder text */
    
    /* Dropdown specific colors */
    --custom-form-dropdown-bg: var(--custom-form-base-bg);
    --custom-form-dropdown-hover-bg: #7a7a7a;  /* Lighter gray on hover */
    --custom-form-dropdown-text-color: var(--custom-form-text-color);
    --custom-form-selected-option-bg: #7a7a7a;
    
    /* Focus and interaction states */
    --custom-form-active-border-color: var(--key-field-focus-border);  /* Blue focus border */
    --custom-form-focus-shadow-color: rgba(0, 123, 255, 0.25);         /* Blue focus shadow */
    
    /* Dropdown chevron icon (white chevron for dark background) */
    --custom-form-icon-chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* ========================================================================
       PIPULATE SEMANTIC DESIGN SYSTEM - Cross-Cutting Visual Consistency
       ========================================================================
       
       These variables provide unified control over common design patterns
       discovered through CSS consolidation analysis. They enable cross-cutting
       adjustments to spacing, typography, and layout while maintaining semantic
       meaning across different UI components.
       
       🎯 PHILOSOPHY: Semantic variables for consistent visual language
       ======================================================================== */
    
    /* ========================================================================
       PIPULATE SPACING SYSTEM - Semantic Spacing Variables
       ========================================================================
       Based on consolidation analysis of common spacing patterns across
       task elements, descriptions, progress indicators, and UI components.
       ======================================================================== */
    --pipulate-spacing-element-offset: 5px;        /* Task/element left spacing (task-*, profile-*) */
    --pipulate-spacing-content-bottom: 0.5rem;     /* Standard content bottom margin */
    --pipulate-spacing-progress-top: 10px;         /* Progress indicator top spacing */
    /* 🎯 STANDARDIZED PIPULATE GAP SYSTEM */
    --pipulate-gap-xs: 0.25rem;        /* 4px - Tight spacing (roles badges) */
    --pipulate-gap-sm: 0.5rem;         /* 8px - Standard UI element spacing (nav, buttons) */
    --pipulate-gap-md: 1rem;           /* 16px - Component separation */
    --pipulate-gap-lg: 1.5rem;         /* 24px - Section separation */
    
    /* DEPRECATED: Use --pipulate-gap-md instead */
    --pipulate-spacing-component-gap: var(--pipulate-gap-md);
    --pipulate-spacing-tight: 0.25rem;             /* Tight spacing for badges/small elements */
    --pipulate-spacing-comfortable: 1.5rem;        /* Comfortable spacing for sections */
    
    /* ========================================================================
       PIPULATE TYPOGRAPHY SYSTEM - Semantic Font Sizing
       ========================================================================
       Unified font sizing for consistent information hierarchy across
       secondary text, descriptions, badges, and supporting content.
       ======================================================================== */
    --pipulate-font-size-secondary: 0.9em;         /* Secondary/muted text (text-secondary, text-muted) */
    --pipulate-font-size-small: 0.9rem;            /* Small descriptive text */
    --pipulate-font-size-badge: 0.8rem;            /* Badges and labels */
    --pipulate-font-size-tiny: 0.75em;             /* Very small supporting text */
    
    /* ========================================================================
       PIPULATE PADDING SYSTEM - Semantic Padding Variables  
       ========================================================================
       Standard padding patterns for buttons, badges, containers, and
       interactive elements to maintain consistent touch targets and spacing.
       ======================================================================== */
    --pipulate-padding-standard: 0.5rem;           /* Standard element padding */
    --pipulate-padding-badge: 0.25rem 0.5rem;      /* Badge/tag padding */
    --pipulate-padding-button-compact: 0.25rem 0.5rem;  /* Compact button padding */
    --pipulate-padding-container: 1rem;            /* Container/card padding */
    --pipulate-padding-section: 1em;               /* Section padding */
    --pipulate-padding-dropdown-item: 0.5rem 1rem; /* Dropdown menu item padding (perfect spacing) */
    
    /* ========================================================================
       PIPULATE COLOR SYSTEM - Semantic Color Variables
       ========================================================================
       Unified color palette for consistent visual communication across
       UI components. Colors are organized by semantic meaning rather than
       visual properties to enable cross-cutting theme adjustments.
       ======================================================================== */
    
    /* ========================================================================
       STATUS & FEEDBACK COLORS - Semantic Communication
       ========================================================================
       Colors that communicate system state, user feedback, and workflow status
       across headings, buttons, text, and interactive elements.
       ======================================================================== */
    --pipulate-color-primary: #007bff;             /* Primary action color (step headings, focus states) */
    --pipulate-color-success: #28a745;             /* Success state (command headings, success borders) */
    --pipulate-color-warning: orange;              /* Warning state (text-warning, alert messages) */
    --pipulate-color-info: #495057;                /* Information state (section headings, neutral content) */
    --pipulate-color-danger: #f77;                 /* Danger/error state (env-dev-style, critical alerts) */
    
    /* ========================================================================
       TEXT CONTENT COLORS - Information Hierarchy
       ========================================================================
       Colors for different levels of text content importance and
       supporting information across descriptions and content areas.
       ======================================================================== */
    --pipulate-color-text-muted: #6c757d;          /* Muted descriptive text (text-description, secondary info) */
    --pipulate-color-text-light: #e9ecef;          /* Light content text (section-title, subtle content) */
    --pipulate-color-text-white: #ffffff;          /* Pure white text (button text, high contrast) */
    
    /* ========================================================================
       INTERACTIVE ELEMENT COLORS - User Interface
       ========================================================================
       Colors for buttons, links, and interactive components that
       provide clear visual feedback for user interactions.
       ======================================================================== */
    --pipulate-color-button-revert: #db92ad;       /* Revert button background (pastel pink) */
    --pipulate-color-button-revert-hover: #ffc2d9; /* Revert button hover state (lighter pink) */
    --pipulate-color-link-primary: #0066cc;        /* Primary link color (nav-link-block) */
    --pipulate-color-link-hover: #4dabf7;          /* Link hover state (nav-link-hover) */
    
    /* ========================================================================
       TECHNICAL & CODE COLORS - Development Interface
       ========================================================================
       Colors for code blocks, technical content, and development-related
       UI elements that need to stand out from regular content.
       ======================================================================== */
    --pipulate-color-code-background: #2d3748;     /* Code block background (dark slate) */
    --pipulate-color-success-accent: #28a745;      /* Success accent (code block borders, success indicators) */

    /* ========================================================================
       CUSTOM COLOR DEFINITIONS - Available for Scoped Usage
       ========================================================================
       
       These variables define our custom dim gray colors but don't automatically
       override PicoCSS defaults. The scoped styling section below selectively
       applies them to workflow areas only, letting nav menus use PicoCSS defaults.
       
       🎯 STRATEGY: Define colors globally, apply them selectively
       ======================================================================== */
    /* Custom colors are defined above and applied via scoped selectors */
}

/* ============================================================================
   WORKFLOW FORM STYLING - Scoped Dim Gray Theme for Chrome-like Pop
   ============================================================================
   
   Apply the dim gray form styling ONLY to workflow areas, letting navigation
   menus use PicoCSS defaults for better visual hierarchy:
   
   🎯 WORKFLOW FORMS: Dim gray "chrome-like pop" in grid-left-content
   🎯 NAV MENUS: PicoCSS defaults "melt into design" 
   
   This creates the desired contrast without utility class pollution.
   ============================================================================ */

/* Scope dim gray styling to workflow areas only (left grid content) */
#grid-left-content,
#grid-left-content input:not([type=checkbox], [type=radio]),
#grid-left-content select,
#grid-left-content textarea {
    --pico-form-element-background-color: var(--custom-form-base-bg);
    --pico-form-element-active-background-color: var(--custom-form-active-bg);
    --pico-form-element-border-color: var(--custom-form-border-color);
    --pico-form-element-active-border-color: var(--custom-form-active-border-color);
    --pico-form-element-focus-color: var(--custom-form-focus-shadow-color);
    --pico-form-element-color: var(--custom-form-text-color);
    --pico-form-element-placeholder-color: var(--custom-form-placeholder-color);
    --pico-icon-chevron: var(--custom-form-icon-chevron-svg);
    --pico-dropdown-background-color: var(--custom-form-dropdown-bg);
    --pico-dropdown-border-color: var(--custom-form-border-color);
    --pico-dropdown-color: var(--custom-form-dropdown-text-color);
    --pico-dropdown-hover-background-color: var(--custom-form-dropdown-hover-bg);
    --pico-form-element-selected-background-color: var(--custom-form-selected-option-bg);
}

/* Chat interface uses natural PicoCSS defaults (no custom overrides) */
/* #chat-interface uses PicoCSS defaults naturally since it's outside #grid-left-content */

/* Ensure scoped styling works across all themes */
[data-theme="light"] #grid-left-content,
[data-theme="dark"] #grid-left-content {
    --pico-form-element-background-color: var(--custom-form-base-bg);
    --pico-form-element-active-background-color: var(--custom-form-active-bg);
    --pico-form-element-border-color: var(--custom-form-border-color);
    --pico-form-element-active-border-color: var(--custom-form-active-border-color);
    --pico-form-element-focus-color: var(--custom-form-focus-shadow-color);
    --pico-form-element-color: var(--custom-form-text-color);
    --pico-form-element-placeholder-color: var(--custom-form-placeholder-color);
    --pico-icon-chevron: var(--custom-form-icon-chevron-svg);
    --pico-dropdown-background-color: var(--custom-form-dropdown-bg);
    --pico-dropdown-border-color: var(--custom-form-border-color);
    --pico-dropdown-color: var(--custom-form-dropdown-text-color);
    --pico-dropdown-hover-background-color: var(--custom-form-dropdown-hover-bg);
    --pico-form-element-selected-background-color: var(--custom-form-selected-option-bg);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) #grid-left-content {
    --pico-form-element-background-color: var(--custom-form-base-bg);
    --pico-form-element-active-background-color: var(--custom-form-active-bg);
    --pico-form-element-border-color: var(--custom-form-border-color);
    --pico-form-element-active-border-color: var(--custom-form-active-border-color);
    --pico-form-element-focus-color: var(--custom-form-focus-shadow-color);
    --pico-form-element-color: var(--custom-form-text-color);
    --pico-form-element-placeholder-color: var(--custom-form-placeholder-color);
    --pico-icon-chevron: var(--custom-form-icon-chevron-svg);
    --pico-dropdown-background-color: var(--custom-form-dropdown-bg);
    --pico-dropdown-border-color: var(--custom-form-border-color);
    --pico-dropdown-color: var(--custom-form-dropdown-text-color);
    --pico-dropdown-hover-background-color: var(--custom-form-dropdown-hover-bg);
    --pico-form-element-selected-background-color: var(--custom-form-selected-option-bg);
  }
}

/* Core Layout */
html {
    height: 100%;
    overflow-x: hidden;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--pico-background-color) 75%, black);
}

/* Headline Size Adjustments */
h1 { font-size: 1.5rem;  font-family: inherit}   /* Reduced further for better proportion */
h2 { font-size: 1.25rem; font-family: inherit}  /* Reduced further for better proportion */
h3 { font-size: 1.05rem; font-family: inherit}  /* Reduced further for better proportion */
h4 { font-size: 0.95rem; font-family: inherit}   /* Reduced further for better proportion */
h5 { font-size: 0.85rem; font-family: inherit}   /* Reduced further for better proportion */
h6 { font-size: 0.8rem;  font-family: inherit}   /* Reduced further for better proportion */

/* Main Container Structure */
body > main:first-of-type {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: var(--web-ui-width);
    margin: var(--web-ui-margin);
    padding: 0;
    overflow: hidden;
    max-width: none;
}

body > main:first-of-type > main.container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--web-ui-padding);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    max-width: none;
}

/* ============================================================================
   NAVIGATION COMPONENT SIZING - Reduced Size for Compact Nav
   ============================================================================
   
   🎯 PURPOSE: Consistently reduce all nav elements (search, dropdowns, buttons)
   by overriding the PicoCSS spacing variables that control their size.
   
   This approach keeps everything in perfect sync since both search inputs and
   dropdown summaries use the same underlying PicoCSS variables for sizing.
   ============================================================================ */

/* Navigation Components */
#nav-group, fieldset#nav-group {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding: 0 0 0 1vw;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    
    /* 🎯 COMPACT NAV SIZING - Proportionally scale down PicoCSS defaults to preserve evenness */
    --pico-form-element-spacing-vertical: 0.6rem;      /* Scaled down from 0.5rem (20% reduction) */
    --pico-form-element-spacing-horizontal: 0.8rem;    /* Scaled down from 1rem (20% reduction) */
    --pico-line-height: 1.5;                           /* Scaled down from 1.5 (preserve proportions) */
}

/* Make PROFILE and APP text bold in nav menus */
details.dropdown summary {
    font-weight: bold;
}

/* Dropdown Menu Styles */
details.dropdown {
    position: relative;
}

/* Ensure profile dropdown container has relative positioning */
#profile-dropdown-menu {
    position: relative;
}

details.dropdown summary + ul {
    position: absolute;
    z-index: 1000;
    min-width: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: var(--pico-background-color);
    border: 1px solid var(--pico-dropdown-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-dropdown-box-shadow);
    /* Remove width constraints */
    right: 0;
    left: auto;
    width: auto;
    /* Add scrolling */
    max-height: 80vh;
    overflow-y: auto;
}

details.dropdown summary + ul li {
    margin: 0;
    padding: 0;
    border: none;
}

details.dropdown summary + ul li .dropdown-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--pipulate-padding-dropdown-item);
    color: var(--pico-dropdown-color);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background-color: transparent;
}

details.dropdown summary + ul li .dropdown-item:hover {
    background-color: var(--pico-primary-focus);
}

details.dropdown summary + ul li .dropdown-item input[type="radio"] {
    min-width: 1rem;
    margin-right: 0.5rem;
}

details.dropdown summary + ul li .dropdown-item input[type="radio"]:checked + * {
    background-color: var(--pico-primary-focus);
}

/* Remove the duplicate and restrictive width rules */
details.dropdown summary + ul {
    /* Align to the right edge of the dropdown button */
    right: 0;
    /* Ensure it doesn't go off the left edge */
    left: auto;
}

details.dropdown summary + ul li a {
    display: block;
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
    color: var(--pico-dropdown-color);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

details.dropdown summary + ul li a:hover,
details.dropdown summary + ul li a:focus,
details.dropdown summary + ul li a:active,
details.dropdown summary + ul li label[style*="background-color: var(--pico-primary-focus)"] {
    background-color: var(--pico-primary-focus);
}

/* Selected state */
details.dropdown summary + ul li label[style*="background-color: var(--pico-primary-focus)"] {
    background-color: var(--pico-primary-focus);
}

.nav-breadcrumb {
    display: flex;
    align-items: baseline;
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: var(--nav-group-actual-height);
    gap: var(--pipulate-gap-md);
    /* margin-left: 2vw; */
}

.nav-breadcrumb h1 {
    margin-bottom: 0;
    /* font-size: 1.25rem; */
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
}

.nav-menu-group {
    display: flex;
    align-items: baseline;
    gap: var(--pipulate-gap-sm);
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: 0; /* Allow flex items to shrink */
}

/* Grid Layout - Modified for Split.js draggable splitter */
.main-grid {
    display: flex;
    flex-direction: row;
    gap: 0; /* No gap needed - split.js creates its own gutter */
    flex-grow: 1;
    height: calc(100% - var(--nav-group-actual-height) - var(--space-sm));
    overflow: hidden;
    padding-top: var(--space-sm);
    width: 100%;
}

.main-grid > div {
    height: 100%;
    overflow-y: auto;
}

/* Split.js Gutter Styles */
.gutter {
    background-color: var(--pico-muted-border-color);
    background-repeat: no-repeat;
    background-position: 50%;
    transition: background-color 0.2s ease-in-out;
}

.gutter:hover {
    background-color: var(--pico-primary);
}

.gutter.gutter-horizontal {
    cursor: col-resize;
    /* A simple base64 encoded SVG for the drag handle dots */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgOCA0MCI+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMyIgeT0iNCIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjUiLz48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIzIiB5PSIxMCIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjUiLz48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIzIiB5PSIxNiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjUiLz48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIzIiB5PSIyMiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjUiLz48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIzIiB5PSIyOCIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjUiLz48L3N2Zz4=');
}

/* Grid Left Content */
#grid-left-content {
    margin-right: 1vw;
}

#grid-left-content > main.container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Chat Interface */
#chat-interface {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin-left: 1vw;
    overflow: hidden;
}

/* Chat Input Group */
#input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0px;
    padding-right: .5vw;
}

#input-group textarea {
    min-height: 100px;
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
}

#input-group .button-container {
    display: flex;
    justify-content: flex-end;
}

#send-btn, #stop-btn {
    padding: 0.5rem 1rem;
    margin-bottom: 0px;
}

#send-btn {
    background-color: var(--pico-primary);
}

#stop-btn {
    background-color: var(--pico-del-color);
    display: none;
}

#send-btn img, #stop-btn img {
    width: 30px;
    height: 30px;
    filter: invert(1);
}

#chat-interface > article.card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Message List */
#msg-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--pico-muted-border-color) var(--pico-background-color);
}

#msg-list::-webkit-scrollbar {
    width: 8px;
}

#msg-list::-webkit-scrollbar-track {
    background: var(--pico-background-color);
    border-radius: 4px;
}

#msg-list::-webkit-scrollbar-thumb {
    background: var(--pico-muted-border-color);
    border-radius: 4px;
}

#msg-list::-webkit-scrollbar-thumb:hover {
    background: var(--pico-form-element-border-color);
}

/* Messages */
.message {
    margin: 2px 0;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 100%;
    white-space: pre-wrap;
    position: relative;
}

.message.user {
    background: var(--pico-primary-background);
    margin-left: auto;
}

.message.assistant {
    background: var(--pico-muted-background);
    margin-right: auto;
}

/* Message container for clipboard functionality */
.message-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.message-content {
    flex: 1;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Clipboard button styling */
.clipboard-button {
    position: relative;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.clipboard-button:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

.clipboard-button svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* Theme-aware clipboard button colors */
[data-theme="dark"] .clipboard-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .clipboard-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* System preference theme handling */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) .clipboard-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

@media only screen and (prefers-color-scheme: light) {
    :root:not([data-theme]) .clipboard-button:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

/* Message Content Styling */
.message p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal;
}

.message ul, 
.message ol {
    margin: 0.2em 0 !important;
    padding-left: 1.5em !important;
}

.message li {
    margin: 0 !important;
    padding: 0 !important;
}

.message li + li {
    margin-top: 0.1em !important;
}

.message h1, 
.message h2, 
.message h3, 
.message h4, 
.message h5, 
.message h6 {
    margin: 0.5em 0 0.2em 0 !important;
}

.message pre {
    margin: 0.2em 0 !important;
}

.message blockquote {
    margin: 0.2em 0 !important;
    padding-left: 1em !important;
    border-left: 3px solid var(--pico-muted-border-color);
}

.message strong {
    font-weight: bold;
}

.message em {
    font-style: italic;
}

.message code {
    background: var(--pico-muted-background);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* Utility Classes - CONSOLIDATED: text-secondary and text-muted are semantically identical */
.text-secondary,
.text-muted {
    font-size: var(--pipulate-font-size-secondary);
    color: var(--pico-muted-color);
}

.text-end {
    text-align: end;
}

.text-valid {
    color: var(--pico-ins-color);
}

.text-invalid {
    color: var(--pico-del-color);
}

.text-accent {
    color: var(--pico-primary);
}

/* CONSOLIDATED: text-sm serves same purpose as text-secondary font size - merge into unified text-small */
.text-sm,
.text-small {
    font-size: var(--pipulate-font-size-secondary);
}

/* Typography utilities */
.font-bold {
    font-weight: bold;
}

.font-italic {
    font-style: italic;
}

.font-code {
    font-family: var(--pico-font-family-monospace);
}

/* ================================================================ */
/* CONSOLIDATED DISPLAY & LAYOUT UTILITIES */
/* ================================================================ */

/* Display utilities */
.hidden {
    display: none;
}

.block {
    display: block;
}

.overflow-auto {
    overflow: auto;
}

.w-full {
    width: 100%;
}

/* Spacing Utilities - CONSOLIDATED SYSTEMATIC SCALE */
.mt-vh {
    margin-top: var(--spacing-vh);
}

/* Consolidated margin-top scale */
.mt-4,
.mt-lg {
    margin-top: 1rem;
}

.mt-half,
.mt-sm {
    margin-top: 0.5rem;
}

/* Consolidated margin-bottom scale */
.mb-2,
.mb-sm {
    margin-bottom: var(--pipulate-spacing-content-bottom);
}

.mb-4,
.mb-lg {
    margin-bottom: 1rem;
}

.mb-lg-alt {
    margin-bottom: 1.5rem;
}

.mb-2xl {
    margin-bottom: 2rem;
}

/* Consolidated margin utilities */
.ml-sm,
.ml-quarter {
    margin-left: 0.5rem;
}

.mr-sm {
    margin-right: 0.5rem;
}

/* Vertical margin utility */
.my-xs {
    margin: 0.25rem 0;
}

/* Padding utilities */
.p-2 {
    padding: var(--pipulate-padding-standard);
}

.pl-lg {
    padding-left: 1.5rem;
}

/* Typography - CONSOLIDATED: font-code already defined in main typography section */

/* Borders and Shapes */
.rounded-default {
    border-radius: var(--pico-border-radius);
}

.rounded-lg {
    border-radius: 0.5rem;
}

/* ============================================================================
   SEMANTIC CLEANUP CLASSES - Replacing Inline Styles
   ============================================================================
   
   These classes replace common inline style patterns with semantic alternatives.
   Each class represents a specific UI purpose rather than visual properties.
   
   🎯 DESIGN PRINCIPLE: 80/20 rule - consolidate styles that are 80% similar
   and serve the same semantic purpose across the application.
   ============================================================================ */

/* URL Display Utilities */
.url-breakable {
    word-break: break-all;
    /* Allows long URLs to break properly in containers */
}

/* Progress and Status Utilities */
.progress-spaced {
    margin-top: var(--pipulate-spacing-progress-top);
    /* Standard spacing for progress indicators */
}

/* Project Information Display */
.project-info-box {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
    /* Consistent styling for project information containers */
}

/* Status Message Display */
.status-success-hidden {
    color: green;
    display: none;
    /* Initially hidden success status messages */
}

/* Dropdown Menu Utilities */
.env-dropdown-menu {
    padding-left: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    width: 8rem;
    max-height: 75vh;
    overflow-y: auto;
    /* Environment dropdown specific styling */
}

.profile-menu-item-selected,
.app-menu-item-selected {
    background-color: var(--pico-primary-focus);
    /* Selected menu item highlighting for profile and app menus */
}

/* Theme Switch and Settings Panel Utilities */
.theme-switch-container {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    /* Theme toggle container styling */
}

.version-info-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--pico-muted-border-color);
    text-align: center;
    align-items: center;
    /* Version information display styling */
}

.version-info-text {
    font-size: 0.85em;
    color: var(--pico-muted-color);
    font-family: monospace;
    /* Version text styling */
}

.dev-button-muted {
    opacity: 0.7;
    font-size: 0.9em;
    /* Development mode button styling */
}

.search-error-message {
    padding: 1rem;
    color: var(--pico-form-element-invalid-active-border-color);
    /* Error message styling for search functionality */
}

/* Documentation Plugin Semantic Classes
   ========================================
   Consolidated from 50+ inline styles in documentation plugin
   ======================================== */

/* CONSOLIDATED: Now handled in main icon & link section above */

/* ================================================================ */
/* CONSOLIDATED TEXT CONTENT SYSTEM - Unified Headings & Descriptions */
/* ================================================================ */

/* CONSOLIDATED: Heading patterns with consistent spacing */
.section-heading,
.step-heading,
.command-heading {
    margin-bottom: var(--pipulate-spacing-content-bottom);
    font-weight: 500;
}

.section-heading {
    margin: 0 0 0.5rem 0;
    color: var(--pipulate-color-info);
    font-size: 1em;
}

.step-heading {
    color: var(--pipulate-color-primary);
    margin-bottom: 0.25rem;
}

.command-heading {
    color: var(--pipulate-color-success);
    margin-bottom: 0.75rem;
}

/* CONSOLIDATED: Text content with semantic colors */
.text-description,
.section-description {
    color: var(--pipulate-color-text-muted);
    font-size: var(--pipulate-font-size-small);
    margin-bottom: var(--pipulate-spacing-content-bottom);
}

.section-description {
    margin-bottom: 1.5rem;
}

.section-title {
    color: var(--pipulate-color-text-light);
    margin-bottom: 1rem;
}

.text-warning {
    color: var(--pipulate-color-warning);
}

/* Roles Plugin Semantic Classes
   ===============================
   Consolidated from 22 inline styles in roles plugin
   =============================== */

/* Role badge styling (4 instances) */
.role-badge {
    font-size: var(--pipulate-font-size-badge);
    padding: var(--pipulate-padding-badge);
    display: flex;
    align-items: center;
}

/* CONSOLIDATED: Now handled in main icon & link section above */

/* Introduction Plugin Semantic Classes
   =====================================
   Consolidated from 14 inline styles in introduction plugin
   ===================================== */

/* CONSOLIDATED: Container and layout patterns */
.container-centered {
    max-width: 98%;
    margin: 0 auto;
}

.list-unstyled {
    padding-left: 0;
    list-style-type: none;
}

/* CONSOLIDATED: Sizing utilities */
.min-height-300 {
    min-height: 300px;
}

.width-160 {
    min-width: 160px;
    width: 160px;
}

/* Profile-specific layouts */
.profile-display-flex {
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pipulate-gap-xs);
}

.profile-delete-icon {
    cursor: pointer;
    margin-left: auto;
    text-decoration: none;
    flex-shrink: 0;
}

/* Profile item highlighting - PicoCSS friendly */
.profile-item-base {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
    list-style: none !important;
    list-style-type: none !important;
    transition: all 0.2s ease;
}

.profile-item-selected {
    background-color: var(--pico-primary-focus);
    border-radius: var(--pico-border-radius);
    border: 2px solid var(--pico-primary);
    margin: 0.125rem 0;
    padding: 0.375rem 0.5rem;
}

.profile-item-selected .profile-display-flex {
    font-weight: 500;
}

/* Ensure profile list items never show bullets */
#profile-list-ul li,
li[id^="profile-item-"] {
    list-style: none !important;
    list-style-type: none !important;
}

/* Tasks Plugin Semantic Classes
   ===============================
   Consolidated from 5 inline styles in tasks plugin
   =============================== */

/* CONSOLIDATED: Now handled in main flex layout section above */

/* Task interaction elements - CONSOLIDATED margin-left pattern */
.task-delete-icon {
    cursor: pointer;
    display: inline;
    text-decoration: none;
}

.task-text-display {
    cursor: pointer;
}

.task-update-form {
    display: none;
}

/* CONSOLIDATED: Task spacing utility - Using semantic variable */
.task-delete-icon,
.task-text-display,
.task-update-form {
    margin-left: var(--pipulate-spacing-element-offset);
}

/* Form Input Plugin Semantic Classes
   ====================================
   Consolidated from form input plugins (text_area, text_field, radios)
   ==================================== */

/* Form field styling */
.textarea-standard {
    min-height: 200px;
    width: 100%;
    padding: 8px;
}

.textfield-standard {
    min-height: 44px;
}

/* Upload Plugin Semantic Classes
   ================================
   Consolidated from 14 inline styles in upload plugin
   ================================ */

/* Upload-specific patterns */
.upload-summary-pre {
    white-space: pre-wrap;
    font-size: var(--pipulate-font-size-secondary);
    background-color: var(--pico-card-background-color);
    padding: var(--pipulate-padding-section);
    border-radius: var(--pico-border-radius);
}

.upload-file-buttons {
    margin-top: var(--pipulate-spacing-component-gap);
    display: flex;
    gap: var(--pipulate-spacing-content-bottom);
    flex-wrap: wrap;
}

/* Workflow Genesis Plugin Semantic Classes
   ==========================================
   Consolidated from 50+ inline styles in workflow genesis plugin
   ========================================== */

/* CONSOLIDATED: Now handled in main text content system above */

/* Code block patterns */
.code-block-standard {
    background-color: var(--pipulate-color-code-background);
    padding: var(--pipulate-padding-container);
    border-radius: 4px;
    margin-bottom: var(--pipulate-spacing-component-gap);
    overflow-x: auto;
    position: relative;
}

.code-block-success {
    background-color: var(--pipulate-color-code-background);
    padding: var(--pipulate-padding-container);
    border-radius: 4px;
    border-left: 4px solid var(--pipulate-color-success-accent);
    overflow-x: auto;
    position: relative;
}

/* Components */
hr {
    margin: var(--pipulate-spacing-component-gap) 0;
    border: none;
    border-top: 2px solid var(--pico-color);
    opacity: 1;
}

/* Ensure proper contrast in both themes */
[data-theme="light"] hr {
    border-color: var(--pico-color);
    opacity: 1;
}

[data-theme="dark"] hr {
    border-color: var(--pico-color);
    opacity: 1;
}

/* Dark mode system preference */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) hr {
        border-color: var(--pico-color);
        opacity: 1;
    }
}

article > div:first-child {
    overflow: auto;
}

/* Code Block */
.code-block-container {
    position: relative;
    margin: var(--pipulate-spacing-component-gap) 0;
    border-radius: var(--pico-border-radius);
    overflow: hidden;
}

/* Button Styles */
.button-revert {
    background-color: var(--pipulate-color-button-revert);
    color: var(--pipulate-color-text-white);
    border: 1px solid var(--pico-muted-border-color);
    padding: var(--pipulate-padding-button-compact);
    border-radius: var(--pico-border-radius);
    font-size: var(--pipulate-font-size-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.button-revert:hover {
    background-color: var(--pipulate-color-button-revert-hover);
    color: black;
    border-color: var(--pico-muted-hover-border-color);
}

/* Dark Theme Syntax Highlighting */
[data-theme="dark"] .token.keyword { color: #c792ea !important; }
[data-theme="dark"] .token.function { color: #82aaff !important; }
[data-theme="dark"] .token.string { color: #c3e88d !important; }
[data-theme="dark"] .token.number { color: #f78c6c !important; }
[data-theme="dark"] .token.comment { color: #545454 !important; }



.menu-item-header {
    font-weight: bold;
    border-bottom: 1px solid var(--pico-muted-border-color);
    display: block;
    text-align: center;
}

/* Key Field Styling - Global "Key Hole" Appearance */
/* All search inputs and password inputs are key fields and get distinctive black background */
input[type="search"],
input[type="password"] {
    background-color: var(--key-field-bg) !important;
    color: var(--key-field-text) !important;
    border-color: var(--key-field-border) !important;
}

input[type="search"]::placeholder,
input[type="password"]::placeholder {
    color: var(--key-field-placeholder) !important;
    opacity: 1 !important;
}

input[type="search"]:focus,
input[type="password"]:focus {
    background-color: var(--key-field-bg) !important;
    color: var(--key-field-text) !important;
    border-color: var(--key-field-focus-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Ensure key fields work in both light and dark themes */
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="password"],
:root:not([data-theme]) input[type="search"],
:root:not([data-theme]) input[type="password"] {
    background-color: var(--key-field-bg) !important;
    color: var(--key-field-text) !important;
    border-color: var(--key-field-border) !important;
}

[data-theme="light"] input[type="search"]::placeholder,
[data-theme="light"] input[type="password"]::placeholder,
[data-theme="dark"] input[type="search"]::placeholder,
[data-theme="dark"] input[type="password"]::placeholder,
:root:not([data-theme]) input[type="search"]::placeholder,
:root:not([data-theme]) input[type="password"]::placeholder {
    color: var(--key-field-placeholder) !important;
    opacity: 1 !important;
}

[data-theme="light"] input[type="search"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] input[type="password"]:focus,
:root:not([data-theme]) input[type="search"]:focus,
:root:not([data-theme]) input[type="password"]:focus {
    background-color: var(--key-field-bg) !important;
    color: var(--key-field-text) !important;
    border-color: var(--key-field-focus-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* ============================================================================
   NAVIGATION SEARCH FIELD STYLING - Standard PicoCSS Appearance
   ============================================================================
   
   🎯 PURPOSE: Provide clean PicoCSS styling for navigation search fields
   
   This class explicitly uses PicoCSS defaults to create a clean contrast with
   the "black keyhole" workflow search fields. Navigation search should "melt
   into the design" while workflow search should "pop with chrome-like styling".
   
   USAGE: Add cls='nav-search' to search inputs in navigation areas
   ============================================================================ */

.nav-search {
    /* Explicitly use PicoCSS default variables for clean navigation appearance */
    background-color: var(--pico-form-element-background-color) !important;
    color: var(--pico-form-element-color) !important;
    border-color: var(--pico-form-element-border-color) !important;
}

.nav-search::placeholder {
    color: var(--pico-form-element-placeholder-color) !important;
    opacity: 1 !important;
}

.nav-search:focus {
    background-color: var(--pico-form-element-active-background-color) !important;
    color: var(--pico-form-element-color) !important;
    border-color: var(--pico-form-element-active-border-color) !important;
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color) !important;
}

/* Ensure nav search works across all themes */
[data-theme="light"] .nav-search,
[data-theme="dark"] .nav-search,
:root:not([data-theme]) .nav-search {
    background-color: var(--pico-form-element-background-color) !important;
    color: var(--pico-form-element-color) !important;
    border-color: var(--pico-form-element-border-color) !important;
}

[data-theme="light"] .nav-search::placeholder,
[data-theme="dark"] .nav-search::placeholder,
:root:not([data-theme]) .nav-search::placeholder {
    color: var(--pico-form-element-placeholder-color) !important;
    opacity: 1 !important;
}

[data-theme="light"] .nav-search:focus,
[data-theme="dark"] .nav-search:focus,
:root:not([data-theme]) .nav-search:focus {
    background-color: var(--pico-form-element-active-background-color) !important;
    color: var(--pico-form-element-color) !important;
    border-color: var(--pico-form-element-active-border-color) !important;
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color) !important;
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) .nav-search {
        background-color: var(--pico-form-element-background-color) !important;
        color: var(--pico-form-element-color) !important;
        border-color: var(--pico-form-element-border-color) !important;
    }
    
    :root:not([data-theme]) .nav-search::placeholder {
        color: var(--pico-form-element-placeholder-color) !important;
        opacity: 1 !important;
    }
    
    :root:not([data-theme]) .nav-search:focus {
        background-color: var(--pico-form-element-active-background-color) !important;
        color: var(--pico-form-element-color) !important;
        border-color: var(--pico-form-element-active-border-color) !important;
        box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color) !important;
    }
}

/* ============================================================================
   SEARCH PLUGINS KEYBOARD NAVIGATION STYLES
   ============================================================================
   
   Styles for the search plugins dropdown with keyboard navigation support.
   Follows Carson Gross HTMX approach with minimal CSS for interaction states.
   
   🎯 FEATURES:
   • Arrow key navigation (up/down)
   • Enter key selection
   • Mouse hover compatibility
   • Escape key dismissal
   • Click-away dismissal
   ============================================================================ */

/* Search dropdown container positioning */
#search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Search result items - base styling */
.search-result-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--pico-muted-border-color);
    transition: background-color 0.15s ease;
    background-color: transparent;
}

/* Remove border from last item */
.search-result-item:last-child {
    border-bottom: none;
}

/* Hover state for mouse interaction */
.search-result-item:hover {
    background-color: var(--pico-primary-hover-background);
}

/* Selected state for keyboard navigation - highest priority */
.search-result-item.selected {
    background-color: var(--pico-primary-focus) !important;
    outline: 2px solid var(--pico-primary-border);
}

/* Auto-selected single result styling - special case for convenience */
.search-result-item.auto-select-single {
    position: relative;
}

.search-result-item.auto-select-single.selected::after {
    content: "Press Enter ↵";
    position: absolute;
    right: 1rem;
    bottom: 0.3rem;
    font-size: 0.8em;
    color: var(--pico-muted-color);
    opacity: 0.8;
}

/* Focus state for accessibility */
.search-result-item:focus {
    outline: 2px solid var(--pico-primary-border);
    background-color: var(--pico-primary-focus);
}

/* Plugin name styling within results */
.search-result-item strong {
    display: block;
    font-weight: 600;
}

/* Module name styling within results */
.search-result-item .search-result-module {
    font-size: 0.85em;
    color: var(--pico-muted-color);
    margin-top: 0.2rem;
}

/* ============================================================================
   ROLE CONTENT STYLING - Consolidated Theme Support
   ============================================================================ */

/* Role Description Styling - Grayer and smaller */
.role-description {
    color: var(--pico-muted-color);
    font-size: 0.85em;
    opacity: 0.8;
}

/* CONSOLIDATED: Role Plugin Links - Both .role-plugin-links and .role-plugin-ordered-list */
.role-plugin-links,
.role-plugin-ordered-list {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1em;
    line-height: 1.2;
}

.role-plugin-ordered-list {
    list-style-type: decimal;
}

.role-plugin-links a,
.role-plugin-ordered-list a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: inherit;
}

/* Preserve hover effects - blue and underlined */
.role-plugin-links a:hover,
.role-plugin-ordered-list a:hover {
    color: var(--pico-primary);
    text-decoration: underline;
}

/* CONSOLIDATED: Theme variations for both role plugin classes */
[data-theme="light"] .role-plugin-links,
[data-theme="light"] .role-plugin-ordered-list {
    color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .role-plugin-links a,
[data-theme="light"] .role-plugin-ordered-list a {
    color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .role-plugin-links,
[data-theme="dark"] .role-plugin-ordered-list {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .role-plugin-links a,
[data-theme="dark"] .role-plugin-ordered-list a {
    color: rgba(255, 255, 255, 0.9);
}

/* Dark mode system preference - CONSOLIDATED */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) .role-plugin-links,
    :root:not([data-theme]) .role-plugin-ordered-list {
        color: rgba(255, 255, 255, 0.9);
    }
    
    :root:not([data-theme]) .role-plugin-links a,
    :root:not([data-theme]) .role-plugin-ordered-list a {
        color: rgba(255, 255, 255, 0.9);
    }
}

/* ============================================================================
   FLYOUT PANEL - Positioned notification/action panels
   ============================================================================ */

/* Old flyout panel styles removed - using nav flyout panel now */

/* Old floating poke button styles removed - using nav poke button now */

/* Navigation Poke Button - uses standard PicoCSS dropdown styling */
.nav-poke-button svg {
    width: 22px;
    height: 22px;
}

/* Remove chevron from poke button dropdown */
#poke-dropdown-menu summary::after {
    display: none;
}

/* Navigation Flyout Panel */
.nav-flyout-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
    z-index: 999;
    min-width: 200px;
}

.nav-flyout-panel.hidden {
    display: none;
}

.nav-flyout-panel.visible {
    background: var(--pico-accordion-border-color);
    display: block;
    padding: 1rem;
}

/* Navigation flyout content styling */
.nav-flyout-panel .flyout-content {
    background: var(--pico-card-background-color);
    padding: 0.5rem;
    border-radius: var(--pico-border-radius);
}

.nav-flyout-panel .flyout-list-item {
    list-style-type: none;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   HTMX IN-FLIGHT STATE (GHOSTING) - The 80/20 Systemic Lock
   ============================================================================
   Automatically ghosts and locks inputs/buttons while the server is processing
   (e.g., waiting for TTS to finish speaking). HTMX natively applies the 
   .htmx-request class to the element issuing the request.
   ============================================================================ */
form.htmx-request button[type="submit"],
form.htmx-request button[type="button"],
form.htmx-request input,
button.htmx-request {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: wait !important;
    filter: grayscale(50%);
}

/* ============================================================================
   UTILITY CLASSES - Common property patterns from inline styles
   ============================================================================ */

/* CONSOLIDATED: Card-like containers */
.card-container,
.intro-card,
.card-list-item {
    background-color: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
    padding: 1rem;
}

.intro-card {
    min-height: 400px;
    margin-bottom: 2rem;
}

.card-list-item {
    list-style-type: none;
    margin-bottom: 0.5rem;
    padding: 0.25rem;
    cursor: pointer;
}

/* CONSOLIDATED: Inline and nowrap utilities */
.inline-nowrap,
.env-dev-style {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;
}

.env-dev-style {
    color: var(--pipulate-color-danger);
    font-weight: bold;
}

/* ================================================================ */
/* CONSOLIDATED FLEX LAYOUT SYSTEM - Unified Approach */
/* ================================================================ */

/* Basic flex containers */
.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Flex containers with alignment - CONSOLIDATED */
.flex-row,
.flex-center-items,
.items-center {
    display: flex;
    align-items: center;
}

.flex-row {
    gap: var(--pipulate-gap-sm);
}

.flex-center-items {
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.flex-row-wide,
.profile-layout {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--pipulate-gap-sm);
}

.profile-layout {
    padding: 0.5rem 0;
}

/* Centered flex containers - CONSOLIDATED */
.flex-center,
.flex-center-gap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--pipulate-gap-md);
}

.flex-center-gap {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Flex item behaviors - CONSOLIDATED */
.flex-grow,
.flex-1 {
    flex-grow: 1;
    min-width: 0; /* Prevents flex items from overflowing */
}

.flex-shrink-0 {
    flex-shrink: 0;
}

/* Button layout patterns - CONSOLIDATED */
.button-row,
.button-row-center {
    display: flex;
    gap: var(--pipulate-spacing-component-gap);
    margin-top: var(--pipulate-spacing-component-gap);
}

.button-row-center {
    justify-content: center;
}

/* List item layouts - CONSOLIDATED */
.item-layout,
.task-item {
    list-style-type: none;
    display: flex;
    align-items: center;
    margin-bottom: var(--pipulate-spacing-element-offset);
}

/* ============================================================================
   SEMANTIC CLEANUP CLASSES - Replacing Inline Style Pollution
   ============================================================================
   
   These classes replace the most common inline styles found in the HTML output.
   Designed for LLM automation and clean semantic DOM structure.
   
   🎯 STRATEGY: Target the highest-impact inline styles first (80/20 rule)
   🧹 GOAL: Clean HTML that's automation-friendly
   
   ============================================================================ */

/* Plugin list item styling - replaces 34 instances of inline styles */
.plugin-list-item {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Plugin link styling - replaces 34 instances of inline styles */
.plugin-link {
    font-size: var(--pipulate-font-size-badge);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.plugin-link:hover {
    color: var(--pico-primary);
    text-decoration: underline;
}

/* Role plugin summary styling */
.role-plugin-summary {
    font-size: var(--pipulate-font-size-tiny);
    color: var(--pico-muted-color);
    opacity: 0.7;
    cursor: pointer;
}

/* Role plugin list container */
.role-plugin-list {
    margin: var(--pipulate-spacing-tight) 0;
    padding-left: var(--pipulate-spacing-comfortable);
}

/* Role plugin details container */
.role-plugin-details {
    margin-top: var(--pipulate-spacing-content-bottom);
}

/* CONSOLIDATED: Now handled in main icon & link section above */

/* ============================================================================
   DROPDOWN MENU CONSISTENCY - Semantic Spacing Solution
   ============================================================================
   
   🔍 THE GREAT DROPDOWN MYSTERY - CASE SOLVED! 🕵️
   
   PROBLEM DISCOVERED: User noticed APP button was "tight around the word" but 
   PROFILE button had extra padding, creating visual inconsistency.
   
   🧠 ROOT CAUSE ANALYSIS:
   The issue was a subtle CSS selector conflict in PicoCSS framework:
   
   PicoCSS Rule: nav details.dropdown summary:not([role]) { padding: 0.5rem 1rem; }
   
   The ":not([role])" selector means padding ONLY applies to dropdown summaries 
   WITHOUT any role attribute!
   
   🔧 THE PROBLEM:
   - ⚡ APP dropdown: Summary had NO role attribute → Got PicoCSS padding (tight)
   - 👤 PROFILE dropdown: Details had role='group' → Excluded from PicoCSS padding (loose)
   - 🔧 DEV dropdown: Same issue as PROFILE
   
   ✅ THE SOLUTION:
   1. Removed role='group' from PROFILE dropdown Details element
   2. Added comprehensive ARIA attributes for Selenium automation:
      - aria_expanded='false' (for dropdown state)
      - aria_haspopup='menu' (indicates dropdown menu)
      - aria_labelledby relationships
      - role='menu' on dropdown lists
   3. Created .dropdown-menu-item class for consistent internal spacing
   
   🎯 RESULT: All three dropdown buttons now have identical PicoCSS padding
   
   📚 LESSONS LEARNED:
   - CSS selectors with :not([role]) can create unexpected inconsistencies
   - PicoCSS nav dropdown summaries get padding ONLY when role-free
   - ARIA attributes enhance accessibility without breaking visual consistency
   - Root cause analysis beats CSS bandaids every time!
   
   🤖 SELENIUM AUTOMATION READY:
   All dropdowns now have comprehensive ARIA attributes for reliable automation:
   - Consistent semantic class names (.dropdown-menu-item)
   - Predictable DOM structure across all three menus
   - Proper role and state attributes for automated testing
   
   ============================================================================ */

/* ============================================================================
   DROPDOWN MENU TOOLTIP STYLING - Centralized Tooltip Solution
   ============================================================================
   
   🎯 PURPOSE: Ensure all dropdown menu tooltips work consistently without clipping
   
   This centralized class solves tooltip visibility issues in dropdown menus by:
   1. Using a very high z-index to escape container stacking contexts
   2. Ensuring tooltip containers allow overflow
   3. Providing consistent spacing and appearance
   
   USAGE: Add 'dropdown-tooltip' class to any tooltip span in dropdown menus
   ============================================================================ */

details.dropdown summary:not([role]) {
    height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-form-element-background-color);
    color: var(--pico-form-element-placeholder-color);
    line-height: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
}

.dropdown-tooltip {
    display: inline-block;
    margin-left: 12px;
    /* Remove any background/border styling that might interfere */
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Ensure dropdown tooltips always appear above everything */
.dropdown-tooltip[data-tooltip]::before,
.dropdown-tooltip[data-tooltip]::after {
    z-index: 99999 !important; /* Even higher than the previous fix */
}

/* Ensure parent containers don't clip these tooltips */
.dropdown-tooltip[data-tooltip] {
    overflow: visible !important;
}

/* Clean up any unwanted underlines on tooltip elements */
.dropdown-tooltip[data-tooltip] {
    border-bottom: none !important;
    text-decoration: none !important;
    cursor: help;
}

/* ============================================================================
   DROPDOWN TOOLTIP Z-INDEX FIX - Escape Container Clipping
   ============================================================================ */

/* Fix dropdown tooltip z-index and positioning */
details.dropdown [data-tooltip]::before,
details.dropdown [data-tooltip]::after {
    z-index: 9999 !important; /* Much higher than default 99 */
}

/* Ensure dropdown containers don't clip tooltips 
 * But it would kill APP dropdown scrolling
details.dropdown,
details.dropdown summary + ul {
    overflow: visible !important;
}*/

/* Specific fix for environment dropdown tooltips */
.env-dropdown-menu [data-tooltip]::before,
.env-dropdown-menu [data-tooltip]::after {
    z-index: 9999 !important;
}

/* Remove underlines from tooltip spans without breaking PicoCSS tooltip functionality */
span[data-tooltip] {
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Info icon styling - reusable for all info tooltips */
.info-icon {
    width: 20px;
    height: 20px;
    margin-left: 12px;
    opacity: 0.7;
}

/* Settings icon styling */
.settings-icon {
    width: 22px;
    height: 22px;
}

/* Theme-aware icon colors - match nav menu text color */
[data-theme="dark"] .info-icon,
[data-theme="dark"] .settings-icon {
    filter: invert(1); /* White in dark mode */
}

[data-theme="light"] .info-icon,
[data-theme="light"] .settings-icon {
    filter: invert(0); /* Black in light mode */
}

/* Default (system preference) theme handling */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) .info-icon,
    :root:not([data-theme]) .settings-icon {
        filter: invert(1); /* White when system prefers dark */
    }
}

@media only screen and (prefers-color-scheme: light) {
    :root:not([data-theme]) .info-icon,
    :root:not([data-theme]) .settings-icon {
        filter: invert(0); /* Black when system prefers light */
    }
}

/* Clean tooltip styling - removes PicoCSS defaults for custom elements */
.tooltip-clean {
    border-bottom: none !important;
    text-decoration: none !important;
    cursor: help;
}

/* Dropdown menu item - consistent spacing for all dropdown labels */
.dropdown-menu-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--pipulate-padding-dropdown-item);
    color: var(--pico-dropdown-color);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background-color: transparent;
}

.dropdown-menu-item:hover {
    background-color: var(--pico-primary-focus);
}

.dropdown-menu-item input[type="radio"] {
    min-width: 1rem;
    margin-right: 0.5rem;
}

/* Breadcrumb separator */
.breadcrumb-separator {
    padding: 0 0.3rem;
}

/* Search dropdown positioning */
.search-dropdown-container {
    position: relative;
    margin-right: 0;
    flex-shrink: 1;
    min-width: 200px; /* Match search input minimum */
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    /* Performance optimizations for dropdown */
    will-change: auto;
    contain: layout style;
}

/* Profile dropdown menu styling */
.profile-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: max-content;
    padding-left: 0;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-menu-item {
    align-items: center;
    display: flex;
    padding: var(--pipulate-padding-standard) var(--pipulate-padding-container);
}

.profile-menu-separator {
    margin: 0;
}

/* Navigation search input */
.nav-search-input {
    width: 365px;
    border-radius: 20px;
    min-width: 200px; /* Allow shrinking but maintain minimum usability */
    max-width: 365px;
}

/* Menu item base styling */
.menu-item-base {
    text-align: left;
    padding: 1vh 0px 0px .5vw;
    display: flex;
    border-radius: var(--pico-border-radius);
}

/* Loading spinner styling - replaces MENU_ITEM_PADDING constant */
.loading-spinner {
    display: flex;
    align-items: center;
    padding: 1vh 0px 0px .5vw;
    border-radius: var(--pico-border-radius);
    min-height: 2.5rem;
}

/* Active menu item */
.menu-item-active {
    background-color: var(--pico-primary-focus);
}

/* CONSOLIDATED: Now handled in main icon & link section above */

/* Flex utilities for common patterns */
/* CONSOLIDATED: Now handled in main flex layout section above */

/* CONSOLIDATED: Now handled in main display & layout section above */

/* Margin utilities for common spacing */
/* CONSOLIDATED: These are now handled in the main spacing section above */

/* CONSOLIDATED: Now handled in main display & layout section above */

.search-result-tag {
    font-size: var(--pipulate-font-size-badge);
    padding: var(--pipulate-padding-badge);
    display: flex;
    align-items: center;
}

/* CONSOLIDATED: Now handled in main icon & link section above */

/* ============================================================================
   END SEMANTIC CLEANUP CLASSES
   ============================================================================ */

/* ================================================================ */
/* CONSOLIDATED ICON & LINK SYSTEM - Unified Approach */
/* ================================================================ */

/* Icon sizing - CONSOLIDATED */
.icon-spaced,
.icon-small,
.icon-inline {
    width: 14px;
    height: 14px;
    margin-right: var(--pipulate-spacing-tight);
    filter: brightness(0) invert(1);
}

.icon-inline {
    margin-left: var(--pipulate-spacing-tight);
    vertical-align: middle;
}

/* Link styling patterns - CONSOLIDATED */
.link-primary {
    color: var(--pico-primary);
    text-decoration: none;
}

.link-primary-bold {
    color: var(--pico-primary-color);
    text-decoration: underline;
    font-weight: 500;
}

.nav-link-block {
    color: var(--pipulate-color-link-primary);
    text-decoration: underline;
    display: block;
    margin: 2px 0;
}

/* Link inheritance patterns - CONSOLIDATED */
.link-inherit-underline {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.link-inherit-plain {
    text-decoration: none;
    color: inherit;
}

/* Hover effects - CONSOLIDATED */
.nav-link-hover {
    color: inherit;
    text-decoration: underline;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.nav-link-hover:hover {
    color: var(--pipulate-color-link-hover);
    text-decoration: underline;
}

.menu-item-hover {
    transition: background-color 0.2s ease;
    border-radius: var(--pico-border-radius);
    cursor: pointer;
}

.menu-item-hover:hover {
    background-color: var(--pico-primary-hover-background);
}

/* ================================================================ */
/* WORKFLOW CONTENT STYLING - Externalized from Pipulate class constants */
/* ================================================================ */

/* Widget content container - replaces CONTENT_STYLE constant */
.widget-content {
    margin-top: 1vh;
    border-top: 1px solid var(--pico-muted-border-color);
    padding-top: 1vh;
}

/* Finalized content container - replaces FINALIZED_CONTENT_STYLE constant */
.finalized-content {
    margin-top: 0.5vh;
    padding: 0.5vh 0;
}

/* Tree display styles - replaces inline styles in tree_display method */
.tree-display-tree {
    background-color: var(--pico-card-sectionning-background-color);
    font-family: monospace;
    margin: 0;
    padding: 0.5rem;
    white-space: pre;
    border-radius: var(--pico-border-radius);
}

.tree-display-path {
    background-color: #e3f2fd;
    border: 1px solid #bbdefb;
    color: #1976d2;
    font-family: system-ui;
    margin: 0;
    padding: 0.5rem 1rem;
    white-space: pre-wrap;
    border-radius: var(--pico-border-radius);
}

/* Inline button container styles - replaces inline styles in wrap_with_inline_button */
.inline-button-container {
    display: flex;
    align-items: center;
    gap: var(--pipulate-gap-sm);
}

.inline-button-submit {
    display: inline-block;
    cursor: pointer;
    width: auto !important;
    white-space: nowrap;
    border-radius: var(--pico-border-radius);
}

/* ================================================================ */
/* NEW KEY BUTTON STYLING - Externalized from inline styles */
/* ================================================================ */

/* 🆕 New Key button - matches main button height with subtle appearance */
.new-key-button {
    display: inline-block !important;
    cursor: pointer !important;
    width: auto !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: var(--pico-border-radius) !important;
    padding: 0.625rem .5rem !important;
    margin: 0 !important;
    background-color: var(--pico-secondary-background) !important;
    box-shadow: none !important;
    line-height: 1.25 !important;
    font-size: 1.5rem !important;
    opacity: 0.33 !important;
    vertical-align: middle !important;
}

/* Breadcrumb headline uses Roboto font */
.nav-breadcrumb h1 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Optionally, make the breadcrumb <span> and <a> inherit the font for robustness */
.nav-breadcrumb h1 span,
.nav-breadcrumb h1 a {
    font-family: inherit !important;
}

/* Parent containers that contain tooltips must also allow overflow */
.dropdown-tooltip-container {
    overflow: visible !important;
    position: relative;
}

/* ============================================================================
   ENTER KEY BUTTON STYLING - Global Rounded Corners
   ============================================================================
   
   🎯 PURPOSE: Apply consistent slightly rounded corners to all Enter Key buttons
   
   This styling targets buttons with the "Enter Key" text and applies
   consistent rounded corners across the entire system.
   
   USAGE: Automatically applies to all Enter Key buttons
   ============================================================================ */

/* Global Enter Key button styling - slightly rounded corners */
button[title*="Enter Key"],
button[aria-label*="Enter"],
button:contains("🔑 Enter Key"),
button.secondary.inline-button-submit {
    border-radius: 8px !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Ensure the styling works across all themes */
[data-theme="light"] button[title*="Enter Key"],
[data-theme="light"] button[aria-label*="Enter"],
[data-theme="light"] button.secondary.inline-button-submit,
[data-theme="dark"] button[title*="Enter Key"],
[data-theme="dark"] button[aria-label*="Enter"],
[data-theme="dark"] button.secondary.inline-button-submit {
    border-radius: 8px !important;
}

/* Dark mode system preference */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) button[title*="Enter Key"],
    :root:not([data-theme]) button[aria-label*="Enter"],
    :root:not([data-theme]) button.secondary.inline-button-submit {
        border-radius: 8px !important;
    }
}

@media only screen and (prefers-color-scheme: light) {
    :root:not([data-theme]) button[title*="Enter Key"],
    :root:not([data-theme]) button[aria-label*="Enter"],
    :root:not([data-theme]) button.secondary.inline-button-submit {
        border-radius: 8px !important;
    }
}









/* --- Base Chat Message Spacing --- */
#msg-list .message {
  margin-top: 5px; /* Adjust space between message bubbles */
  margin-bottom: 5px; /* Adjust space between message bubbles */
  padding: 8px 12px; /* Keep internal padding within the message bubble */
  line-height: normal; /* Ensure normal line height for the container */
}

/* --- Resetting Default List and Paragraph Spacing within Messages --- */

/* Remove default margins and padding from paragraphs */
#msg-list p {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Adjust spacing for all UL elements within msg-list */
#msg-list ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 20px; /* Keep some indentation for lists */
}

/* Adjust spacing for all LI elements within msg-list */
#msg-list li {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal; /* Use normal line height */
}

/* Specifically target ULs that are direct children of LIs (nested lists) */
#msg-list li > ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
   padding-left: 20px; /* Keep indentation for nested ULs */
}

/* Target P elements immediately following a UL (less likely the issue now, but good to include defensively) */
#msg-list ul + p {
  margin-top: 0;
}

/* --- CRITICAL RULE FOR SPACING BETWEEN LIST ITEMS --- */
/* Target LI elements that immediately follow another LI to remove top margin */
#msg-list li + li {
  margin-top: 0;
}

/* --- Optional: Attempt to collapse space from empty text nodes using font-size 0 --- */
/* Use this only if the above rules don't fully fix the space. Test thoroughly. */
/*
#msg-list .message > * {
   font-size: 0;
   line-height: 0;
}
#msg-list .message > p,
#msg-list .message > ul,
#msg-list .message > ul li {
   font-size: initial;
   line-height: normal;
}
*/

/* ============================================================================
   DEMO SYSTEM - CINEMATIC TRANSITIONS
   ============================================================================
   
   🎬 "Dorothy Opens the Door to Oz" - Grayscale to Color Transition
   
   Inspired by the famous cinematic moment when Dorothy opens the door from
   the black and white Kansas farmhouse into the vibrant, colorful Land of Oz.
   
   This creates the "heart" phase of our demo experience - the emotional
   transition from the mechanical "brains" phase to the colorful, living
   world of AI interaction.
   
   ============================================================================ */

/* 🎬 CONFIGURABLE CINEMATIC VARIABLES - Adjust the Kansas farmhouse look */
:root {
    /* Over-exposed Kansas farmhouse aesthetic - washed out and faded */
    --oz-grayscale-brightness: 1.8;    /* Over-exposed brightness (1.0 = normal, 1.8 = sun-bleached) */
    --oz-grayscale-contrast: 0.6;      /* Reduced contrast for faded look (1.0 = normal, 0.6 = very faded) */
    --oz-grayscale-saturation: 85%;    /* Pseudo black-and-white: keep enough color for sepia browns */
    --oz-sepia-intensity: 1.0;         /* Sepia warmth (0 = no sepia, 1.0 = deep brown sepia) */
    
    /* Transition timing */
    --oz-transition-duration: 3s;      /* Time for fade to color */
    --oz-transition-easing: ease-in-out; /* Transition curve */
}

/* 
🎬 CUSTOMIZATION GUIDE:
To adjust the over-exposed look, modify the CSS variables above:

- --oz-grayscale-brightness: Controls how washed out the image appears
  * 1.0 = normal brightness (like rich B&W photography)
  * 1.2 = slightly over-exposed 
  * 1.5 = very washed out (current setting)
  * 1.8 = extremely faded
  * 2.0+ = nearly white-washed

- --oz-grayscale-contrast: Controls the contrast between light and dark areas
  * 1.0 = normal contrast (crisp B&W)
  * 0.75 = reduced contrast (current setting, softer look)
  * 0.5 = very low contrast (flat, faded)
  * 0.3 = extremely flat

- --oz-transition-duration: How long the fade to color takes
  * 2s = quick transition
  * 3s = current setting
  * 5s = slower, more dramatic

Example presets:
- Rich B&W Film: brightness: 1.0, contrast: 1.2
- Vintage Faded Photo: brightness: 1.3, contrast: 0.8  
- Over-exposed Film: brightness: 1.5, contrast: 0.75 (current)
- Sun-bleached Photograph: brightness: 1.8, contrast: 0.6
*/

/* Initial sepia state - the washed-out, over-exposed Kansas farmhouse */
/* NO TRANSITION on initial sepia - we want INSTANT dramatic effect */
.demo-grayscale {
    filter: 
        sepia(var(--oz-sepia-intensity)) 
        contrast(var(--oz-grayscale-contrast)) 
        brightness(var(--oz-grayscale-brightness))
        saturate(var(--oz-grayscale-saturation));
    -webkit-filter: 
        sepia(var(--oz-sepia-intensity)) 
        contrast(var(--oz-grayscale-contrast)) 
        brightness(var(--oz-grayscale-brightness))
        saturate(var(--oz-grayscale-saturation));
    /* No transition here - instant dramatic effect */
}

/* Transitioning state - when we're ready to fade back to color */
.demo-grayscale.demo-fading-to-color {
    filter: sepia(0%) contrast(1.0) brightness(1.0) saturate(100%);
    -webkit-filter: sepia(0%) contrast(1.0) brightness(1.0) saturate(100%);
    transition: filter var(--oz-transition-duration) var(--oz-transition-easing);
    -webkit-transition: -webkit-filter var(--oz-transition-duration) var(--oz-transition-easing);
}

/* Full color state - the vibrant Land of Oz */
.demo-color {
    filter: sepia(0%) contrast(1.0) brightness(1.0) saturate(100%);
    -webkit-filter: sepia(0%) contrast(1.0) brightness(1.0) saturate(100%);
    /* No transition needed here either */
}

/* Visual indicator for the transition (optional subtle overlay) */
.demo-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    z-index: 9998;
    opacity: 1;
    transition: opacity 3s ease-in-out;
}

.demo-transition-overlay.fade-out {
    opacity: 0;
}

/* Ensure the transition doesn't interfere with existing functionality */
.demo-grayscale * {
    transition: inherit;
}

/* ============================================================================
   END DEMO SYSTEM - CINEMATIC TRANSITIONS
   ============================================================================ */


