@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap');

/* Global Box Sizing */
*, *::before, *::after { box-sizing: border-box; }

/* --- Main Header --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding: 0 1.5rem;
    background-color: var(--brand-white);
    border-bottom: 1px solid var(--border-color);
    z-index: 950;
    flex-shrink: 0;
    position: relative; /* Anchors the z-index to create a strict stacking context */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.workspace-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-subtle);
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.workspace-switcher:hover {
    background-color: var(--border-color);
}

.workspace-icon {
    color: var(--brand-primary);
    font-size: 1rem;
}

.workspace-name {
    font-weight: 600;
    color: var(--brand-dark-gray);
    font-size: 0.9rem;
}

.logo {
    height: 32px;
    width: auto;
    margin: 0 1rem 0 0; /* Right margin for top nav */
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.agent-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 1.1rem;
    text-transform: none;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

.agent-name-button {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 1.1rem;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: auto;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.action-drawer-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--brand-text-muted);
    font-size: 1.1rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
}

.action-drawer-btn:hover {
    background-color: var(--bg-subtle);
    color: var(--brand-primary);
}

.menu-container {
    position: relative;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.menu-toggle:hover { transform: none; } /* Override general button hover */

.hamburger-bar { display: block; width: 24px; height: 3px; background-color: var(--text-primary); border-radius: 3px; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }

.dropdown-menu { 
    display: none; 
    position: absolute; 
    top: calc(100% + 5px); 
    right: 0; 
    background-color: var(--bg-surface); 
    border-radius: 8px; 
    box-shadow: var(--shadow-lg); 
    min-width: 160px; 
    max-width: calc(100vw - 2rem); /* Prevent mobile clipping */
    z-index: 1000; 
    overflow: hidden; 
}
.dropdown-menu.show { display: block; }
.dropdown-menu a { color: var(--text-secondary); padding: 12px 16px; text-decoration: none; display: block; font-size: 0.85rem; font-variant: small-caps;}

.integration-card-actions .dropdown-menu button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0;
    font-variant: small-caps;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 400;
    display: block;
    min-height: auto;
}

.integration-card-actions .dropdown-menu button:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

.code-editor {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    background-color: var(--bg-code-block);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    line-height: 1.5;
    white-space: pre;
}

.dropdown-menu hr {
    border: none;
    height: 1px;
    background-color: var(--border-color); /* Use a light background color */
    margin: 0.5rem 0; /* Add some spacing around the line */
    color: var(--text-secondary)
}

/* --- Dropdown Container Polish --- */
.js-managed-dropdown {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px; /* Smooth, modern curved edges */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Soft, elevated depth */
    padding: 8px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-width: 240px; 
    
    /* Animation defaults for when you toggle the .show class */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    position: absolute;
    z-index: 50;
}

/* Active open state */
.js-managed-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- Individual Menu Items --- */
.js-managed-dropdown .menu-item {
    display: flex; /* Aligns icon and text */
    align-items: center;
    padding: 10px 16px;
    color: #374151; /* Dark gray for good contrast that isn't overly harsh */
    text-decoration: none;
    font-size: 0.875rem; /* ~14px - appropriate for app menus */
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover & Focus state */
.js-managed-dropdown .menu-item:hover,
.js-managed-dropdown .menu-item:focus {
    background-color: #f3f4f6;
    color: #111827;
    outline: none;
}

/* --- Icon Alignment and Styling --- */
.js-managed-dropdown .menu-icon {
    width: 24px; /* Setting a fixed width ensures all text items perfectly align down the left margin */
    font-size: 1.1rem;
    color: #9ca3af; /* Muted icon color makes the text pop and creates hierarchy */
    margin-right: 12px;
    text-align: center;
    transition: color 0.15s ease;
}

/* Darken icon on hover for visual feedback */
.js-managed-dropdown .menu-item:hover .menu-icon {
    color: #4b5563;
}

/* --- Divider Polish --- */
.js-managed-dropdown .menu-divider {
    border: none;
    border-top: 1px solid #f3f4f6; /* Very soft separating line */
    margin: 8px 0;
}

/* --- Danger State (Logout) --- */
.js-managed-dropdown .menu-item.danger {
    color: #dc2626; /* Deep destructive red */
}

.js-managed-dropdown .menu-item.danger .menu-icon {
    color: #ef4444; 
}

/* Light red highlight for destructive action hovers */
.js-managed-dropdown .menu-item.danger:hover {
    background-color: #fef2f2; 
    color: #b91c1c;
}

.integration-card-actions {
    position: relative;
}

.form-actions a:hover { background-color: var(--bg-subtle); }

/* --- App Layout --- */
.app-layout {
    display: flex;
    gap: 0.7rem;
    flex: 1;
    height: auto;
    min-height: 0; /* Critical for nested flex scrolling */
    overflow: hidden; /* Prevent layout blowout */
    padding: 0.25rem;
}

/* --- Collapsible Sidebar Logic --- */
@media (min-width: 801px) {
    .app-layout.sidebar-collapsed > [id$="-list-pane"] {
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-right: -0.7rem !important; /* Counteract flex gap to fully hide */
        border: none !important;
        opacity: 0;
    }
}

.sidebar-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--brand-text-muted);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar Toggle States */
.sidebar-toggle .sidebar-closed-state { display: none; }
.app-layout.sidebar-collapsed .sidebar-toggle .sidebar-open-state { display: none; }
.app-layout.sidebar-collapsed .sidebar-toggle .sidebar-closed-state { display: inline; }

.sidebar-toggle:hover {
    background-color: var(--bg-subtle);
    color: var(--brand-primary);
    border-color: var(--border-color);
}


/* --- Breadcrumb Navigation --- */
.breadcrumb {
    margin-bottom: 0.75rem; /* Tighter spacing */
    font-size: 0.9rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.breadcrumb a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .breadcrumb-separator {
    margin: 0 0.5rem;
}
.breadcrumb span:not(.breadcrumb-separator) {
    font-weight: 500;
    color: var(--text-primary);
}

.pane-wrapper {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#note-list-pane,
#task-list-pane,
#project-list-pane,
#cycle-list-pane,
#asset-list-pane,
#research-list-pane,
#legal-list-pane,
#web-list-pane,
#workflow-list-pane {
    width: var(--sidebar-width, 350px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-white);
    border-radius: 16px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    box-shadow: none;
    height: 100%;
    overflow: hidden; /* Ensure internal list scrolls, not the pane */
    min-width: 0; /* Allow shrinking to 0 */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
}

#note-list,
#task-list,
#project-list,
#asset-list,
#cycle-list,
#research-list,
#workflow-list {
    overflow-y: auto;
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

/* --- Sidebar Nav (Faceted Navigation) --- */
.sidebar-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--brand-dark-gray);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid transparent;
    user-select: none;
    margin-bottom: 2px;
}
.sidebar-nav-item:hover {
    background-color: var(--bg-subtle);
}
.sidebar-nav-item.active {
    background-color: #f0f9ff;
    color: var(--brand-dark-blue);
    font-weight: 600;
    border-color: #bae6fd;
}
.sidebar-nav-item i {
    font-size: 1.1rem;
    color: var(--brand-text-muted);
    width: 20px;
    text-align: center;
}
.sidebar-nav-item.active i {
    color: var(--brand-primary);
}

.mobile-back-button-wrapper {
    display: none;
}

:root {
    color-scheme: light;
    /* --- Primitives (The Palette) --- */
    --color-white: #ffffff;
    --color-black: #000000;
    
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    --color-orange-500: rgb(255, 153, 0);
    --color-orange-600: #ea580c;
    
    --color-blue-900: rgba(2, 1, 90, 1);
    
    --color-red-500: #e53e3e;

    /* --- Semantic Tokens (Light Theme Default) --- */
    --bg-app: #f0f4f8;
    --bg-surface: var(--color-white);
    --bg-surface-glass: rgba(255, 255, 255, 0.9);
    --bg-surface-hover: var(--color-slate-50);
    --bg-subtle: rgba(243, 247, 251, 1);
    
    --text-primary: rgb(58, 58, 58);
    --text-secondary: rgba(78, 87, 116, 1);
    --text-inverse: var(--color-white);
    
    --border-color: var(--color-slate-200);
    --border-hover: var(--color-slate-300);
    
    --brand-primary: var(--color-orange-500);
    --brand-secondary: var(--color-blue-900);
    --brand-danger: var(--color-red-500);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -3px rgba(0, 0, 0, 0.04);

    /* --- Legacy/Compat Mappings (Do not remove until full refactor) --- */
    --brand-dark-blue: var(--brand-secondary);
    --brand-dark-gray: var(--text-primary);
    --brand-text-muted: var(--text-secondary);
    --brand-accent-orange: var(--brand-primary);
    --brand-bg-light: var(--bg-subtle);
    --brand-white: var(--bg-surface);
    --error-red: var(--brand-danger);
    --text-color-primary: var(--text-primary);
    --text-color-secondary: var(--text-secondary);
    --text-color-hint: var(--text-secondary);

    /* --- Component Specific Tokens (Light Mode) --- */
    --status-open-bg: #e0f2fe; --status-open-text: #0369a1;
    --status-progress-bg: #fef9c3; --status-progress-text: #713f12;
    --status-completed-bg: #dcfce7; --status-completed-text: #15803d;
    --status-review-bg: #fff7ed; --status-review-text: #9a3412;
    --status-archived-bg: #f1f5f9; --status-archived-text: #475569;
    
    --bg-code-block: #f3f7fb;
    --bg-chat-agent: #f1f5f9;
    --bg-chat-context: #f0f9ff;
    --border-chat-context: #bae6fd;
    --text-chat-context: #0369a1;
    
    --bg-strategy-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --bg-suggestion-gradient: linear-gradient(to right, #fff7ed, #ffffff);
    
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-track: transparent;
    --selection-bg: rgba(255, 153, 0, 0.2);
    
    --ai-glow-start: rgba(255, 153, 0, 0.5);
    --ai-glow-pulse: rgba(255, 153, 0, 0.7);
    --spinner-track: rgba(2, 1, 90, 0.1);

    /* Layout */
    --sidebar-width: 350px;
    --focus-ring: rgba(255, 153, 0, 0.2);
    --header-height: 50px;
    --nav-height: 45px;
    --input-height: 38px;
    --input-padding-y: 0.4rem;
    --input-padding-x: 0.75rem;
}

/* --- Dark Theme Overrides --- */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-app: var(--color-slate-950);
    --bg-surface: var(--color-slate-800);
    --bg-surface-glass: rgba(30, 41, 59, 0.9);
    --bg-subtle: var(--color-slate-900);
    
    --text-primary: var(--color-slate-100);
    --text-secondary: var(--color-slate-400);
    
    --border-color: var(--color-slate-700);
    --border-hover: var(--color-slate-600);
    
    --brand-secondary: #60a5fa; /* Lighter blue for text in dark mode */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.5), 0 4px 8px -3px rgba(0, 0, 0, 0.3);

    /* --- Component Specific Tokens (Dark Mode) --- */
    --status-open-bg: #075985; --status-open-text: #e0f2fe;
    --status-progress-bg: #854d0e; --status-progress-text: #fef9c3;
    --status-completed-bg: #14532d; --status-completed-text: #dcfce7;
    --status-review-bg: #7c2d12; --status-review-text: #ffedd5;
    --status-archived-bg: #334155; --status-archived-text: #cbd5e1;
    
    --bg-code-block: #0f172a;
    --bg-chat-agent: #1e293b;
    --bg-chat-context: #0c4a6e;
    --border-chat-context: #075985;
    --text-chat-context: #e0f2fe;
    
    --bg-strategy-gradient: linear-gradient(135deg, var(--color-slate-800) 0%, var(--color-slate-900) 100%);
    --bg-suggestion-gradient: linear-gradient(to right, #431407, var(--color-slate-800)); /* Dark orange tint */
    
    --scrollbar-thumb: var(--color-slate-600);
    --selection-bg: rgba(255, 153, 0, 0.4);
    
    --ai-glow-start: rgba(255, 153, 0, 0.3);
    --ai-glow-pulse: rgba(255, 153, 0, 0.5);
    --spinner-track: rgba(255, 255, 255, 0.1);
    --focus-ring: rgba(255, 153, 0, 0.4);
}

/* --- Focus Mode (Collapsible Sidebar) --- */
body.focus-mode .app-layout > [id$="-list-pane"] {
    display: none !important;
}

body.focus-mode .app-layout > [id$="-detail-pane"],
body.focus-mode .app-layout > [id$="-detail-container"] {
    width: 100%;
    max-width: 100%; /* Let the container fill, but constrain the text below */
    margin: 0 auto;
}

/* Constrain max width for large screens for better readability */
/* Removed to ensure full width usage */
/*
body > header, body > nav, body > .container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
} */

body { 
    font-family: 'Be Vietnam Pro', sans-serif; 
    margin: 0;
    padding-left: 0; /* Remove manual padding, use flex layout */
    background-color: var(--bg-app);
    color: var(--brand-dark-gray);
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
    scrollbar-gutter: stable; /* Prevent layout shift when scrollbar appears/disappears */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column; /* Top-down layout */
    height: 100vh;
    overflow: hidden; /* Lock viewport */
}

::selection {
    background-color: var(--selection-bg);
}

h1 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -0.02em; }
ul { list-style: none; padding: 0; }
li { 
    background: var(--bg-surface); 
    margin-bottom: 0.35rem;
    padding: 0.5rem 0.75rem; /* Denser SaaS styling */
    border-radius: 8px;
    transition: box-shadow 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border: 1px solid var(--border-color); /* Cleaner full border */
    border-left: 4px solid transparent; /* Reserve space for status indicator */
    cursor: pointer; 
    position: relative;
}
li:hover { 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
    border-color: var(--border-hover);
    z-index: 1; /* Bring to front on hover */
}
li:active {
    box-shadow: none;
    transform: scale(0.99);
}
li.active {
    background-color: #fff7ed !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15) !important;
    z-index: 2;
}

[data-theme="dark"] li.active {
    background-color: rgba(234, 88, 12, 0.15);
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes icon-pop-in {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* CSS for the new list-pane empty state */
.list-pane-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--text-secondary);
    height: 100%;
}

.list-pane-empty i {
    font-size: 1.75rem;
    color: var(--brand-text-muted);
    background-color: var(--bg-subtle);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color);
    animation: icon-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.list-pane-empty p { font-weight: 600; margin: 0; color: var(--brand-dark-gray); }
.list-pane-empty small { margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; }

/* --- Standard List Card Item --- */
.list-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0; /* Remove default padding */
    overflow: hidden;
    gap: 0;
    border-left: none; /* Remove old border */
}

.list-card-indicator {
    width: 6px;
    flex-shrink: 0;
}

.list-card-content {
    padding: 0.6rem 0.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.list-card-content strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
}

.list-card-content p {
    font-size: 0.9em;
    color: var(--brand-text-muted);
    margin: 0;
}

.list-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.list-card-title-wrapper {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
    gap: 0.5rem;
}

.list-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: var(--brand-dark-gray);
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0;
    flex-grow: 1;
    min-width: 0;
    display: block;
}

li.active .list-card-title {
    color: var(--brand-primary);
    font-weight: 700;
}

.list-card-icon-styled {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.list-card-icon {
    font-size: 1.1rem;
    color: var(--brand-text-muted);
    margin-top: 0.1rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.list-card-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ensure nested status badges inside list headers scale down to match */
.list-card-header .status-open,
.list-card-header .status-in_progress,
.list-card-header .status-in-progress,
.list-card-header .status-completed,
.list-card-header .status-needs_review,
.list-card-header .status-needs-review,
.list-card-header .status-planned,
.list-card-header .status-active,
.list-card-header .status-archived {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
}

.list-card-preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-card-footer {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--brand-text-muted);
}

/* Status Indicators & Badges */
.indicator-active { background-color: var(--brand-primary); }
.indicator-planned { background-color: #60a5fa; }
.indicator-completed { background-color: var(--status-completed-text); }
.indicator-archived { background-color: var(--status-archived-text); }
.indicator-open { background-color: var(--status-open-text); }
.indicator-in_progress { background-color: var(--status-progress-text); }
.indicator-needs_review { background-color: var(--status-review-text); }

.badge-active { background-color: #fff7ed; color: #c2410c; }
.badge-planned { background-color: #dbeafe; color: #1d4ed8; }
.badge-completed { background-color: var(--status-completed-bg); color: var(--status-completed-text); }
.badge-archived { background-color: var(--status-archived-bg); color: var(--status-archived-text); }

/* --- Assignee Avatar (Global) --- */
.assignee-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    flex-shrink: 0;
    background-color: var(--bg-subtle); /* Default background if not set inline */
}

.status-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.status-icon-completed { color: var(--status-completed-text); }
.status-icon-needs_review { color: var(--status-review-text); }
.status-icon-in_progress { color: var(--status-progress-text); }
.status-icon-open { color: var(--status-open-text); }
.status-icon-planned { color: var(--status-open-text); }
.status-icon-note { color: var(--status-open-text); }
.status-icon-active { color: #1d4ed8; }
.status-icon-archived { color: #4b5563; }
.status-icon-executable {
    color: var(--brand-primary);
    opacity: 0.9; /* Make it stand out more than other muted icons */
}

/* --- List Skeleton Loader --- */
@keyframes skeleton-pulse {
  0% { background-color: var(--bg-app); }
  50% { background-color: var(--border-color); }
  100% { background-color: var(--bg-app); }
}

.skeleton-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--bg-surface);
    border-radius: 12px;
    border-left: 4px solid var(--border-color);
}

.skeleton-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--border-color);
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    flex-shrink: 0;
}

.skeleton-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-line {
    height: 1rem;
    border-radius: 4px;
    background-color: var(--border-color);
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-line.title {
    width: 70%;
    height: 1.2rem;
}

.skeleton-line.meta {
    width: 50%;
}

/* --- Search Result Skeleton Loader --- */
.skeleton-search-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

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

.skeleton-search-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.skeleton-favicon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: var(--border-color);
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-search-item .skeleton-line.title { width: 60%; height: 1.1rem; }
.skeleton-search-item .skeleton-line.url { width: 40%; height: 0.8rem; margin-bottom: 0.75rem; }
.skeleton-search-item .skeleton-line.snippet { width: 90%; height: 0.9rem; margin-bottom: 0.5rem; }
.skeleton-search-item .skeleton-line.snippet.short { width: 75%; }

.centered-message { text-align: center; padding: 4rem 2rem; color: var(--text-secondary); }

form { display: flex; flex-direction: column; gap: 1rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="datetime-local"], input[type="date"], select, textarea { 
    /* Reset appearance for custom styling, especially for select */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 100%;
    box-sizing: border-box; 
    flex-grow: 1; 
    padding: var(--input-padding-y) var(--input-padding-x);
    min-height: var(--input-height);
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    font-family: 'Be Vietnam Pro', sans-serif; 
    font-size: 0.95rem; 
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Refined disabled state for form elements */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background-color: var(--bg-subtle);
    color: var(--brand-text-muted);
    cursor: not-allowed;
    border-style: dashed;
}

/* Fix for date/time inputs: Restore native UI (calendar icon) and adjust padding */
input[type="datetime-local"], input[type="date"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    padding: 0.2rem; /* Balanced padding to prevent text clipping */
}

/* Invert calendar icon color in dark mode so it's visible */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Custom dropdown arrow for all select elements */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem; /* Make room for the arrow */
    cursor: pointer;
}

[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Ensure checkboxes and radios match the brand theme */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--brand-primary);
}

input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
textarea {
    min-height: 120px; 
    resize: vertical;
}
input:focus, textarea:focus, select:focus { 
    outline: none; 
    border-color: var(--brand-primary); 
    /* Sharp, double-layered focus ring imitating native OS focus */
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--brand-primary); 
    background-color: var(--bg-surface); 
}

button {
    padding: var(--input-padding-y) var(--input-padding-x);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500; /* Slightly bolder for better readability */
    font-family: 'Be Vietnam Pro', sans-serif;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center content (text or spinner) */
    justify-content: center; /* Horizontally center content */
    min-height: var(--input-height); /* Match input height */
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Square buttons for icon-only actions (like list headers) */
.icon-square-btn {
    padding: 0 !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Disable hover effect for menu toggle which has its own */
button:not(.menu-toggle):hover { transform: translateY(-2px); }
button:not(.menu-toggle):active { 
    transform: scale(0.98); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Keyboard Accessibility Polish */
button:focus-visible, a:focus-visible, .utility-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--brand-primary);
}

button.primary { 
    background-color: var(--brand-primary); 
    background-image: linear-gradient(135deg, var(--brand-primary) 0%, #ffaa33 100%);
    color: var(--text-inverse); 
    border: 1px solid transparent;
}
button.primary:hover { 
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3); 
    filter: brightness(1.05);
}
button.secondary { 
    background-color: var(--bg-surface); 
    color: var(--text-secondary); 
    border: 1px solid var(--border-color);
}
button.secondary:hover { 
    background-color: var(--bg-surface-hover); 
    color: var(--text-primary);
    border-color: var(--border-hover);
}
button.danger { 
    background-color: var(--bg-surface); 
    color: var(--brand-danger); 
    border: 1px solid var(--brand-danger);
}
button.danger:hover { 
    background-color: var(--brand-danger); 
    color: var(--text-inverse); 
    border-color: var(--brand-danger);
}

/* --- Focus / Doc Edit Mode --- */
body.doc-edit-mode .app-nav {
    display: none !important;
}

body.doc-edit-mode #note-detail-pane {
    border: none;
    border-radius: 0;
    background-color: var(--bg-app); /* The "desk" */
}

/* Clean "Distraction-Free" Aesthetic for non-modal editors */
#note-detail-pane .note-edit-form,
#research-detail-pane .note-edit-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto; /* The outer pane scrolls */
    padding: 0;
    background-color: var(--bg-app); /* The "desk" */
}

#note-detail-pane .note-edit-form .form-fields,
#research-detail-pane .note-edit-form .form-fields {
    background-color: var(--brand-white);
    box-shadow: 0 0 20px rgba(0,0,0,0.03); /* Subtle shadow for depth */
    border-radius: 0;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-top: none;
    border-bottom: 1px solid var(--border-color);
    max-width: 850px;
    margin: 0 auto 2rem auto;
    width: 100%;
    padding: 0;
    min-height: calc(100% - 2rem); /* Ensure the page stretches to the bottom even if empty */
    overflow: visible; /* Let the desk scroll instead */
    flex-grow: 1; /* Maintain page shape even if content is small */
    flex-shrink: 0; /* Prevent the page from shrinking smaller than its content */
}

/* Modal Editor Overrides to prevent double scrolling and layout squishing */
#app-modal-content .form-fields {
    padding: 0;
    max-width: 100%;
    border: none;
    box-shadow: none;
    min-height: auto;
    overflow-y: visible; /* Let the modal-view-content-wrapper handle scrolling */
}
#app-modal-content .tiptap-toolbar {
    top: -1.5rem; /* Offset the 1.5rem padding of the wrapper */
    margin: 0 -1.5rem 0.5rem -1.5rem;
    padding: 0.75rem 1.5rem;
}

/* Adjust internal padding of the "paper" */
#note-detail-pane .note-edit-form .edit-header,
#research-detail-pane .note-edit-form .edit-header {
    padding: 1.5rem 2rem 0.5rem 2rem;
    margin-bottom: 0;
    border-bottom: none;
}

#note-detail-pane .note-edit-form .document-title-input,
#research-detail-pane .note-edit-form .document-title-input {
    font-size: 1.25rem;
    padding-left: 0.5rem;
}

#note-detail-pane .note-edit-form details.metadata-details,
#note-detail-pane .note-edit-form .metadata-input-wrapper,
#research-detail-pane .note-edit-form details.metadata-details,
#research-detail-pane .note-edit-form .metadata-input-wrapper {
    padding: 0 2rem;
}

#note-detail-pane .note-edit-form .tiptap-editor,
#research-detail-pane .note-edit-form .tiptap-editor {
    padding: 0 2rem 2rem 2rem;
}

/* Prevent double scrollbars - Tiptap expands to fill */
#note-detail-pane .note-edit-form .tiptap,
#research-detail-pane .note-edit-form .tiptap {
    overflow-y: visible;
    min-height: 400px;
}

/* Ensure the editor containers grow to fit their content in the document view,
   so the white "page" background stretches with the text. */
#note-detail-pane .note-edit-form .editor-wrapper,
#note-detail-pane .note-edit-form .editor-content-area,
#note-detail-pane .note-edit-form .tiptap-editor,
#research-detail-pane .note-edit-form .editor-wrapper,
#research-detail-pane .note-edit-form .editor-content-area,
#research-detail-pane .note-edit-form .tiptap-editor {
    min-height: auto;
}

button:disabled, button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- AI Action Button Shimmer --- */
@keyframes ai-shimmer {
    0% {
        transform: translateX(-150%) skewX(-20deg);
        opacity: 0;
    }
    5% { opacity: 1; }
    40% { opacity: 1; }
    50% {
        transform: translateX(350%) skewX(-20deg);
        opacity: 0;
    }
    100% {
        transform: translateX(350%) skewX(-20deg);
        opacity: 0;
    }
}

.ai-action-button {
    position: relative;
    overflow: hidden;
}

.ai-action-button::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.3) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-150%) skewX(-20deg);
    animation: ai-shimmer 5s ease-out infinite;
    pointer-events: none;
}

.ai-action-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4);
}
.note-actions, .task-actions, .detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }

.edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem; /* Shifted top padding from .form-fields to here */
    margin-bottom: 0.5rem;
}
 
/* --- Unified Modal Form Headers --- */
.form-fields > .edit-header:first-child {
    margin-bottom: 0;
}
.form-fields > .edit-header:first-child h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.form-fields > .edit-header:first-child h2 i {
    color: var(--brand-primary);
}
.form-fields > .edit-header:first-child + .form-hint {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Form Labels */
label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Form Groups for better structure in edit forms */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* --- Document Read-Only View (Google Docs Aesthetic) --- */
.note-detail-wrapper.document-view {
    background-color: var(--bg-app); /* The grey desk */
}

.desk-area {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
}

.document-paper {
    background-color: var(--brand-white);
    max-width: 850px;
    width: 100%;
    margin: 0.5rem auto 2rem auto;
    padding: 1.5rem; /* Matches editor boundaries */
    box-shadow: 0 0 20px rgba(0,0,0,0.03);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    min-height: calc(100% - 2rem);
    flex-shrink: 0;
}

.document-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--border-color);
}

.byline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--brand-text-muted);
    text-transform: capitalize;
}

.byline-item i {
    opacity: 0.6;
}

/* --- Edit and Detail Panes --- */
 
/* Line number for edit form */
.CodeMirror-linenumber {
    color: #6c757d;
    opacity: 65%;
    font-size:13px;
    font-family: monospace;
}

/* Ensure both detail and edit views fill the pane */
.note-detail-wrapper,
.task-detail-wrapper,
.project-detail-wrapper,
.cycle-detail-wrapper,
.asset-detail-wrapper,
.note-edit-form,
.task-edit-form,
.project-edit-form,
.cycle-edit-form,
.asset-edit-form,
.edit-form { /* For projects.html */
    display: flex;
    flex-direction: column;
    height: 100%;
    width:100%;
    margin-bottom: 0; /* Override default form margin */
    box-sizing: border-box;
    padding: 0; /* Removed wrapper padding to allow full-bleed headers/ribbons */
}
 
/* Specific to Detail View */
.note-detail-wrapper .detail-content,
.task-detail-wrapper .detail-content,
.project-detail-wrapper .detail-content,
.cycle-detail-wrapper .detail-content {
    flex-grow: 1; /* Allow the content area to expand */
    overflow-y: auto; /* Add scroll for long content */
}
 
/* The form-fields div needs to be a flex container to make the editor grow */
.note-edit-form .form-fields,
.task-edit-form .form-fields,
.project-edit-form .form-fields,
.cycle-edit-form .form-fields,
.asset-edit-form .form-fields {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Important for flex-grow in a scrolling container */
    padding: 0 2.5rem 0.5rem; /* 0 top padding allows flush sticky toolbars */
    max-width: 950px; /* Slightly wider canvas for the doc feel */
    margin: 0 auto;
    width: 100%;
    overflow-y: auto;
}
/* Specific to Edit View */
.note-edit-form .EasyMDEContainer {
    flex-grow: 1; /* Make the editor container grow */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Crucial for nested flex scrolling */
}
.note-edit-form .CodeMirror {
    flex-grow: 1; /* Make the CodeMirror instance grow */
    min-height: 0; /* Crucial for nested flex scrolling */
    height: 100%; /* Ensure it fills the container */
    border-radius: 0px;
}
/* Override the global flex-grow for text inputs inside the edit form */
.note-edit-form .form-fields input[type="text"],
.task-edit-form .form-fields input[type="text"],
.project-edit-form .form-fields input[type="text"],
.cycle-edit-form .form-fields input[type="text"],
.asset-edit-form .form-fields input[type="text"] {
    flex-grow: 0;
}

/* Tiptap Editor Container */
.tiptap-editor {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0; /* Important for nested flex scrolling */
  max-width: 100%; /* Let parent handle max-width to align toolbar and text */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Tiptap Editor Styles */
.tiptap {
  min-height: 200px;
  border: none; /* Remove boxed border for seamless page feel */
  border-radius: 0;
  padding: 1.5rem 0 2.5rem 0; /* 0 horizontal padding to align with document title */
  background-color: transparent;
  outline: none;
  overflow-y: auto;
  flex-grow: 1;
  font-size: 1.05rem; /* Slightly larger for long-form writing */
  line-height: 1.7; /* Optimal readability */
  color: var(--brand-dark-gray);
}

.tiptap:focus {
  border-color: transparent;
  box-shadow: none; /* Remove focus ring for a seamless feel */
}

.tiptap p {
  margin-top: 0;
  margin-bottom: 1.2em;
}

.tiptap h1, .tiptap h2, .tiptap h3 {
    margin-top: 1.5em; /* Create separation from preceding paragraphs */
    margin-bottom: 0.5em;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

/* Remove top margin only from the very first heading to align it with the main document title */
.tiptap > h1:first-child {
    margin-top: 0;
}

.tiptap h1 { font-size: 2em; }
.tiptap h2 { font-size: 1.5em; margin-top: 1.4em; }
.tiptap h3 { font-size: 1.25em; margin-top: 1.2em; }

.tiptap ul, .tiptap ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.tiptap ul li { list-style-type: disc; }
.tiptap ol li { list-style-type: decimal; }

/* Reset global list item styles for editor content */
.tiptap li {
    background: transparent;
    margin-bottom: 0.25em;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: text;
    display: list-item;
    transition: none;
}

.tiptap li:hover {
    box-shadow: none;
    border: none;
    background: transparent;
    z-index: auto;
}

.tiptap blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: 1rem;
    margin-left: 0;
    color: var(--text-secondary);
}

.tiptap pre {
    background-color: var(--bg-code-block);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
}

.tiptap code {
    background-color: var(--bg-code-block);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.tiptap pre code {
    background: transparent;
    padding: 0;
}

.tiptap img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.tiptap img.ProseMirror-selectednode {
    outline: 3px solid var(--brand-primary);
}

/* Horizontal Rule */
.tiptap hr {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: 2rem 0;
}

/* Task List (Checklists) */
.tiptap ul[data-type="taskList"] {
    list-style: none;
    padding: 0;
}

.tiptap ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tiptap ul[data-type="taskList"] li > label {
    margin-top: 0.2rem;
    flex-shrink: 0;
    user-select: none;
}

.tiptap ul[data-type="taskList"] li > div {
    flex-grow: 1;
}

/* Tables */
.tiptap table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    margin: 1.5rem 0;
    overflow: hidden;
}

.tiptap table td,
.tiptap table th {
    min-width: 1em;
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
}

.tiptap table th {
    font-weight: 600;
    text-align: left;
    background-color: var(--bg-subtle);
}

.tiptap table .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: -2px;
    width: 4px;
    background-color: var(--brand-primary);
    pointer-events: none;
}

.tiptap table p {
    margin: 0;
}

.tiptap .image-resizer-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--brand-primary);
    border: 2px solid white;
    border-radius: 50%;
    z-index: 50;
    cursor: se-resize;
}

/* Tiptap Toolbar */
.tiptap-toolbar {
  display: flex;
  flex-direction: row;
  background-color: var(--bg-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0; 
  padding: 0.5rem 0;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap; /* Prevent stacking */
  overflow-x: auto; /* Allow scrolling on very small screens */
  position: sticky; /* Keep toolbar visible */
  top: 0;
  z-index: 10; /* Ensure it sits above content */
  scrollbar-width: none; /* Firefox */
  flex-shrink: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tiptap-toolbar::-webkit-scrollbar {
    display: none;
}

/* Specific adjustments for sticky toolbar on the Paper */
#note-detail-pane .note-edit-form .tiptap-toolbar,
#research-detail-pane .note-edit-form .tiptap-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.95);
    margin: 0;
    padding: 0.75rem 2rem;
    border-radius: 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.menu-group {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0; /* Prevent groups from squishing */
}

.menu-group-separator {
    border-left: 1px solid var(--border-color);
    padding-left: 0.5rem;
    margin-left: 0.25rem;
}

/* Individual buttons */
.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0; /* Reset padding */
  min-height: 32px; /* Override global min-height */
}

.menu-btn:hover, .menu-btn.is-active {
  background-color: var(--bg-subtle);
  color: var(--brand-primary);
}

.menu-btn svg, 
.menu-btn i {
  fill: currentColor;
  font-size: 1rem;
}

/* Adjust Save/Cancel buttons inside the new toolbar location */
.tiptap-toolbar .form-actions {
    margin-top: 0;
    flex-wrap: nowrap;
    position: sticky;
    right: 0;
    z-index: 5;
}
.tiptap-toolbar .form-actions button {
    min-height: 32px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
}

.modal-title-input {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-dark-gray);
    /*padding: 0 !important;
    border: none !important;
    box-shadow: none !important;*/
    margin-bottom: 1rem;
}
/* Toolbar for AI/content actions above the editor */
.ai-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem; /* Provides spacing between this toolbar and the editor's own toolbar */
}

/* --- Document Editor Styles --- */
.document-title-input {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem; /* Increase scale for clear document hierarchy */
    font-weight: 700;
    color: var(--brand-dark-gray);
   /*  border: none !important; Override default input border 
    box-shadow: none !important; */
    padding: 0.5rem 0;
    background: transparent;
    width: 100%;
    margin-bottom: 0;
}
.document-title-input:focus {
    outline: none;
}
.document-title-input::placeholder {
    color: #cbd5e1;
    font-weight: 500;
}

.metadata-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--brand-text-muted);
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}
.metadata-input-wrapper i {
    font-size: 0.9rem;
    opacity: 0.6;
    flex-shrink: 0;
}
.metadata-input-wrapper input {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    color: var(--brand-dark-gray);
    flex-grow: 1;
}
.metadata-input-wrapper input:focus {
    box-shadow: none;
    border-bottom: 1px solid var(--brand-accent-orange) !important;
    border-radius: 0;
}

/* --- Editor Loading Overlay --- */
.editor-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.editor-wrapper .editor-content-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: filter 0.2s ease-in-out;
    max-width: 100%; /* Let parent .form-fields control width */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.editor-footer {
    padding: 1rem 0 0.5rem 0;
    margin-top: auto; /* Push to the very bottom of the wrapper */
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    background-color: transparent;
    border-top: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0; /* Prevent footer from shrinking */
    border-radius: 0;
    user-select: none;
}

.footer-divider {
    width: 1px;
    height: 12px;
    background-color: var(--border-color);
}

.editor-wrapper.is-busy .editor-footer {
    filter: blur(2px);
    pointer-events: none;
}

.editor-wrapper .editor-indicator-overlay {
    opacity: 0;
    visibility: hidden;
    display: flex;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 8px;
    color: var(--brand-text-muted);
}

.editor-wrapper.htmx-request .editor-indicator-overlay,
.editor-wrapper.is-busy .editor-indicator-overlay { 
    opacity: 1;
    visibility: visible;
}

.editor-wrapper.htmx-request .editor-content-area,
.editor-wrapper.is-busy .editor-content-area { filter: blur(2px); pointer-events: none; }

.utility-text-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--brand-accent-orange) !important;
    text-decoration: underline;
    font-weight: 500;
    min-height: auto !important;
}
.utility-text-button:hover { color: var(--brand-dark-blue) !important; text-decoration: underline; transform: none !important; }

button.format-toolbar {
    color: var(--brand-accent-orange);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}

.list-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--brand-dark-gray);
}

/* A variation of list-header for the global page header bar that contains the breadcrumb */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--brand-bg-light); */
    padding: 0.5rem 1.5rem;
    border-radius: 0px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    background-color: var(--brand-white);
    flex-shrink: 0;
}

/* When the breadcrumb is inside the new toolbar, the toolbar itself provides the margin */
.page-header-bar .breadcrumb {
    margin-bottom: 0;
}

.page-header-right-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.controls {
    display: flex;
    flex-direction: row; /* Align search and sort horizontally */
    align-items: center;
    gap: 0.75rem; /* Space between search and toggle */
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.controls select {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sort-select {
    width: auto;
    flex-grow: 0;
}

.planning-controls select {
    width: 150px;
    flex-grow: 0;
}

.inline-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid transparent; /* Reserve space but be invisible */
    background: transparent;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    font-weight: 500;
    padding: 2px 20px 2px 6px; /* Top/Bottom, Right (for arrow), Left */
    margin: 0;
    outline: none;
    width: auto;
    flex-grow: 1;
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 12px 10px;
    transition: background-color 0.2s, border-color 0.2s;
}

[data-theme="dark"] .inline-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.inline-select:hover, .inline-select:focus {
    background-color: rgba(0,0,0,0.05);
    border-color: var(--border-color);
}

.controls input[type="search"] { flex-grow: 1; }

.list-header-actions {
    display: flex;
    gap: 0.5rem;
}

.filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    margin-bottom: 0.2rem; /* Adjusted to account for larger bottom padding */
    padding: 0.25rem 1.5rem 0.75rem 0.25rem; /* Prevent shadow/focus clipping */
    margin-left: -0.25rem; /* Optical alignment */
    scrollbar-width: none; /* Firefox */
    /* Fade out on the right edge to indicate scrollability */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    /* The border is removed from the container and will be applied to the buttons */
    flex-shrink: 0;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tabs input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}

/* Apply pill styles to both buttons (for Tasks page) and labels (for Projects page) */
.filter-tab, .filter-tabs label {
    padding: 0.3rem 0.6rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px; 
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--brand-text-muted);
    transition: all 0.2s ease;
    line-height: 1.2; /* Ensure consistent vertical alignment */
    text-decoration: none; /* For when used on <a> tags */
    white-space: nowrap; /* Prevent button text from wrapping */
    text-transform: none;
    flex-shrink: 0;
}

.filter-tab:hover, .filter-tabs label:hover {
    color: var(--brand-dark-gray);
    background-color: var(--bg-subtle);
}

/* Style the active tab using the :checked pseudo-class on the hidden radio button */
.filter-tabs input[type="radio"]:checked + label,
.filter-tab.active { /* Keep .active for backwards compatibility with Tasks page */
    color: var(--brand-white);
    background-color: var(--brand-dark-gray);
    border-color: var(--brand-dark-gray);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 
    font-weight: 500; 
}

.filter-tab.disabled, .filter-tabs a.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.filter-toggle label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-text-muted);
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
}

/* Hide the default checkbox */
.toggle-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    background-color: #ccc;
    border-radius: 22px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

/* Style the toggle handle */
.toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

/* Change background and handle position when checked */
.toggle-switch:checked {
    background-color: var(--brand-accent-orange);
}

.toggle-switch:checked::before {
    transform: translateX(18px);
}

.clear-filter-link {
    margin-left: 0.25rem; /* Adjust for inline positioning */
    color: var(--brand-text-muted);
    text-decoration: none;
    font-size: 0.9rem; /* Match breadcrumb font size */
    vertical-align: middle; /* Align icon with text */
}

#note-detail-pane,
#project-detail-pane, /* This is for project view */
#cycle-detail-pane, /* This is for cycle view */
#research-detail-pane, /* This is for research view */
#task-detail-container, /* This is the container for the task view's right pane */
#asset-detail-pane,
#legal-detail-pane,
#web-detail-pane,
#workflow-detail-pane {
    flex-grow: 1;
    background: var(--brand-white);
    border-radius: 16px;
    display: flex; /* Use flex to allow child to grow */
    flex-direction: column;
    overflow: hidden; /* The inner pane will scroll */
    box-shadow: none;
    border: 1px solid var(--border-color);
    /*padding: 0.5rem;*/
    position: relative;
}

/* The main container for the page content below the navigation tabs */
.container {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%; /* Fill remaining space */
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Push the main container when chat is open */
body.chat-open .container {
    margin-right: 500px; /* Match sidebar width */
}

body.chat-open .agentchat-sidebar {
    box-shadow: none; /* Remove shadow to look integrated */
}

/* The actual scrollable content area inside the task detail container */
#task-detail-pane {
    flex-grow: 1;
    overflow: hidden; /* Prevent pane scrolling, rely on inner content scroll */
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
    background: none;
    border-radius: 0;
}

/* --- Login Page Specifics --- */
.login-page-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0; /* Override default body margin */
}

#login-container {
    width: 100%;
    max-width: 420px;
    text-align: center;
    background-color: var(--brand-white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
}

#login-container .logo {
    margin-bottom: 1.5rem;
    height: 68px;
    margin-left: auto;
    margin-right: auto;;
}

#login-container h1 { margin-bottom: 0.5rem; }
#login-container p { margin-bottom: 1.5rem; }
.login-form button {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.5rem; /* Give login button more presence */
}

/* Loading indicator for login button */
.login-form button .htmx-indicator { display: none; }
.login-form.htmx-request button .htmx-indicator { display: inline; }
.login-form.htmx-request button .button-text {
    display: none;
}

/* Error message styling */
.error-message {
    display: block;
    text-align: center;
    color: var(--error-red);
    background-color: #fef2f2; /* A light red background */
    border: 1px solid var(--error-red);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Detail Pane Content */
.detail-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 1rem; 
    flex-wrap: wrap; 
    gap: 1rem; 
}

.note-detail-wrapper, .task-detail-wrapper, .project-detail-wrapper, .cycle-detail-wrapper, .asset-detail-wrapper, .detail-pane-empty-enhanced, .detail-pane-loading {
    flex: 1; /* Allow growing to fill flex parent */
    min-height: 0; /* Allow shrinking for scroll */
    box-sizing: border-box;
    overflow: hidden; /* Prevent wrapper scroll, rely on content-area */
}


.detail-header h2 { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-size: 1.5rem; }
.detail-header .detail-actions, .detail-header .note-actions, .detail-header .task-actions { flex: 0 0 auto; }
.detail-meta { font-size: 0.9rem; color: var(--brand-text-muted); margin-bottom: 1rem; }

/* --- Project Stats Grid --- */
.project-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin: 0 2rem 1.5rem 2rem;
    padding: 1.5rem; /* Increased padding for a more spacious feel */
    /* Subtle gradient using very light versions of brand colors, with a white fallback */
    background: linear-gradient(135deg, rgba(2, 1, 90, 0.02) 0%, rgba(255, 153, 0, 0.02) 100%), var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    /* A soft shadow to lift the card off the page */
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.stat-item-link {
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
    border-radius: 8px;
    padding: 0.5rem 0; /* Add some padding for the hover background */
    margin: -0.5rem 0; /* Counteract the padding to maintain alignment */
}

.stat-item-link:hover {
    transform: translateY(-2px);
    /* The background color is removed to better suit the gradient background. The transform provides enough feedback. */
}

.stat-value-overdue {
    color: var(--error-red);
}

.stat-value-urgent {
    color: var(--brand-accent-orange);
    /* Make icon slightly smaller than number values to look balanced */
    font-size: 1.5rem;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.stat-link-icon {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s, transform 0.2s;
}

.stat-item-link:hover .stat-link-icon {
    opacity: 1;
    color: var(--brand-accent-orange);
    transform: translateX(2px);
}

/* --- Metadata Grids for Task Detail and Edit Views --- */

/* For the task detail view */
.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
}

/* Metadata Ribbon (New Design) */
.detail-meta-ribbon {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background-color: var(--brand-white);
    flex-shrink: 0;
}

.meta-item {
    display: flex;
    min-width: 0; /* Crucial for allowing text truncation in flex children */
    flex-direction: column;
}

.meta-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--brand-dark-gray);
}

.assignee-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden; /* Ensure container respects parent width */
}

.meta-item.full-width {
    grid-column: 1 / -1;
    /* Convert the full-width item into a grid container itself. */
    /* This isolates its layout and prevents its complex children 
       from interfering with the parent grid's column calculations. */
    display: grid; 
}

/* --- Collapsible Meta Container --- */
.detail-meta-container {
    background-color: var(--brand-bg-light);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 0.75rem;
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.detail-meta-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.detail-meta-primary .meta-item {
    flex: 1 1 150px;
    min-width: 0; /* Allow truncation */
}

.detail-meta-primary .meta-toggle-btn {
    flex: 0 0 auto;
    margin-left: auto;
    background: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    color: var(--brand-text-muted);
}

.detail-meta-primary .meta-toggle-btn:hover {
    border-color: var(--brand-accent-orange);
    color: var(--brand-accent-orange);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.detail-meta-secondary {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.detail-meta-container.expanded .detail-meta-secondary {
    display: grid;
}

.detail-meta-container.expanded .meta-toggle-btn i {
    transform: rotate(180deg);
}

.project-link-in-grid {
    text-decoration: none;
    transition: color 0.2s ease;
}

.project-link-in-grid:hover {
    color: var(--brand-accent-orange);
    text-decoration: underline;
}

/* Utility class to truncate long text with an ellipsis */
.truncate-text {
    white-space: nowrap; /* Prevent the text from wrapping to the next line */
    overflow: hidden; /* Hide the part of the text that overflows */
    text-overflow: ellipsis; /* Add the '...' at the end */
    min-width: 0; /* Important for flex children to allow them to shrink */
    display: inline-block; /* Or block, depending on context */
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* For the task edit form */
.form-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.form-meta-grid .form-group {
    margin-bottom: 0;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    background-color: var(--bg-subtle);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border-left: 3px solid var(--brand-secondary);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    opacity: 0.65;
}

.tag-list { 
    margin: 0.5rem 0; 
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tag { 
    display: inline-flex; 
    align-items: center;
    gap: 0.25rem;
    background-color: var(--brand-bg-light); 
    color: var(--brand-text-muted); 
    padding: 0.25rem 0.6rem; 
    border-radius: 12px; 
    font-size: 0.8rem; 
}

/* --- Task Status Styling --- */
.status-open, .status-in_progress, .status-in-progress, .status-completed, .status-needs_review, .status-needs-review, .status-planned, .status-active, .status-archived {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

.status-open .status-icon,
.status-in_progress .status-icon,
.status-in-progress .status-icon,
.status-completed .status-icon,
.status-needs_review .status-icon,
.status-needs-review .status-icon,
.status-planned .status-icon,
.status-active .status-icon,
.status-archived .status-icon {
    font-size: 0.9em; /* Relative to the parent's font-size for better scaling */
    opacity: 1; /* Ensure icon is fully visible inside the pill */
}

.status-open {
    background-color: var(--status-open-bg);
    color: var(--status-open-text);
}
.status-in_progress, .status-in-progress {
    background-color: var(--status-progress-bg);
    color: var(--status-progress-text);
}
.status-completed {
    background-color: var(--status-completed-bg);
    color: var(--status-completed-text);
}
.status-needs_review, .status-needs-review {
    background-color: var(--status-review-bg);
    color: var(--status-review-text);
}
.status-planned {
    background-color: var(--status-open-bg);
    color: var(--status-open-text);
}
.status-active {
    background-color: #dbeafe; /* lighter blue */
    color: #1d4ed8;
}
.status-archived {
    background-color: var(--status-archived-bg);
    color: var(--status-archived-text);
}
/* --- Markdown Content Styling --- */
/* Apply to both final rendered content and the editor's preview pane */
.markdown-content,
.editor-preview {
    line-height: 1.6; /* Adjusted for better readability */
    max-width: 850px; /* Optimal reading measure for long-form text */
    margin-left: auto; /* Center the text block if the pane is wide */
    margin-right: auto;
   /* background: #fafafa;*/
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6,
.editor-preview h1,
.editor-preview h2,
.editor-preview h3,
.editor-preview h4,
.editor-preview h5,
.editor-preview h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark-gray);
    margin-top: 1.75em;
    margin-bottom: 1em;
    font-weight: 600;
    line-height: 1.3;
}

.markdown-content h1, .editor-preview h1 { font-size: 2em; }
.markdown-content h2, .editor-preview h2 { font-size: 1.5em; }
.markdown-content h3, .editor-preview h3 { font-size: 1.25em; }

.markdown-content p,
.editor-preview p {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.markdown-content ul,
.markdown-content ol,
.editor-preview ul,
.editor-preview ol {
    padding-left: 2em;
    margin-bottom: 1.25em;
}

/* This is the key fix: Reset UI styles for list items within markdown content */
.markdown-content li,
.editor-preview li {
    background: none;
    margin-bottom: 0.4em; /* Reduced spacing between list items */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: list-item; /* Restore default list behavior */
    border-left: none;
    cursor: default;
    transition: none;
    border: none;
}

.markdown-content li > p {
    margin-bottom: 0.4em; /* Tighter spacing for paragraphs inside list items */
}

.markdown-content li > ul,
.markdown-content li > ol {
    margin-top: 0.5em; /* Add some space before nested lists */
}

.markdown-content li:hover,
.editor-preview li:hover {
    transform: none;
    box-shadow: none;
}

.markdown-content ul li, .editor-preview ul li { list-style-type: disc; }
.markdown-content ol li, .editor-preview ol li { list-style-type: decimal; }

/* --- Task Lists in Markdown/Read-Only & Chat --- */
.message-content ul:has(input[type="checkbox"]),
.markdown-content ul:has(input[type="checkbox"]),
.editor-preview ul:has(input[type="checkbox"]) {
    padding-left: 0; /* Remove standard bullet indentation */
}

.message-content li:has(input[type="checkbox"]),
.markdown-content li:has(input[type="checkbox"]),
.editor-preview li:has(input[type="checkbox"]) {
    list-style-type: none; /* Strip the bullet point */
}

/* Handle both tight lists (direct child) and loose lists (wrapped in <p>) */
.message-content li:has(> input[type="checkbox"]),
.markdown-content li:has(> input[type="checkbox"]),
.editor-preview li:has(> input[type="checkbox"]),
.message-content li p:has(> input[type="checkbox"]),
.markdown-content li p:has(> input[type="checkbox"]),
.editor-preview li p:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
}

.message-content li input[type="checkbox"],
.markdown-content li input[type="checkbox"],
.editor-preview li input[type="checkbox"] {
    margin-top: 0.35rem; /* Optically align with text */
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.markdown-content a, .editor-preview a { 
    color: var(--brand-accent-orange); 
    text-decoration: none; 
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.markdown-content a:hover, .editor-preview a:hover { border-bottom-color: var(--brand-accent-orange); }
.markdown-content blockquote, .editor-preview blockquote { 
    border-left: 3px solid var(--border-color); 
    padding-left: 1rem; 
    margin-left: 0; 
    margin-bottom: 1.25em;
    color: var(--text-secondary); 
    font-style: italic; 
}
.markdown-content pre, .editor-preview pre { 
    background-color: var(--bg-code-block); 
    padding: 1rem; 
    margin-bottom: 1.25em;
    border-radius: 8px; 
    overflow-x: auto; 
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
}
.markdown-content code, .editor-preview code { font-family: monospace; background-color: var(--bg-code-block); padding: 0.2em 0.4em; border-radius: 4px; }
.markdown-content pre code, .editor-preview pre code { padding: 0; background-color: transparent; border-radius: 0; }

.markdown-content img, .editor-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


/* --- Task/Project Detail Output --- */
.detail-output {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.output-header h3 {
    margin-top: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark-gray);
    margin: 0;
}

.output-actions {
    display: flex;
    gap: 0.5rem;
}

button.utility, a.utility-link {
    background-color: var(--brand-bg-light);
    color: var(--brand-text-muted);
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Ensure consistency for links */
    text-decoration: none; /* For <a> tags */
    display: inline-flex;
    align-items: center;
}

button.utility:hover, a.utility-link:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: var(--brand-text-muted); /* Override link hover color */
}

button.utility i, a.utility-link i {
    margin-right: 0.4rem;
}
.detail-output pre {
    background-color: var(--bg-code-block);
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap; /* To wrap long lines */
    word-wrap: break-word; /* To break long words */
}
.detail-output code { font-family: monospace; background-color: transparent; padding: 0; }

/* --- AG-Grid Custom Theme --- */
.ag-theme-quartz {
    /* Font settings to match the app's typography */
    --ag-font-family: 'Be Vietnam Pro', sans-serif;
    --ag-font-size: 0.95rem;

    /* Main colors from the brand palette */
    --ag-background-color: var(--brand-white);
    --ag-foreground-color: var(--brand-dark-gray); /* Main text color for rows */
    --ag-secondary-foreground-color: var(--brand-text-muted); /* Lighter text for secondary info */

    /* Header styling */
    --ag-header-foreground-color: var(--brand-dark-blue);
    --ag-header-background-color: var(--brand-bg-light);
    --ag-header-row-border-color: var(--border-hover);
    --ag-header-cell-hover-background-color: #e9eff5; /* A slightly darker shade of bg-light */
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-color: var(--border-color);

    /* Row styling */
    --ag-odd-row-background-color: var(--brand-white);
    --ag-row-hover-color: var(--brand-bg-light);

    /* Selection styling */
    --ag-selected-row-background-color: rgba(255, 153, 0, 0.15); /* Accent orange with opacity */
    --ag-range-selection-border-color: var(--brand-accent-orange);
    --ag-range-selection-background-color: rgba(255, 153, 0, 0.1);

    /* Borders and Separators */
    --ag-border-color: var(--border-color);
    --ag-row-border-color: var(--border-color);

    /* Icons */
    --ag-icon-size: 14px;
}

/* --- Generated Assets Styling --- */
.detail-assets {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.assets-header {
    margin-bottom: 1rem;
}
.assets-header h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark-gray);
}
.asset-list {
    list-style: none;
    padding: 0;
}
/* Reset the default list item styling for asset items */
.asset-item {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-bottom: 0.5rem;
    cursor: pointer;
    /* The asset-link class is now on the li itself */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.asset-item-form {
    cursor: default;
    padding: 0;
}
.asset-item:hover {
    transform: none;
    box-shadow: none;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
}
.asset-link {
    flex-grow: 1; /* Allow the link to take up available space */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--brand-dark-blue); /* Use the primary dark blue for text */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.asset-link:hover {
    background-color: transparent; /* Override general hover since parent handles it */
}

.asset-icon {
    color: var(--brand-text-muted);
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.asset-link:hover .asset-icon {
    color: var(--brand-accent-orange); /* Also change icon color on hover */
}
.asset-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.asset-icon-wrapper {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* For the non-image icons */
    color: var(--brand-text-muted);
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.asset-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--brand-bg-light); /* Fallback color while loading */
}
.asset-title {
    line-height: 1.3;
}
.asset-meta {
    font-size: 0.8rem;
    color: var(--brand-text-muted);
    font-weight: 400;
}

.asset-item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.asset-item-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--brand-text-muted);
    font-size: 0.85rem;
}

/* --- File Upload Styling --- */
.file-upload-wrapper {
    position: relative;
    width: 100%;
}

.file-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    border: 2px dashed var(--border-hover);
    border-radius: 12px;
    background-color: var(--bg-subtle);
    color: var(--text-secondary);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s;
    text-align: center;
    gap: 1rem;
}

.file-upload-label i {
    font-size: 3rem;
    color: var(--brand-text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.file-upload-input:hover + .file-upload-label,
.file-upload-input:focus + .file-upload-label {
    border-color: var(--brand-primary);
    background-color: rgba(255, 153, 0, 0.05);
    color: var(--brand-primary);
}

.file-upload-input:hover + .file-upload-label i,
.file-upload-input:focus + .file-upload-label i {
    color: var(--brand-primary);
    transform: translateY(-5px);
}

.file-upload-input:active + .file-upload-label {
    transform: scale(0.98);
}

.file-name-display {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

/*
  The rename input field needs to be visually consistent with other inputs
  in the application and take up the available space. We increase specificity
  by including the tag name and override the base 'width' property to allow
  flex-grow to work correctly.
*/
input.rename-input {
    flex-grow: 1;
    width: 350px; /* Let flexbox determine the width, overriding the base 'width: 100%' */
    padding: var(--input-padding-y) var(--input-padding-x);
    height: var(--input-height);
}
.save-rename-btn, .cancel-rename-btn {
    padding: 0.5rem 1rem; /* Match standard buttons */
    width:150px;
}

.asset-detail-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

/* Use the brand's secondary font for grid headers to match titles */
.ag-theme-quartz .ag-header-cell-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Responsive Breakpoint */
@media (max-width: 800px) {
    .app-layout {
        flex-direction: column;
        height: auto;
        padding: 5px;
    }

    #note-list-pane,
    #task-list-pane,
    #project-list-pane,
        #cycle-list-pane,
    #asset-list-pane,
        #legal-list-pane,
            #web-list-pane,
            #workflow-list-pane {
        width: 100%;
    }

    #note-detail-pane.mobile-hide,
    #task-detail-pane.mobile-hide,
    #project-detail-pane.mobile-hide,
    #cycle-detail-pane.mobile-hide,
    #asset-detail-pane.mobile-hide,
        #legal-detail-pane.mobile-hide,
            #web-detail-pane.mobile-hide,
            #workflow-detail-pane.mobile-hide {
        display: none !important;
    }

    #note-detail-pane.mobile-show,
    #task-detail-pane.mobile-show,
    #project-detail-pane.mobile-show,
    #cycle-detail-pane.mobile-show,
    #asset-detail-pane.mobile-show,
        #legal-detail-pane.mobile-show,
            #web-detail-pane.mobile-show,
            #workflow-detail-pane.mobile-show {
        display: flex !important;
        padding: 1.5rem;
    }

        .document-paper {
            max-width: 100%;
            margin: 0;
            border: none;
            box-shadow: none;
            padding: 1.5rem 1rem 2rem 1rem;
            min-height: 100%;
        }
    #note-detail-pane .note-edit-form,
    #research-detail-pane .note-edit-form { 
            padding: 0; 
            background: var(--brand-white); 
        }
    #note-detail-pane .note-edit-form .form-fields,
    #research-detail-pane .note-edit-form .form-fields { 
            box-shadow: none; 
            border-radius: 0; 
            min-height: auto; 
            border: none; 
        margin: 0; /* Ensure edge-to-edge on mobile */
        }
        #note-detail-pane .note-edit-form .edit-header, 
        #note-detail-pane .note-edit-form details.metadata-details,
        #note-detail-pane .note-edit-form .tiptap-editor,
        #note-detail-pane .note-edit-form .metadata-input-wrapper,
    #note-detail-pane .note-edit-form .tiptap-toolbar,
    #research-detail-pane .note-edit-form .edit-header, 
    #research-detail-pane .note-edit-form details.metadata-details,
    #research-detail-pane .note-edit-form .tiptap-editor,
    #research-detail-pane .note-edit-form .metadata-input-wrapper,
    #research-detail-pane .note-edit-form .tiptap-toolbar {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    #note-detail-pane .note-edit-form .edit-header,
    #research-detail-pane .note-edit-form .edit-header {
            padding-top: 1.5rem;
        }

    #note-detail-pane.mobile-show .mobile-back-button-wrapper, 
    #task-detail-pane.mobile-show .mobile-back-button-wrapper, 
    #project-detail-pane.mobile-show .mobile-back-button-wrapper, 
    #cycle-detail-pane.mobile-show .mobile-back-button-wrapper,     
    #legal-detail-pane.mobile-show .mobile-back-button-wrapper {
        display: block;
        margin-bottom: 1rem;
    }

    .mobile-back-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        border: none;
        color: var(--brand-text-muted);
        font-size: 0.95rem;
        padding: 0;
        cursor: pointer;
    }
    
    .tiptap {
        padding: 1.5rem 0; /* Keep 0 horizontal, rely on form-fields padding */
    }
    
    .detail-pane-empty { min-height: 200px}
}

/* Intermediate Breakpoint for Sidebar Flexibility */
@media (min-width: 801px) and (max-width: 1200px) {
    :root {
        --sidebar-width: 280px;
    }
}

.mobile-hide { display: none !important;}
.container { padding: 6px}

/* --- Spinner & Loading Indicators --- */

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Spinner Base Style */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--spinner-track); /* Muted brand color */
  border-radius: 50%;
  border-top-color: var(--brand-accent-orange);
  animation: spin 0.6s linear infinite;
}

/* Reusable Form Loading Indicator Pattern */
.form-with-indicator .indicator-content {
    display: none; /* Hidden by default */
}

.form-with-indicator.htmx-request .indicator-content {
    display: flex; /* Shown during HTMX request */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--brand-text-muted);
    height: 100%; /* Make indicator fill the pane */
}

.form-with-indicator.htmx-request .form-fields {
    display: none; /* Hide the actual form fields during request */
}

/* Special handling for form indicators inside a modal when the hx-indicator
   is on the modal content wrapper. This allows us to disable footer buttons
   while still showing the loading state inside the form. */
#app-modal-content.htmx-request .form-with-indicator .indicator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--brand-text-muted);
    height: 100%;
}

#app-modal-content.htmx-request .form-with-indicator .form-fields {
    display: none;
}

/* --- Button with Loading Indicator --- */
/* Generic HTMX indicator styles for fade-in effect */
.htmx-indicator {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-in-out;
}
.htmx-request .htmx-indicator {
    opacity: 1;
    pointer-events: auto;
}
.htmx-request.htmx-indicator {
    opacity: 1;
    pointer-events: auto;
}

/* Show the spinner and hide the text when the request is in flight */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request .button-text {
    display: none;
}

/* --- Global API Request Cursor --- */
/* When any HTMX request is in flight (handled by global-events.js),
   change the cursor for the entire page to a waiting/progress cursor.
   This provides immediate feedback. The `!important` flag ensures this
   overrides other cursor styles (e.g., pointer on buttons) during the request. */
body.cursor-wait, body.cursor-wait * {
    cursor: wait !important;
}

/* --- Full Page Loading Indicator --- */
.full-page-indicator {
    opacity: 0;
    visibility: hidden;
    display: flex;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2000; /* High z-index to be on top of everything */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--brand-text-muted);
    backdrop-filter: blur(4px);
}

/* Show the indicator when the body has the htmx-request class */
body.htmx-request .full-page-indicator {
    opacity: 1;
    visibility: visible;
}

.full-page-indicator .spinner {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* --- Navigation Tooltips --- */
[data-tooltip] {
    position: relative;
}

/* The Tooltip Arrow/Pointer and Body */
[data-tooltip]::before,
[data-tooltip]::after {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease 0.4s, visibility 0.2s ease 0.4s;
}

/* The Tooltip Arrow/Pointer */
[data-tooltip]::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--brand-dark-gray) transparent;
    z-index: 1000;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 14px; /* Account for the arrow */
    padding: 6px 10px;
    background-color: var(--brand-dark-gray);
    color: var(--brand-white);
    font-size: 0.75rem;
    border-radius: 4px;
    white-space: normal; /* Allow wrapping */
    width: max-content;
    max-width: 250px; /* Constrain width */
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    pointer-events: none;
    font-weight: 400;
    text-transform: none;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

label i.fa-info-circle {
    margin-left: 0.3rem;
    color: var(--brand-text-muted);
    cursor: help;
    font-size: 0.85rem;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* Metadata Details in Edit Forms */
details.metadata-details > summary {
    list-style: none;
}
details.metadata-details > summary::-webkit-details-marker {
    display: none;
}
details.metadata-details[open] > summary .fa-chevron-down {
    transform: rotate(180deg);
}
details.metadata-details > summary .fa-chevron-down {
    transition: transform 0.2s ease;
}

label i.fa-info-circle:hover {
    opacity: 1;
    color: var(--brand-accent-orange);
}

/* --- Project Page Specific Styles --- */
.project-actions-toolbar {
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
}
.detail-goal {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border-left: 4px solid #007bff;
    border-radius: 4px;
}
.detail-goal h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1em;
    color: #333;
}
.detail-goal p {
    margin-bottom: 0;
    color: #555;
}
/* --- Research Page Specific Styles --- */
.research-form {
    display: flex;
    flex-direction: row; /* Override the default form stacking */
    flex-wrap: nowrap; /* Keep form elements on a single line */
    gap: 0.75rem;
    align-items: center; /* Vertically center form elements */
    /* max-width is removed to allow the form to span the full width of its container */
    margin-bottom: 2rem; /* Add spacing below the form */
}
.research-form input[type="search"] {
    flex-grow: 1;
    min-width: 250px; /* A more reasonable minimum width */
    width: auto; /* Override base width: 100% to allow flex-grow to work correctly */
}
.research-form button i {
    margin-right: 0.5rem;
    font-size: 0.9rem; /* Slightly smaller icon for the search button */
}

/* Research Header & Actions */
.research-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.research-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--brand-dark-gray);
}
.research-actions {
    display: flex;
    gap: 0.5rem;
}

/* Hide the initial message when a search is in progress */
#research-results.htmx-request .initial-message {
    display: none;
}

/* Ensure the skeleton loader (div) doesn't take up space when not active */
#research-results div.htmx-indicator {
    display: none;
}
#research-results.htmx-request > div.htmx-indicator,
#research-results .htmx-request > div.htmx-indicator {
    display: block;
}

.search-summary {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem 1.5rem; /* Reduced vertical padding */
    margin-bottom: 2rem;
}
.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.summary-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--brand-dark-blue);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.summary-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.summary-actions .htmx-request .button-text {
    display: none;
}
.summary-actions .htmx-request .htmx-indicator {
    display: inline-block;
}

.search-result-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.favicon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: #f0f4f8; /* Fallback color */
}
.search-result-item h3 a {
    color: #1a0dab;
    text-decoration: none;
    font-weight: normal;
}
.search-result-item h3 a:hover {
    color: var(--brand-accent-orange);
    text-decoration: underline;
}

/* --- Research Form Select Dropdown --- */
.research-form select {
    /* Reset appearance to allow custom styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Match other inputs */
    padding: var(--input-padding-y) 2.5rem var(--input-padding-y) var(--input-padding-x); /* Adjust right padding for arrow */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-color-primary);
    background-color: var(--brand-white);
    cursor: pointer;
    height: var(--input-height);

    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* --- Modal Form Specifics --- */
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Ensure footer doesn't shrink */
}

.modal__footer.space-between {
    justify-content: space-between;
}

/* Disable modal footer buttons during a request to prevent duplicate submissions */
#app-modal-content.htmx-request .modal__footer button {
    pointer-events: none;
    opacity: 0.65;
}

.asset-selection-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--brand-bg-light);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.asset-checkbox {
    margin-top: 0; /* Override default form-group margin */
    background-color: var(--brand-white);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.asset-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    text-transform: none;
    font-size: 0.95rem;
    color: var(--brand-dark-blue);
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.form-group-checkbox input[type="checkbox"] {
    width: auto; /* Don't make checkbox full width */
    flex-grow: 0;
}

.form-group-checkbox label {
    font-weight: 500;
    text-transform: none;
    font-size: 0.9rem;
    color: var(--brand-dark-gray);
}

/* --- Micromodal Styling --- */
.modal {
    font-family: 'Be Vietnam Pro', sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal__container {
  background-color: var(--brand-white);
  width: 90%;
  max-width: 800px;
  max-height: 90vh; /* Set a max height */
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding: 1.5rem; /* Add padding here instead of container */
  flex-shrink: 0; /* Ensure header doesn't shrink */
}

.modal__title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--brand-dark-gray);
}

.modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.modal__close:before {
  content: '\00d7';
  font-size: 2rem;
  color: var(--brand-text-muted);
  line-height: 1;
}

.modal__content {
  /* This is the main content area that will be swapped by HTMX.
     It needs to be a flex container to manage its children (the view wrapper and the footer). */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow it to fill the available space in the container */
  min-height: 0; /* Crucial for allowing flex children to shrink and scroll correctly */
  overflow: hidden; /* Hide any overflow from this container itself */
}
.modal-view-content-wrapper, .modal-content-padded-scrolling {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow content to fill space */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
  padding: 1.5rem; /* Add consistent internal padding */
  line-height: 1.6;
  min-height: 0; /* Allow shrinking for scroll */
}
/* When the image modal is used, its wrapper needs to be a positioning context */
.modal-view-content-wrapper[style*="padding: 0"] {
    position: relative;
}

.modal-actions-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--brand-bg-light);
    flex-shrink: 0; /* Prevent this toolbar from shrinking */
}


/* Animation */
.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mm-fadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mm-slideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mm-fadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mm-slideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.modal__content {
  /* ... existing styles ... */
  display: flex; /* Make this the primary flex container */
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}

/* The container for the standard image view, ensures it's centered */
.image-viewer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /*background-color: var(--brand-bg-light);*/
}

/* --- ToastUI Image Editor Integration --- */

/* The container for the standard image view, ensures it's centered */
.image-viewer-container {
    display: flex;
    /* ... existing styles ... */
}

/* This is the iframe itself, it should fill the entire modal content area */
.image-editor-iframe {
    width: 100%;
    flex-grow: 1;
    border: none;
    /* display: none; is handled inline */
}

/* When the editor is active, the app-layout becomes a flex column */
.app-layout.editor-mode {
    flex-direction: column;
    gap: 0; /* Remove gap between header and iframe container */
}

.editor-header-container {
    flex-shrink: 0; /* Prevent the header from shrinking */
    padding-bottom: 1rem; /* Space between header and editor */
}

.editor-iframe-container {
    flex-grow: 1; /* Allow the iframe container to fill remaining space */
    min-height: 0; /* Critical for flex-grow to work correctly */
}

.image-editor-full-pane-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* New style to make the app-layout go full-screen for the editor */
.app-layout.editor-mode {
    position: fixed;
    background-color: var(--brand-bg-light);
    top: calc(var(--header-height) + var(--nav-height)); /* Dynamic positioning */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto; /* Let top/bottom positioning define the height */
    z-index: 100; /* Ensure it's above other content */
}

@keyframes mm-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mm-slideIn { from { transform: translateY(15%); } to { transform: translateY(0); } }
@keyframes mm-slideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } }
.search-result-url {
    font-size: 0.85rem;
    color: #5f6368;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    word-break: break-all; 
}
.search-result-url a {
    color: inherit;
}
.new-item-container {
    display: flex;
    flex-direction: column;
}

.create-with-ai-section {
    text-align: center;
    padding: 2rem;
    background-color: var(--brand-bg-light);
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    margin-bottom: 2rem;
} 

.create-with-ai-section h2 {
    margin-top: 0;
    color: var(--brand-dark-blue);
}

.create-with-ai-section p {
    color: var(--brand-text-muted);
    max-width: 450px;
    margin: 0 auto 1.5rem auto;
}

.create-with-ai-button {
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
}

.create-with-ai-button i {
    margin-right: 0.5rem;
}

.manual-creation-divider {
    text-align: center;
    margin-bottom: 2rem;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.manual-creation-divider::before,
.manual-creation-divider::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--border-color);
}

.new-item-container .project-edit-form,
.new-item-container .task-edit-form {
    height: auto;
}

.prompt-templates { margin-top: 1.5rem; }
.prompt-templates label { font-weight: 600; color: var(--brand-dark-gray); margin-bottom: 0.75rem; display: block; }
.prompt-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.prompt-button { background-color: var(--brand-bg-light); color: var(--brand-text-muted); padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 500; border: 1px solid var(--border-color); border-radius: 8px; text-align: left; justify-content: flex-start; }
.prompt-button:hover { background-color: var(--border-color); border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--brand-dark-blue); }
.prompt-button.selected { background-color: rgba(255, 153, 0, 0.15); border-color: var(--brand-accent-orange); color: var(--brand-dark-blue); font-weight: 600; }
.prompt-button i { margin-right: 0.75rem; color: var(--brand-accent-orange); width: 16px; }

.role-selector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.role-option {
    display: flex;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.role-option:hover {
    background-color: var(--brand-bg-light);
    border-color: var(--brand-accent-orange);
}

.role-option input[type="radio"] {
    margin-top: 0.2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.role-option label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 100%;
}

.modal-form-divider {
    text-align: center;
    margin: 1.5rem 0;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-form-divider::before,
.modal-form-divider::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--border-color);
}

.confirmation-modal-content {
    padding: 2rem;
    text-align: center;
}
.confirmation-modal-content p:first-of-type {
    font-size: 1.1rem;
    color: var(--brand-dark-gray);
    margin-bottom: 0.5rem;
}
.confirmation-modal-content p:last-of-type {
    color: var(--brand-text-muted);
}
.confirmation-modal-content strong {
    font-weight: 600;
}

.modal__footer .primary i {
    margin-right: 0.5rem;
}

.detail-actions button i,
.note-actions button i,
.list-header-actions button i,
.empty-state-actions button i,
.project-actions-toolbar button i,
.task-actions button i {
    margin-right: 0.3rem;
}

.research-form .htmx-indicator {
    display: none;
}
.research-form.htmx-request {
    pointer-events: none;
}
.research-form.htmx-request .button-text {
    display: none;
}
.research-form.htmx-request .htmx-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}
.related-topics {
    margin-top: 2rem;
}
.related-topics h4 {
    margin-bottom: 1rem;
    color: #212529;
}
.related-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.related-topic-button {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.related-topic-button:hover {
    background-color: #ced4da;
}
.related-topic-button i {
    margin-right: 0.4rem;
}
.external-search-links {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

/* Quick Search Chips (Empty State) */
.quick-search-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.5rem 1rem 0.85rem 1rem; /* Prevent shadow clipping */
    margin-top: 1.25rem; /* Adjusted for top padding */
    scrollbar-width: none;
    /* Center safely without flexbox data-loss */
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
    flex-shrink: 0;
}
.quick-search-chips::-webkit-scrollbar { display: none; }
.quick-search-chip {
    background: var(--brand-white);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--brand-text-muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.quick-search-chip:hover {
    border-color: var(--brand-accent-orange);
    color: var(--brand-accent-orange);
    background: rgba(255, 153, 0, 0.05);
    transform: translateY(-1px);
}
.quick-search-chip:active {
    transform: scale(0.96);
}

/* --- History Ribbon Thumbnails --- */
.history-thumbnail-link {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.history-thumbnail-link:hover:not(.active) {
    border-color: var(--brand-primary);
}

.history-thumbnail-link.active {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255,153,0,0.2);
}

/* --- Main Image Hover Overlay --- */
.main-image-action-btn {
    opacity: 0;
}

.main-image-action-btn:hover,
.main-image-action-btn.active {
    background: var(--brand-white) !important;
    color: var(--brand-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.asset-preview:hover .main-image-action-btn,
.main-image-action-btn:focus {
    opacity: 1 !important;
}

/* --- Research Results Scrolling --- */
#research-results {
    flex-grow: 1; /* Allow the results to fill the remaining space */
    overflow-y: auto; /* Enable vertical scrolling when content overflows */
    padding: 1rem 1.5rem 1.5rem; /* Add internal padding to match container */
}

/* Example CSS for the new empty state component */
.detail-pane-empty-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--text-color-secondary);
    box-sizing: border-box;
    height: 100%;
    position: relative; /* Establishes a stacking context for the watermark. */
    overflow: hidden; /* Keeps the watermark within the rounded corners. */
}

.detail-pane-empty-enhanced .empty-state-icon i, .detail-pane-empty-enhanced .empty-state-icon svg {
    color: var(--border-color);
    margin-bottom: 1.5rem;
    transition: transform 0.5s ease;
}

.detail-pane-empty-enhanced:hover .empty-state-icon i, 
.detail-pane-empty-enhanced:hover .empty-state-icon svg {
    transform: scale(1.05) translateY(-5px);
    color: var(--brand-accent-orange);
    opacity: 0.8;
}

.detail-pane-empty-enhanced h2 {
    color: var(--text-color-primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.detail-pane-empty-enhanced p {
    max-width: 400px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.detail-pane-empty-enhanced .empty-state-actions {
    display: flex;
    gap: 1rem;
}

/* --- Empty Pane Watermark --- */
/* Adds a subtle background pattern to empty detail panes for visual polish,
   making the application feel more complete even when there is no data to show. */
/* The ::before pseudo-element creates the dot-grid pattern. It's placed at z-index: 0,
   acting as a background layer within the element's stacking context. */
.detail-pane-empty-enhanced::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 25px 25px;
    opacity: 0.3;
    z-index: 0; /* Base layer of the stacking context. */
}

/* The > * selector targets all direct children (icon, h2, p, etc.) and lifts them
   to a higher z-index, ensuring they appear on top of the watermark pattern. */
.detail-pane-empty-enhanced > * {
    position: relative;
    z-index: 1;
}

.detail-pane-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--brand-text-muted);
    gap: 1rem;
    box-sizing: border-box;
}

/* --- Split Button --- */
.split-button-container {
    position: relative;
    display: inline-flex;
}

.split-button-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.split-button-container .split-button-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #d4d9e0; /* A slightly darker border for the split */
}

.split-button-dropdown {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-radius: 0 8px 8px 0!important;
    padding: 0.5rem 0.75rem; /* Tighter padding for the arrow */
}

.split-button-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: var(--brand-white);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.split-button-menu.show {
    display: block;
}

.split-button-menu a {
    color: var(--brand-text-muted);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
}

.split-button-menu a:hover {
    background-color: var(--brand-bg-light);
}

/* Prevent layout flicker/crash on split buttons caused by transform loops */
.split-button-container button:hover {
    transform: none;
}

/* --- Kanban Board View --- */
.app-layout.kanban-mode {
    flex-direction: column;
    height: 100%; /* Ensure full height */
    display: flex;
    gap: 1rem;
}

/* The board container itself */
.kanban-board {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    flex-grow: 1;
}

.kanban-column {
    width: 320px;
    flex-shrink: 0;
    background-color: #f8fafc; /* Subtle track background */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    border: 1px solid rgba(0,0,0,0.03);
}

.kanban-column-header {
    padding: 1rem 1.25rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-dark-gray);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.kanban-task-list {
    padding: 0.75rem;
    flex-grow: 1;
    overflow-y: auto;
}

/* Override default li styles for Kanban cards */
.kanban-task-list .task-item {
    cursor: grab;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.kanban-task-list .task-item:active {
    cursor: grabbing;
    transform: scale(1.02);
}

/* Style for the placeholder element when dragging a task in Kanban view */
.sortable-ghost {
    background-color: rgba(255, 153, 0, 0.05) !important;
    border: 2px dashed var(--brand-accent-orange) !important;
    opacity: 0.6 !important;
}

.sortable-chosen {
    background-color: var(--brand-white);
    box-shadow: var(--shadow-lg) !important;
    cursor: grabbing !important;
}

.sortable-drag {
    opacity: 1 !important;
    transform: rotate(2deg) scale(1.02); /* Adds a physical 'lifted' feel */
    cursor: grabbing !important;
}

/* --- Calendar View --- */
.app-layout.calendar-mode {
    flex-direction: column;
    height: 100%;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
    gap: 1rem;
}

#task-calendar-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: var(--brand-white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    min-height: 0;
    overflow: hidden;
}

#calendar {
    flex-grow: 1;
    min-height: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
}

/* --- FullCalendar Overrides --- */
:root {
    --fc-button-bg-color: var(--brand-white);
    --fc-button-border-color: #cbd5e1;
    --fc-button-text-color: var(--brand-text-muted);
    --fc-button-hover-bg-color: #f8fafc;
    --fc-button-hover-border-color: #94a3b8;
    --fc-button-active-bg-color: var(--brand-accent-orange);
    --fc-button-active-border-color: var(--brand-accent-orange);
    --fc-today-bg-color: rgba(255, 153, 0, 0.05);
    --fc-event-bg-color: var(--brand-dark-blue);
    --fc-event-border-color: var(--brand-dark-blue);
}

.fc .fc-button {
    border-radius: 8px !important;
    padding: 0 var(--input-padding-x) !important;
    height: var(--input-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    text-transform: capitalize !important;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active {
    color: var(--brand-white) !important;
}

.fc .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fc .fc-button-group {
    gap: 0.5rem;
}
.fc .fc-button-group > .fc-button {
    margin: 0 !important; /* Removes the default negative margins that pull buttons together */
}
.fc .fc-toolbar-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-dark-gray);
    font-size: 1.25rem;
}

.fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--border-color) !important;
}
.fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-color) !important;
    border-radius: 8px;
    overflow: hidden;
}
.fc .fc-col-header-cell-cushion {
    padding: 0.75rem 0.5rem !important;
    color: var(--brand-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}
.fc .fc-daygrid-day-number {
    color: var(--text-primary);
    font-weight: 500;
    padding: 0.5rem !important;
}
.fc-event {
    border-radius: 6px;
    padding: 3px 4px;
    font-size: 0.8rem;
    font-weight: 500;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
}
.fc-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.fc-event .fc-event-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hidden {
    display: none !important;
}

/* --- Agent Switcher Modal --- */
.agent-switcher-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

/* --- Agent Switcher Polish --- */
.agent-select-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem !important; /* Override default button padding */
    height: auto;
    min-height: 70px;
    text-transform: none !important; /* Override default button uppercase */
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.agent-select-btn:hover:not(:disabled) {
    border-color: var(--brand-primary);
    background-color: var(--bg-subtle);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.agent-select-btn:hover:not(:disabled) .action-icon {
    transform: translateX(4px);
    color: var(--brand-primary);
}

.agent-select-btn.current {
    background-color: var(--bg-subtle);
    border-color: var(--border-color);
    opacity: 1 !important; /* Override default disabled opacity */
    cursor: default;
}

.agent-info-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 1.2rem;
}

.agent-select-btn.current .agent-avatar {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border-color: var(--brand-primary);
}

.agent-details {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.agent-name-display {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-primary);
}

.agent-status {
    font-size: 0.8rem;
    color: var(--brand-text-muted);
    font-weight: 400;
}

.current-badge {
    color: var(--brand-primary);
    font-size: 1.1rem;
}

.agent-select-btn .action-icon {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}
/* --- Custom Fields Styling --- */

/* For the detail view */
.detail-custom-fields-inner {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure this container takes full width of its parent flex item */
    background-color: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.detail-custom-fields-inner > .meta-label {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--brand-dark-blue);
    font-size: 0.85rem;
}

.custom-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem; /* row-gap column-gap */
    width: 100%; /* Ensure it takes full width of parent */
}

/* Override nested meta-item styles within the custom fields grid */
.custom-fields-grid .meta-item {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.custom-fields-grid .meta-label.custom-field-key-label {
    font-size: 0.8rem;
    font-weight: 500; /* Less emphasis than the main meta-label */
    color: var(--brand-text-muted);
    text-transform: capitalize; /* Use capitalize for custom field keys */
}

/* For the form inputs */
.custom-field-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
    background: var(--bg-subtle);
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.custom-field-row input {
    background-color: var(--brand-white);
    margin: 0;
}

.custom-field-row input.custom-field-key {
    flex: 1;
    width: 100%;
    flex-grow: 1 !important;
}

.custom-field-row input.custom-field-value {
    flex: 2;
    width: 100%;
    flex-grow: 2 !important;
}

.remove-field-btn {
    background: var(--brand-white);
    border: 1px solid var(--border-color);
    color: var(--brand-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    min-height: auto;
    transition: all 0.2s ease;
}
.remove-field-btn:hover {
    color: var(--error-red);
    border-color: var(--error-red);
    background: #fef2f2;
    transform: translateY(-1px);
}

/* --- Left Nav Custom Filters --- */
.custom-filter-row {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    background: var(--brand-white);
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-top: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-filter-row:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.custom-filter-row input[type="text"] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0.25rem 0.5rem;
    min-height: 28px;
    font-size: 0.85rem;
    margin: 0;
    width: 100%;
}

.custom-filter-row input.filter-key-input {
    flex: 1;
    min-width: 60px;
}

.custom-filter-row input.filter-value-input {
    flex: 1.5;
    min-width: 80px;
}

.custom-filter-row input[type="text"]:focus {
    background-color: var(--bg-subtle) !important;
    border-radius: 4px;
}

.custom-filter-separator {
    color: var(--border-hover);
    font-size: 0.9rem;
    font-weight: 600;
}

.custom-filter-row .remove-filter-btn {
    color: var(--brand-text-muted);
    padding: 0.25rem;
    opacity: 0.5;
    min-height: auto;
    margin-right: 0.1rem;
}

.custom-filter-row:hover .remove-filter-btn {
    opacity: 1;
}

.custom-filter-row .remove-filter-btn:hover {
    color: var(--error-red);
    background-color: #fef2f2;
}

.add-filter-btn {
    align-self: flex-start;
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    color: var(--brand-text-muted);
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    min-height: auto;
}

.add-filter-btn:hover {
    color: var(--brand-dark-gray);
    border-color: var(--brand-text-muted);
    background: var(--bg-subtle);
    transform: none;
}

/* --- Home/Dashboard Specific Styles --- */
.app-layout.home-layout {
    flex-direction: column; /* Stack header and grid vertically */
    height: 100%; /* Fill the container */
    min-height: 0; /* Allow shrinking to viewport */
    overflow-y: auto; /* Enable vertical scrolling */
    flex-grow: 1;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dashboard-header h1 {
    font-size: 2rem;
    color: var(--brand-dark-gray);
}

.dashboard-header h1 #user-name {
    color: var(--brand-accent-orange);
}

.dashboard-layout {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-grow: 1; /* Allow grid to fill remaining space */
    align-items: flex-start; /* Prevent columns from stretching to match height */
}

.dashboard-column-main {
    flex: 2; /* Takes up 2/3 of the space */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.dashboard-column-side {
    flex: 1; /* Takes up 1/3 of the space */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Workflow Quick Start --- */
.workflow-start-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.workflow-step {
    background-color: var(--brand-white);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.2s ease;
}

.workflow-step:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.workflow-step .step-icon {
    font-size: 1.5rem;
    color: var(--brand-accent-orange);
    background-color: rgba(255, 153, 0, 0.1);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.workflow-step h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; color: var(--brand-dark-gray); }
.workflow-step p { margin: 0 0 1.5rem 0; font-size: 0.9rem; color: var(--brand-text-muted); }

.step-action {
    background-color: var(--brand-bg-light);
    color: var(--brand-dark-blue);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.step-action:hover {
    background-color: var(--brand-accent-orange);
    color: white;
    border-color: var(--brand-accent-orange);
}

.dashboard-card {
    background-color: var(--brand-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    min-height: 150px; /* Ensure cards have a minimum height even if empty */
    transition: box-shadow 0.2s ease;
    flex-shrink: 0;
}

/* --- Dashboard Icons Polish --- */
.dashboard-card h3 i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Cards that should grow to fill available space and scroll */
.dashboard-card-scrollable {
    flex-grow: 1;
}

/* Hover effect for dashboard cards to imply interactivity/depth */
.dashboard-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.dashboard-card:active {
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.dashboard-card:hover h3 i {
    transform: scale(1.1) rotate(2deg);
}

.dashboard-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--brand-dark-gray);
    margin-top: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-card h3 i {
    color: var(--brand-accent-orange);
}

.dashboard-card h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--brand-text-muted);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.dashboard-task-list, .recent-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto; /* Enable scrolling for long lists */
}

.dashboard-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid var(--border-color);
    border-left: 4px solid transparent;
}

.dashboard-task-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: var(--border-hover);
}

.dashboard-task-item.status-open { border-left-color: var(--status-open-text); }
.dashboard-task-item.status-in-progress { border-left-color: var(--status-progress-text); }
.dashboard-task-item.status-needs-review { border-left-color: var(--status-review-text); }
.dashboard-task-item.status-completed { border-left-color: var(--status-completed-text); }

.dashboard-task-item strong {
    font-weight: 500;
    color: var(--brand-dark-gray);
}

.dashboard-task-item .task-item-meta {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-task-item.status-overdue {
    border-left-color: var(--error-red) !important;
}

.recent-activity-item {
    margin-bottom: 0.5rem;
}

.recent-activity-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--brand-bg-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--brand-dark-gray);
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s;
    border: 1px solid var(--border-color);
}

.recent-activity-item a:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: var(--border-hover);
    transform: translateX(2px);
}

.recent-activity-item i {
    color: var(--brand-accent-orange);
}

.recent-activity-item .activity-date {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    margin-left: auto; /* Push date to the right */
}

.empty-state-message {
    text-align: center;
    color: var(--brand-text-muted);
    margin-top: 2rem;
}

/* Adjustments for smaller screens */
@media (max-width: 800px) {
    /* Ensure horizontal padding is reduced on mobile so content isn't squished */
    .page-header-bar, .detail-header, .detail-meta-ribbon, 
    .detail-content-area, .mobile-back-button-wrapper, 
    .note-edit-form .form-fields, .task-edit-form .form-fields, 
    .asset-edit-form .form-fields, .project-edit-form .form-fields {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .dashboard-header h1 {
        font-size: 1.5rem;
    }
    .dashboard-layout {
        flex-direction: column;
    }
    .dashboard-card {
        max-height: none; /* Allow cards to grow on mobile */
    }
}

/* --- Cycles / Sprints View --- */
.project-detail-tab-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1; /* Grow to fill the wrapper */
    min-height: 0; /* Allow shrinking for scroll */
    overflow: hidden; /* Contain children */
}

.status-indicator { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px; }

/* --- Comments Section --- */
/* Comments Sidebar */
.comments-sidebar {
    position: absolute;
    top: 0;
    right: -350px; /* Hidden by default */
    width: 350px;
    height: 100%;
    background-color: var(--brand-white);
    border-left: 1px solid var(--border-color);
    box-shadow: -5px 0 15px rgba(0,0,0,0.05);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.comments-sidebar.open {
    right: 0;
}

.comments-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.comments-sidebar-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--brand-dark-gray);
}

/* Adjust detail wrappers to allow absolute positioning of sidebar */
.note-detail-wrapper,
.task-detail-wrapper,
.project-detail-wrapper {
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scroll when sidebar slides in */
}

/* Ensure content area scrolls independently */
.detail-content-area {
    flex: 1; /* Grow to fill space */
    overflow-y: auto;
    min-height: 0; /* Allow shrinking */
    padding: 0 1.5rem 6rem 1.5rem; 
}

.comments-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-grow: 1; /* Fill available space */
    overflow-y: auto; /* Scroll within sidebar */
}
.comment-item {
    display: flex;
    gap: 0.75rem;
}
.comment-avatar .assignee-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}
.comment-body {
    background-color: var(--brand-bg-light);
    padding: 0.75rem;
    border-radius: 0 12px 12px 12px;
    flex-grow: 1;
}
.comment-item-own .comment-body {
    background-color: var(--status-open-bg); /* Use theme-aware token instead of hardcoded hex */
}
.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    align-items: center; /* Align author and meta vertically */
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.comment-author { font-weight: 600; color: var(--brand-dark-blue); }
.comment-date { color: var(--brand-text-muted); }
.comment-content { font-size: 0.95rem; color: var(--brand-dark-gray); line-height: 1.4; }
.comments-empty-state { color: var(--brand-text-muted); font-style: italic; font-size: 0.9rem; margin-bottom: 1rem; }

.comment-form {
    display: flex;
    gap: 0.5rem;
}
.comment-form input {
      border-radius: 8px;
    padding: var(--input-padding-y) var(--input-padding-x);
    min-height: var(--input-height);
}
.comment-form button {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    /*padding: 0; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
}

.comment-form button i {
    margin: 0;
    transform: translateX(-2px) translateY(1px); /* Optical centering for paper plane */
}

/* Comment Actions */
.comment-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0; /* Hide by default */
    transition: opacity 0.2s ease;
}
.comment-item:hover .comment-actions {
    opacity: 1; /* Show on hover */
}
.icon-btn {
    background: none;
    border: none;
    padding: 0.2rem;
    color: var(--brand-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    min-height: auto;
}
.icon-btn:hover { color: var(--brand-accent-orange); transform: none; }
.icon-btn.danger:hover { color: var(--error-red); }

.comment-edit-form textarea {
    min-height: 60px;
    margin-bottom: 0.5rem;
}

/* --- Notification Center --- */
.notification-container {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-bell {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--brand-text-muted);
    position: relative;
    padding: 0.5rem;
    transition: color 0.2s;
}

.notification-bell:hover {
    color: var(--brand-accent-orange);
}

/* Wrapper for the Agent Activity Icon + Dropdown */
.agent-activity-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Processing state for background tasks */
.agent-activity-btn.processing::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--brand-accent-orange);
    border-radius: 50%;
    border: 2px solid var(--brand-white);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(255, 153, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); }
}

.agent-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    background-color: #fff7ed; /* Light Orange */
    color: #c2410c; /* Dark Orange */
    border: 1px solid #fed7aa; /* Orange Border */
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    z-index: 10;
}
.agent-status-pill:hover { background-color: #ffedd5; }

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--error-red);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: none; /* Hidden if 0 */
    align-items: center;
    justify-content: center;
}

.notification-badge.show {
    display: flex;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px); /* Match spacing of the hamburger menu dropdown */
    right: 0;
    width: 350px;
    max-width: calc(100vw - 2rem); /* Prevent clipping off the screen on small mobile devices */
    background: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow: hidden;
}

.notification-dropdown.show {
    display: block;
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.notification-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    position: relative;
}

.notification-item:hover { background-color: var(--brand-bg-light); }
.notification-item.unread { background-color: #fff7ed; } /* Light orange tint */

.notification-header { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--brand-text-muted); margin-bottom: 0.25rem; }
.notification-agent { font-weight: 600; text-transform: uppercase; }
.notification-title { font-weight: 600; font-size: 0.9rem; color: var(--brand-dark-gray); margin-bottom: 0.25rem; }
.notification-message { font-size: 0.85rem; color: var(--brand-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notification-dot { width: 8px; height: 8px; background-color: var(--brand-accent-orange); border-radius: 50%; margin-top: 0.5rem; }
.empty-notifications { padding: 2rem; text-align: center; color: var(--brand-text-muted); font-style: italic; }

.notification-clear-btn {
    background: none;
    border: none;
    color: var(--brand-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.notification-item:hover .notification-clear-btn { opacity: 1; }
.notification-clear-btn:hover { color: var(--error-red); }

.notification-actions-bar {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}


/* Threaded Comments */
.comment-replies {
    margin-left: 2rem;
    border-left: 2px solid var(--border-color);
    padding-left: 1rem;
    margin-top: 0.5rem;
}
.comment-reply-box {
    margin-left: 3.5rem; /* Align with content */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.comment-annotation-label {
    font-size: 0.75rem;
    color: var(--brand-accent-orange);
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* --- Cycle Planning Board --- */
.planning-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
}

.planning-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.planning-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.planning-board {
    display: flex;
    gap: 1.5rem;
    flex-grow: 1;
    overflow: hidden; /* Columns scroll internally */
    min-height: 0;
}

.planning-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-bg-light);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    min-width: 0; /* Allow flex shrink */
}

.planning-column-header {
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--brand-dark-gray);
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255,255,255,0.5);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.planning-task-list {
    padding: 0.75rem;
    flex-grow: 1;
    overflow-y: auto;
}

/* --- Dashboard Strategy Section --- */
.dashboard-strategy-container {
    background: var(--bg-strategy-gradient);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.strategy-title {
    font-size: 1.5rem;
    color: var(--brand-dark-gray);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.strategy-input-wrapper {
    max-width: 600px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.strategy-input-wrapper form {
    display: flex;
    gap: 0.5rem;
}

.strategy-input {
    width: 100%;
    padding: 1rem 1.5rem;
    padding-right: 3.5rem; /* Make room for the button */
    font-size: 1.1rem;
    border-radius: 24px;
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.strategy-input:focus {
    border-color: var(--brand-accent-orange);
    box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.1);
    outline: none;
}

.strategy-send-btn {
    position: absolute;
    right: 8px;
    bottom: 8px; /* Anchor to bottom for multi-line support */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-accent-orange);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    padding: 0; /* Override default button padding */
}

.strategy-send-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.strategy-chips {
    display: flex;
    gap: 0.75rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.5rem 1rem 0.85rem 1rem; /* Prevent shadow clipping on hover */
    scrollbar-width: none;
    /* Center safely without flexbox data-loss */
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
    flex-shrink: 0;
}
.strategy-chips::-webkit-scrollbar { display: none; }

.strategy-chip {
    background: white;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--brand-text-muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.strategy-chip i {
    margin-right: 0.5rem;
}

.strategy-chip:hover {
    border-color: var(--brand-accent-orange);
    color: var(--brand-accent-orange);
    background: rgba(255, 153, 0, 0.05);
    transform: translateY(-1px);
}
.strategy-chip:active {
    transform: scale(0.96);
}

/* Secondary/More Chip Style */
.strategy-chip.secondary {
    background-color: var(--brand-bg-light);
    border-style: dashed;
    color: var(--brand-dark-blue);
}
.strategy-chip.secondary:hover {
    background-color: var(--border-hover);
    border-style: solid;
}

/* Shimmer animation for accent chips */
@keyframes shimmer-sweep {
    0% { transform: translateX(-150%) skewX(-20deg); }
    15% { transform: translateX(150%) skewX(-20deg); }
    100% { transform: translateX(150%) skewX(-20deg); }
}

.strategy-chip.accent {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border-color: var(--brand-primary);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.strategy-chip.accent::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(-20deg);
    animation: shimmer-sweep 8s ease-in-out infinite;
    animation-delay: 3s;
    pointer-events: none;
}
.strategy-chip.accent:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

/* --- Agent Chat Sidebar --- */
.agentchat-sidebar {
    position: fixed;
    top: calc(var(--header-height) + var(--nav-height));
    right: -500px; /* Hidden state */
    width: 500px;
    height: calc(100vh - var(--header-height) - var(--nav-height));
    background: var(--bg-surface, #ffffff);
    border-left: 1px solid var(--border-color, #e2e8f0);
    box-shadow: -5px 0 15px rgba(0,0,0,0.05);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    z-index: 900;
}

.agentchat-sidebar.open {
    right: 0;
}

.agentchat-sidebar.maximized {
    width: 100%;
    border-left: none;
}

/* Maximized Chat Layout Enhancements */
.agentchat-sidebar.maximized .agentchat-header,
.agentchat-sidebar.maximized .chat-history,
.agentchat-sidebar.maximized .chat-input-area,
.agentchat-sidebar.maximized .chat-context-indicator,
.agentchat-sidebar.maximized #chat-loading {
    /* Center content in a readable column (approx 800px wide) */
    padding-inline: max(2rem, calc(50% - 400px));
}

.agentchat-sidebar.maximized .chat-message {
    max-width: 100%; /* Allow messages to fill the centered column */
}

.agentchat-header {
    padding: 0.4rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--brand-white);
}

.agentchat-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.agent-email-subtitle {
    font-size: 0.75rem;
    color: var(--brand-text-muted);
    margin-left: 1.7rem; /* Align with text of h3 (icon width + gap) */
}

.chat-context-indicator {
    padding: 0.5rem 1rem;
    background-color: var(--bg-chat-context);
    border-bottom: 1px solid var(--border-chat-context);
    font-size: 0.8rem;
    color: var(--text-chat-context);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-history-dropdown {
    background: var(--bg-surface, #ffffff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    max-height: 300px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.history-scroll-area {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

.history-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s;
}

.history-item:hover {
    background-color: #f8fafc;
}

.history-item.empty { cursor: default; color: #94a3b8; font-style: italic; text-align: center; }

.history-date { font-size: 0.7rem; color: #94a3b8; margin-bottom: 0.2rem; }
.history-preview { font-size: 0.85rem; color: var(--text-primary, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.history-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
    background-color: var(--brand-bg-light);
    flex-shrink: 0;
}

.chat-history-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Increased to give breathing room for bottom-aligned message actions */
}

.chat-scroll-bottom {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-surface);
    color: var(--brand-text-muted);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    z-index: 50;
}

.chat-scroll-bottom.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.chat-scroll-bottom:hover {
    background-color: var(--bg-subtle);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.chat-message {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 85%;
}

.chat-message.user {
    align-self: flex-end;
}

.chat-message.agent {
    align-self: flex-start;
}

.message-bubble-wrapper {
    position: relative;
    width: fit-content;
    max-width: 100%;
    min-width: 0; /* Crucial: Allows flex items to shrink below their intrinsic content size */
}

.message-content {
    padding: 0.85rem 1.1rem; /* Generous breathing room for both agent and user */
    border-radius: 0.75rem;
    font-size: 0.95rem; /* Increased base size for optimal readability */
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    min-width: 0; /* Crucial: Allows flex items to shrink below their intrinsic content size */
}

/* --- Markdown Content Styling within Chat --- */

/* Remove default margins for the first and last elements to fit the bubble */
.message-content > *:first-child { margin-top: 0; }
.message-content > *:last-child { margin-bottom: 0; }

/* Optimal spacing for chat context */
.message-content p { margin-bottom: 0.75rem; } /* Slightly more space to prevent walls of text */
.message-content ul, .message-content ol { margin-bottom: 0.75rem; padding-left: 1.5rem; }
.message-content li { 
    margin-bottom: 0.25rem;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    cursor: auto;
}
.message-content ul li { list-style-type: disc; }
.message-content ol li { list-style-type: decimal; }

/* Tables in Chat & Markdown (Modern Horizontal Striping) */
.message-content table, .markdown-content table {
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

.message-content th, .message-content td,
.markdown-content th, .markdown-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    /* Remove vertical borders for a cleaner look */
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
    font-size: 0.85rem;
}

.message-content th, .markdown-content th {
    background-color: rgba(0,0,0,0.03);
    font-weight: 600;
    color: var(--brand-dark-gray);
    border-bottom: 2px solid var(--border-color); /* Thicker bottom border for headers */
}

.message-content tr:last-child td, .markdown-content tr:last-child td {
    border-bottom: none;
}

/* Blockquotes in Chat */
.message-content blockquote {
    border-left: 3px solid var(--brand-accent-orange);
    margin: 0 0 0.75rem 0;
    padding-left: 0.75rem;
    font-style: italic;
    opacity: 0.9;
}

/* Horizontal Rule */
.message-content hr, .markdown-content hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 2rem 0;
}

/* Headings in chat should be smaller */
.message-content h1, .message-content h2, .message-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* Code blocks - prevent horizontal overflow */
.message-content pre {
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    max-width: 100%;
}

/* Embedded Images in Chat */
.chat-embedded-image {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transform-origin: center center;
    max-width: 100%;
    height: auto;
}

a > .chat-embedded-image:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

/* --- User Message --- */
.chat-message.user .message-content {
    background: var(--bg-subtle); /* Soft slate/gray for a professional, understated look */
    color: var(--text-primary);
    border-bottom-right-radius: 0.25rem;
    border: 1px solid transparent;
}

/* --- Agent Message --- */
.chat-message.agent .message-content {
    background: var(--brand-white); /* Clean white surface */
    color: var(--text-primary);
    border-bottom-left-radius: 0.25rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Soft elevation to mimic a document */
}

/* Common Markdown elements inside chat */
.chat-message.agent .message-content a,
.chat-message.user .message-content a { 
    color: var(--brand-accent-orange); 
    text-decoration: none;
}
.chat-message.agent .message-content a:hover,
.chat-message.user .message-content a:hover { 
    text-decoration: underline; 
}

.chat-message.agent .message-content code,
.chat-message.user .message-content code { 
    background-color: var(--bg-code-block); 
    color: #c7254e; 
    padding: 0.1rem 0.3rem; 
    border-radius: 4px; 
    font-family: monospace;
}
.chat-message.agent .message-content pre,
.chat-message.user .message-content pre { 
    background-color: #1e293b; /* Dark background for code blocks */
    color: #f8fafc; 
    border: 1px solid #334155;
}
.chat-message.agent .message-content pre code,
.chat-message.user .message-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* --- Custom Scrollbar for Chat --- */
.chat-history::-webkit-scrollbar,
.history-scroll-area::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.chat-history::-webkit-scrollbar-thumb,
.history-scroll-area::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}
.chat-history::-webkit-scrollbar-thumb:hover,
.history-scroll-area::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* --- Chat Context Pills --- */
.chat-context-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    /* Smooth fade gradients on left and right edges */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
    flex-shrink: 0;
}

.pill-group-separator {
    width: 1px;
    background-color: var(--border-color);
    margin: 0.1rem 0.25rem;
    flex-shrink: 0;
}

.chat-context-pills::-webkit-scrollbar {
    height: 4px;
}

.chat-context-pills::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.context-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background-color: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 0.8rem;
    color: var(--brand-dark-gray);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 250px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.context-pill:hover {
    background-color: var(--brand-bg-light);
    border-color: var(--brand-accent-orange);
    color: var(--brand-accent-orange);
    transform: translateY(-1px);
}
.context-pill:active {
    transform: scale(0.96);
}

.context-pill i {
    color: var(--brand-text-muted);
}
.context-pill:hover i {
    color: var(--brand-accent-orange);
}

/* --- Chat Next Actions --- */
.chat-next-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.next-action-btn {
    background-color: transparent;
    border: 1px solid var(--brand-accent-orange);
    color: var(--brand-accent-orange);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
}

.next-action-btn:hover {
    background-color: var(--brand-accent-orange);
    color: var(--brand-white);
    transform: translateX(2px);
}

.next-action-btn i {
    font-size: 0.8em;
}

/* Message Actions (Hover Bar) */
.message-actions {
    position: absolute;
    bottom: -16px; /* Positioned just below the bubble so it doesn't cover text */
    right: 12px;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(4px); /* Slight slide up effect on hover */
    padding: 2px;
    background-color: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 10;
}

.chat-message:hover .message-actions {
    opacity: 1;
    transform: translateY(0);
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--brand-text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.action-btn:hover {
    background-color: #f8fafc;
    color: var(--brand-dark-gray);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.chat-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-surface, #ffffff);
    flex-shrink: 0;
}

.chat-mode-toggle {
    background: transparent;
    border: none;
    color: var(--brand-text-muted);
    padding: 0 0.5rem 0 0;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}
.chat-mode-toggle:hover { opacity: 1; color: var(--brand-accent-orange); transform: scale(1.1); }
.chat-mode-toggle.active { opacity: 1; color: var(--brand-accent-orange); }
.chat-input-wrapper.background-mode { border-color: var(--brand-accent-orange); background-color: #fff7ed; }
.chat-input-wrapper.background-mode:focus-within { box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2); }

[data-theme="dark"] .chat-input-wrapper.background-mode {
    background-color: rgba(234, 88, 12, 0.1);
}

.chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.chat-input-wrapper:focus-within {
    border-color: var(--brand-accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
    background: var(--brand-white);
}

#chat-loading {
    padding: 0 1rem 1rem 1rem;
    display: none;
}

#chat-loading.htmx-request {
    display: block;
}

.chat-input-wrapper textarea {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0.25rem 0;
    margin: 0;
    resize: none;
    max-height: 200px;
    min-height: 24px;
    box-shadow: none !important;
    font-size: 0.95rem;
    line-height: 1.5;
    outline: none !important;
}

.chat-input-wrapper .send-button {
    background: var(--brand-accent-orange);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: transform 0.2s, background-color 0.2s;
    padding: 0;
}

.chat-input-wrapper .send-button:hover {
    transform: scale(1.05);
    background-color: #ea580c;
}

.chat-disclaimer {
    text-align: center;
    font-size: 0.7rem;
    color: var(--brand-text-muted);
}

.chat-disclaimer a {
    color: inherit;
    text-decoration: underline;
}

/* Structured UI Card in Chat */
.chat-card {
    background: white;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
}
.chat-card-title { font-weight: 600; margin-bottom: 0.25rem; }
.chat-card-desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.chat-card button.small { padding: 0.25rem 0.75rem; font-size: 0.8rem; }

/* Typing Indicator */
.typing .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; margin: 0 2px; animation: bounce 1.4s infinite ease-in-out both; }
.typing .dot:nth-child(1) { animation-delay: -0.32s; } .typing .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* Footnotes in Chat */
.message-footnotes {
    margin-top: 0.25rem;
    padding-left: 0.5rem;
}

.message-footnotes details summary {
    font-size: 0.75rem;
    color: #9ca3af;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
}

.message-footnotes details summary:hover {
    color: var(--brand-accent-orange);
}

.message-footnotes details summary::-webkit-details-marker {
    display: none;
}

.message-footnotes .footnotes-content {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--brand-dark-gray);
    overflow-wrap: break-word;
}

/* Reset list styles within footnotes/references to avoid card-like appearance */
.message-footnotes .footnotes-content ul,
.message-footnotes .footnotes-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.message-footnotes .footnotes-content ul { list-style-type: disc; }
.message-footnotes .footnotes-content ol { list-style-type: decimal; }
 
.message-footnotes .footnotes-content li {
    background: none;
    padding: 0;
    margin-bottom: 0.25rem;
    border: none;
    box-shadow: none;
    border-radius: 0;
    cursor: default;
    display: list-item;
}

.message-footnotes .footnotes-content li:hover {
    transform: none;
    box-shadow: none;
}

.message-footnotes .footnotes-content p {
    margin: 0.25rem 0;
}

.message-footnotes .footnotes-content a {
    color: var(--brand-accent-orange);
    text-decoration: underline;
}

/* Mobile Sidebar Overrides */
@media (max-width: 800px) {
    .agentchat-sidebar {
        width: 100%;
        right: -100%;
        top: 0;
        /* Use dvh so the input isn't hidden behind the iOS Safari URL bar */
        height: 100dvh; 
        border-left: none;
        z-index: 2000; /* Ensure it sits above headers on mobile */
    }
}

/* On mobile, don't push content, just overlay */
@media (max-width: 800px) {
    body.chat-open .container {
        margin-right: 0;
    }
}

/* Floating Chat Button */
.floating-chat-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--brand-accent-orange);
    color: var(--brand-white);
    border: 4px solid var(--brand-white); /* White border to separate from content */
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 890; /* Below sidebar (900) */
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.floating-chat-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(255, 153, 0, 0.3);
}
.floating-chat-btn:active {
    transform: scale(0.95);
}

@keyframes agent-thinking-glow {
    0% { box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 0 rgba(255, 153, 0, 0.4); transform: scale(1); }
    50% { box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 12px rgba(255, 153, 0, 0); transform: scale(1.05); }
    100% { box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 0 rgba(255, 153, 0, 0); transform: scale(1); }
}

.floating-chat-btn.is-thinking {
    animation: agent-thinking-glow 1.5s ease-in-out infinite;
    background-color: var(--brand-white);
    color: var(--brand-accent-orange);
    border-color: var(--brand-accent-orange);
}

.floating-chat-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Floating Action Button (Quick Actions) */
.floating-action-btn {
    position: fixed;
    bottom: 7rem; /* Positioned above the chat button */
    right: 2.35rem; /* Centered horizontally relative to the 60px chat button */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--brand-white);
    color: var(--brand-text-muted);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 890;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.floating-action-btn:hover {
    transform: scale(1.1);
    color: var(--brand-accent-orange);
    border-color: var(--brand-accent-orange);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.floating-action-btn:active {
    transform: scale(0.95);
}

.floating-action-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* --- Studio Mode Overrides --- */
body.studio-active .floating-chat-btn,
body.studio-active .floating-action-btn,
body.studio-active .action-capsule,
body.studio-active .agent-hint-bubble,
body.studio-active .agent-notification-bubble {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- Action Capsule (Floating Bottom Bar) --- */
.action-capsule {
    position: absolute;
    bottom: 3.0rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: max-content;
    max-width: 90%;
    perspective: 1000px; /* Enable 3D space */
    transition: transform 0.2s ease, bottom 0.2s ease, opacity 0.2s ease;
    user-select: none; /* Prevent text selection during drag */
}

.capsule-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy physical spring */
    transform-style: preserve-3d;
}

.action-capsule:hover .capsule-inner {
    transform: translateY(-2px);
}

.action-capsule.is-flipped .capsule-inner {
    transform: rotateX(180deg);
}
.action-capsule.is-flipped:hover .capsule-inner {
    transform: translateY(-2px) rotateX(180deg);
}

.capsule-front, .capsule-back {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.4rem;
    border-radius: 100px;
    background-color: var(--bg-surface);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 100%;
}

.capsule-front {
    transform: translateZ(1px); /* Prevent 3D Z-fighting in Webkit/Safari */
}

.capsule-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateX(180deg) translateZ(1px); /* Prevent 3D Z-fighting */
    justify-content: space-between;
        background-color: var(--bg-subtle);
        box-shadow: var(--shadow-lg);
}

/* --- Action Capsule Attention Pulse --- */
@keyframes capsule-attention-pulse {
    0% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(255, 153, 0, 0.5); }
    50% { box-shadow: var(--shadow-lg), 0 0 0 12px rgba(255, 153, 0, 0); }
    100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(255, 153, 0, 0); }
}

.action-capsule.attention-pulse .capsule-front {
    animation: capsule-attention-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) 2;
    border-color: var(--brand-accent-orange);
}

[data-theme="dark"] .capsule-front,
[data-theme="dark"] .capsule-back {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

[data-theme="dark"] .capsule-back {
        background-color: var(--bg-subtle);
}

.action-capsule button,
.action-capsule a.utility-link {
    border-radius: 50px;
    padding: 0.35rem 0.85rem;
    box-shadow: none; /* Flatten buttons inside the capsule */
    gap: 0.35rem;
    font-size: 0.85rem;
    min-height: 36px;
}
    
    /* Refine inline dividers */
    .action-capsule div[style*="width: 1px"], .capsule-back-divider {
        background: var(--border-color) !important;
    }
    [data-theme="dark"] .action-capsule div[style*="width: 1px"], [data-theme="dark"] .capsule-back-divider {
        background: var(--border-color) !important;
    }

.action-capsule.is-moved {
    transform: none;
    transition: opacity 0.2s ease;
}

.action-capsule.is-scrolling:not(:hover):not(.is-dragging) {
    opacity: 0.25;
    pointer-events: none; /* Prevent interaction while fading out during scroll */
}

.action-capsule.is-dragging {
    transition: none !important;
    }
    
    .action-capsule.is-dragging .capsule-front,
    .action-capsule.is-dragging .capsule-back {
        box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.2);
}

/* --- Drag Handle / Controls Wrapper Pattern --- */
.capsule-controls {
    display: flex;
    align-items: center;
        border-right: 1px solid var(--border-color);
    padding: 0.25rem 0.35rem 0.25rem 0.5rem;
        background: transparent;
        box-shadow: none;
}
[data-theme="dark"] .capsule-controls {
        background: transparent;
        box-shadow: none;
        border-right: 1px solid var(--border-color);
}

.capsule-drag-handle {
    cursor: grab;
    padding: 0.35rem 0.4rem;
    color: var(--brand-text-muted);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, color 0.2s, background-color 0.2s, transform 0.2s;
    border-radius: 20px;
}

.capsule-drag-handle:hover {
    opacity: 1;
    color: var(--brand-primary);
        background-color: rgba(0, 0, 0, 0.04); /* Softer hover for glass */
    }

    [data-theme="dark"] .capsule-drag-handle:hover {
        background-color: rgba(255, 255, 255, 0.1);
}

.capsule-drag-handle:active {
    transform: scale(0.95);
}

.action-capsule.is-dragging .capsule-drag-handle {
    cursor: grabbing;
}

/* Action Capsule Locked State */
.action-capsule.is-locked .capsule-drag-handle {
    opacity: 0.2;
    cursor: not-allowed;
}
.action-capsule.is-locked .capsule-drag-handle:hover {
    background-color: transparent;
    color: var(--brand-text-muted);
    transform: none;
}

/* Lock button icon swapping */
.lock-toggle-btn .fa-lock { 
    display: none; 
}
.action-capsule.is-locked .lock-toggle-btn .fa-lock { display: inline-block; color: var(--brand-primary); }
.action-capsule.is-locked .lock-toggle-btn .fa-unlock { display: none; }

/* Add a physical rotation hint to the flip button on hover */
.capsule-flip-btn i {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}
.capsule-flip-btn:hover i {
    transform: rotate(90deg);
    color: var(--brand-primary);
}

/* --- Vertical Orientation for Action Capsule --- */
.action-capsule.orientation-vertical .capsule-front,
.action-capsule.orientation-vertical .capsule-back {
    flex-direction: column;
    width: auto;
    min-width: 180px;
        border-radius: 24px;
}

.action-capsule.orientation-vertical .capsule-back {
    transform: rotateY(180deg) translateZ(1px);
        box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .action-capsule.orientation-vertical .capsule-back {
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.action-capsule.orientation-vertical.is-flipped .capsule-inner {
    transform: rotateY(180deg);
}

.action-capsule.orientation-vertical.is-flipped:hover .capsule-inner {
    transform: translateX(-2px) rotateY(180deg);
}

.action-capsule.orientation-vertical .capsule-controls {
    border-right: none;
        border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    width: auto;
    align-self: stretch;
    border-radius: 16px 16px 0 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
    }

    [data-theme="dark"] .action-capsule.orientation-vertical .capsule-controls {
        border-bottom: 1px solid var(--border-color);
}

.action-capsule.orientation-vertical .capsule-drag-handle i {
    transform: rotate(90deg);
}

.action-capsule.orientation-vertical .capsule-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
    box-sizing: border-box;
}

.action-capsule.orientation-vertical .capsule-buttons button,
.action-capsule.orientation-vertical .capsule-buttons a.utility-link {
    justify-content: flex-start;
}

.action-capsule.orientation-vertical .capsule-buttons div[style*="width: 1px"] {
    width: 100% !important;
    height: 1px !important;
    margin: 0.25rem auto !important;
}

.action-capsule.orientation-vertical .capsule-back {
    padding: 0; /* Reset parent padding to allow inner full bleed */
}

.action-capsule.orientation-vertical .capsule-back > div {
    flex-direction: column;
    align-items: stretch !important;
    padding: 0.75rem !important;
    gap: 0.75rem !important;
    white-space: normal !important;
}

.action-capsule.orientation-vertical .capsule-back .capsule-back-divider {
    width: 100% !important;
    height: 1px !important;
    margin: 0 !important;
}

/* Condense back-face text to keep the vertical capsule from bulging */
.action-capsule.orientation-vertical .capsule-back span:first-child {
    font-size: 0; 
    text-align: center;
}
.action-capsule.orientation-vertical .capsule-back span:first-child i {
    font-size: 1.2rem;
    margin: 0 !important;
}

.action-capsule.orientation-vertical .capsule-back .orientation-toggle-btn {
    align-self: center;
}

/* --- Action Capsule Input Mode --- */
.capsule-front .capsule-buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.5rem 0.3rem 0.25rem;
}
.capsule-front .capsule-input-area {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex-grow: 1;
    padding: 0.4rem 0.75rem 0.4rem 0.5rem;
    animation: slideInRight 0.2s ease-out; /* Reusing existing animation */
}
.action-capsule.show-input { width: 100%; max-width: 680px; }
.action-capsule.show-input .capsule-buttons { display: none; }
.action-capsule.show-input .capsule-input-area { display: flex; }
.capsule-front .capsule-input-area input,
.capsule-front .capsule-input-area textarea {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.95rem;
    flex-grow: 1;
    min-height: auto;
    outline: none !important;
    resize: none;
    max-height: 150px;
    font-family: inherit;
    line-height: 1.4;
}

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

/* Prevent nested transform flicker on buttons inside the floating capsule */
.action-capsule button:hover,
.action-capsule a.utility-link:hover {
    transform: none;
}

/* Enhance hover states for capsule buttons since they lose their transform lift */
.action-capsule button.secondary:hover,
.action-capsule button.utility:hover,
.action-capsule a.utility-link:hover {
    background-color: var(--border-color);
    color: var(--brand-dark-gray);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .action-capsule button.secondary:hover,
[data-theme="dark"] .action-capsule button.utility:hover,
[data-theme="dark"] .action-capsule a.utility-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.action-capsule button.primary:hover {
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
    filter: brightness(1.1);
}

/* --- Agent Hint Bubble --- */
.agent-hint-bubble {
    position: fixed;
    bottom: 100px; /* Positioned above the floating button with spacing */
    right: 3rem; /* Shifted left to align visually with button */
    width: 320px;
    background-color: var(--brand-white);
    border: 2px solid var(--brand-dark-blue); /* Match notification bubble */
    border-radius: 16px;
    border-bottom-right-radius: 0; /* Sharp corner for tail */
    box-shadow: 0 12px 36px rgba(0,0,0,0.15); /* Stronger shadow */
    padding: 1.25rem 1.5rem;
    z-index: 890; /* Same level as button */
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom right;
}

.agent-hint-bubble::after,
.agent-notification-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 16px; /* Position tail to align with button center */
    width: 12px;
    height: 12px;
    background: var(--brand-white);
    border-bottom: 2px solid var(--brand-dark-blue);
    border-right: 2px solid var(--brand-dark-blue);
    transform: rotate(45deg);
}

.agent-hint-bubble.visible {
    display: flex;
}

.agent-hint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-hint-text {
    font-size: 0.95rem;
    color: var(--brand-dark-gray);
    line-height: 1.4;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s;
}

.agent-hint-text:hover {
    color: var(--brand-dark-blue);
}

.agent-hint-close {
    background: none;
    border: none;
    color: var(--brand-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.agent-hint-close:hover {
    opacity: 1;
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Agent Notification Bubble (Transient) --- */
.agent-notification-bubble {
    position: fixed;
    bottom: 100px; /* Aligned with hint bubble */
    right: 3rem; /* Shifted left */
    background-color: var(--brand-white);
    color: var(--brand-dark-gray);
    border: 2px solid var(--brand-dark-blue); /* Thicker, high-contrast border */
    padding: 1.25rem 1.75rem; /* Larger padding */
    border-radius: 16px;
    border-bottom-right-radius: 0; /* Sharp corner for tail */
    box-shadow: 0 12px 36px rgba(0,0,0,0.15); /* Stronger shadow for visibility */
    z-index: 2000;
    max-width: 400px; /* Wider bubble */
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.05rem; /* Larger font */
    font-weight: 500;
    line-height: 1.5;
    animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none; /* Let clicks pass through unless we add buttons later */
}

/* --- Notes Navigation --- */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

/* --- Mobile Navigation (Bottom Bar) --- */
@media (max-width: 800px) {
    body {
        flex-direction: column;
        padding-bottom: 60px; /* Default space for bottom nav */
        transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Immersive Detail View: Reclaim space when viewing an item */
    body:has(.mobile-show) {
        padding-bottom: 0;
    }
    
    body:has(.mobile-show) .app-nav {
        transform: translateY(100%);
    }

    .app-nav {
        width: 100%;
        height: 60px;
        left: 0;
        bottom: 0;
        top: auto;
        flex-direction: row;
        justify-content: space-around;
        padding: 0;
        border-right: none;
        border-top: 1px solid var(--border-color);
        position: fixed; /* Fix to bottom on mobile */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 900;
    }
    .app-nav .logo { display: none; }
    .app-nav .nav-bottom { 
        margin-top: 0; 
        flex-direction: row;
        border-left: 1px solid var(--border-color);
        padding-left: 0.5rem;
        width: 100%;
        padding-bottom: 1rem;
    }
    .app-nav-item {
        margin-bottom: 0;
        margin-right: 0;
        border-radius: 0;
        height: 100%;
        width: auto;
        flex-grow: 1;
    }
    .app-nav-item i {
        margin-bottom: 2px;
    }
    .container {
        height: auto;
        min-height: 100dvh;
    }
    /* Transition the action capsule smoothly */
    .action-capsule {
        bottom: calc(60px + 1rem); 
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, opacity 0.2s ease;
    }

    /* Drop the capsule to the true bottom when the global nav hides */
    body:has(.mobile-show) .action-capsule {
        bottom: 1.5rem;
    }

    /* Auto-collapse action capsule horizontally into icon-only mode on mobile */
    .action-capsule:not(.orientation-vertical) .capsule-front button:not(.icon-btn),
    .action-capsule:not(.orientation-vertical) .capsule-front a.utility-link {
        padding: 0;
        width: 44px;
        height: 44px;
        font-size: 0 !important; /* Collapse text width */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .action-capsule:not(.orientation-vertical) .capsule-front button:not(.icon-btn) i,
    .action-capsule:not(.orientation-vertical) .capsule-front a.utility-link i,
    .action-capsule:not(.orientation-vertical) .capsule-front button:not(.icon-btn) span i {
        font-size: 1.2rem;
        margin-right: 0 !important;
    }
    .action-capsule:not(.orientation-vertical) .capsule-front button:not(.icon-btn) span.button-text {
        font-size: 0 !important;
    }

    /* Push FABs above the fixed 60px bottom nav */
    .floating-chat-btn {
        bottom: calc(60px + 1rem);
        right: 1rem;
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s, opacity 0.3s;
    }
    .floating-action-btn {
        bottom: calc(60px + 4.5rem);
        right: 1.15rem; /* Optical alignment with smaller chat btn */
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s, opacity 0.3s;
    }
    /* Drop FABs down when the global nav hides during immersive view */
    body:has(.mobile-show) .floating-chat-btn { bottom: 1.5rem; }
    body:has(.mobile-show) .floating-action-btn { bottom: 5rem; }

    /* Make Modals Full-Bleed on Mobile to survive Virtual Keyboards */
    .modal__container {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }
}
.search-icon {
    position: absolute;
    left: 1rem;
    color: var(--brand-text-muted);
    pointer-events: none;
}
.search-wrapper input[type="search"] {
    padding-left: 2.25rem; /* Space for icon */
    width: 100%;
    background-color: var(--bg-subtle);
    border-color: transparent;
    transition: all 0.2s ease;
}
.search-wrapper input[type="search"]:focus {
    background-color: var(--brand-white);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15);
}

.subtype-chips-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    margin-bottom: 0.1rem;
    padding: 0.25rem 1.5rem 0.75rem 0.25rem; /* Prevent shadow/focus clipping */
    margin-left: -0.25rem; /* Optical alignment */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    flex-shrink: 0;
}
.subtype-chips-container::-webkit-scrollbar { display: none; }

.subtype-chip {
    padding: 0.25rem 0.75rem;
    background-color: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 0.8rem;
    color: var(--brand-text-muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.subtype-chips-container input[type="radio"] {
    display: none;
}
.subtype-chips-container input[type="radio"]:checked + .subtype-chip {
    background-color: var(--brand-bg-light);
    border-color: var(--brand-dark-gray);
    color: var(--brand-dark-gray);
    font-weight: 600;
}
.subtype-chip:hover {
    border-color: var(--brand-accent-orange);
    color: var(--brand-accent-orange);
}

/* --- Pane Switcher (Segmented Control) --- */
.pane-switcher {
    display: flex;
    width: 100%;
    background-color: var(--bg-subtle);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.pane-switcher-btn {
    flex: 1;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand-text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: auto;
    line-height: 1;
}

.pane-switcher-btn i {
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.pane-switcher-btn:hover:not(.active) {
    color: var(--brand-dark-gray);
    background-color: rgba(0,0,0,0.03);
}

.pane-switcher-btn.active {
    background-color: var(--bg-surface);
    color: var(--brand-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    font-weight: 600;
}

.pane-switcher-btn.active i {
    opacity: 1;
}

/* --- Tab Badges (for pane switchers) --- */
.tab-badge {
    background-color: var(--brand-bg-light);
    color: var(--brand-text-muted);
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    line-height: 1;
}
.pane-switcher-btn.active .tab-badge {
    background-color: rgba(234, 88, 12, 0.1);
    color: var(--brand-primary);
    border-color: rgba(234, 88, 12, 0.2);
}

/* --- Strategy Hub --- */
.strategy-sub-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
}

.sub-nav-item {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0%;
    color: var(--brand-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom-color 0.2s;
    margin-bottom: -1px;
    gap: 0.3rem;
}

.sub-nav-item.active {
    color: var(--brand-accent-orange);
    border-bottom-color: var(--brand-accent-orange);
}

.strategy-view { display: none; flex-grow: 1; }
.strategy-view.active { 
    display: flex; 
    flex-direction: column; 
    height: 100%;
}

/* --- Suggestion Banner --- */
.suggestion-banner {
    background: var(--bg-suggestion-gradient);
    border: 1px solid #fed7aa;
    border-left: 4px solid var(--brand-accent-orange);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    animation: slideInUp 0.3s ease-out;
}

.suggestion-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.suggestion-icon-wrapper {
    background-color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: var(--brand-accent-orange);
    font-size: 1rem;
}

/* Duotone Icon Styling for Agent Insights */
.suggestion-icon-wrapper .fad {
    --fa-primary-color: var(--brand-accent-orange);
    --fa-secondary-color: var(--brand-accent-orange);
    --fa-secondary-opacity: 0.4;
}

.suggestion-text {
    color: var(--brand-dark-gray);
    font-size: 0.95rem;
}

.suggestion-text strong {
    color: #9a3412;
    font-weight: 600;
}

.suggestion-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.suggestion-action {
    background-color: var(--brand-white);
    color: var(--brand-accent-orange);
    border: 1px solid var(--brand-accent-orange);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.suggestion-action:hover {
    background-color: var(--brand-accent-orange);
    color: var(--brand-white);
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.2);
}

.suggestion-dismiss {
    background: none;
    border: none;
    color: var(--brand-text-muted);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
}

.suggestion-dismiss:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--brand-dark-gray);
    transform: none;
}


/* --- Global Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 14px; /* Wider to accommodate the transparent border trick */
    height: 14px;
}
::-webkit-scrollbar-track, .chat-history::-webkit-scrollbar-track, .history-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    /* Use background-clip and transparent borders to create a "floating" scrollbar */
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 10px;
    border: 4px solid rgba(0, 0, 0, 0); 
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
    background-clip: padding-box;
}

/* Standard Scrollbar for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* --- Content Entrance Animation --- */
/* Apply to main content areas to smooth out HTMX swaps and page loads */
#app-layout, .modal__content, li {
    animation: contentFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* will-change: transform, opacity; -- Removed to prevent memory overhead on long lists */
}

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

/* --- Workflow Stepper --- */
.workflow-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
/* Compact mode for document view */
.workflow-stepper.compact {
    margin-bottom: 1rem;
    padding: 0;
    max-width: 100%;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Align content to bottom so label can go top */
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.workflow-stepper.compact .step {
    gap: 0.25rem;
}


.step.active {
    opacity: 1;
    transform: scale(1.1);
}
.step.active .step-icon {
    background-color: var(--brand-accent-orange);
    color: white;
    box-shadow: 0 4px 10px rgba(255, 153, 0, 0.3);
    border-color: var(--brand-accent-orange);
}
.step.active .step-label {
    color: var(--brand-dark-gray);
    font-weight: 600;
}

.step.completed {
    opacity: 1;
}
.step.completed .step-icon {
    background-color: #e2e8f0; /* Neutral Gray */
    color: #475569;
    border-color: #cbd5e1;
}

.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-top: 5px;
    background-color: var(--brand-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    order: 2; /* Move icon below label */
}
.workflow-stepper.compact .step-icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.step-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    order: 1; /* Move label above icon */
}
.workflow-stepper.compact .step-label {
    font-size: 0.7rem;
}

.step-line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--border-color);
    margin: 0 10px;
    margin-top: 1.2rem; /* Align with icon (which is now order 2) */
}
.workflow-stepper.compact .step-line {
    margin-top: 1rem; /* Adjusted for smaller icon */
}
.step-line.completed {
    background-color: #cbd5e1;
}

/* Adjust detail header for better wrapping */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0 1.5rem;
    flex-shrink: 0;
}

.detail-header h2 {
    margin: 0;
    flex: 1 1 auto; /* Allow title to grow and shrink naturally */
    min-width: 0;
    overflow-wrap: break-word;
}

.detail-actions, .note-actions, .task-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end; /* Align buttons to the right */
}

/* Ensure primary actions are visually distinct */
.detail-actions button.primary {
    order: -1; /* Make primary button appear first in the DOM order if needed, or last visually */
}

/* --- Action Drawer Modal --- */
.action-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    /* margin-bottom: 1rem; Handled by container padding */
}

.action-search-wrapper .search-icon {
    position: static;
    transform: none;
    margin-left: 1.5rem;
    margin-right: 0.5rem;
    color: var(--brand-text-muted);
    pointer-events: none;
    font-size: 1.1rem;
    z-index: 5;
}

.action-search-wrapper .search-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--brand-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: none; /* Toggled by JS */
    transition: color 0.2s;
}
.action-search-wrapper .search-clear:hover { color: var(--brand-dark-gray); }

.action-search-input {
    width: auto;
    flex: 1;
    padding: 1.25rem 3.5rem 1.25rem 0;
    border: none;
    border-radius: 0;
    font-size: 1.2rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    background-color: transparent;
    color: var(--text-primary);
}

.action-search-input:focus {
    border-color: transparent;
    box-shadow: none;
    background-color: transparent;
}

.action-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
}

.action-drawer-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    height: auto;
    min-height: 60px;
    text-align: left;
    background-color: var(--brand-white);
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    margin-bottom: 0;
}

.action-drawer-item:hover, .action-drawer-item.active {
    border-color: var(--border-color);
    background-color: var(--bg-app);
    box-shadow: none;
    outline: none;
    z-index: 1;
}
.action-drawer-item:active {
    transform: scale(0.98);
}

.action-drawer-item:focus-visible {
    background-color: var(--bg-app);
    box-shadow: inset 3px 0 0 var(--brand-primary);
    outline: none;
}

.action-info-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    flex: 1;
    min-width: 0;
}

.action-drawer-item .action-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text-muted);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
}

.action-drawer-item:hover .action-icon {
    background-color: var(--brand-white);
    color: var(--brand-primary);
    border-color: var(--border-color);
}

.action-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.action-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.action-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.action-arrow {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.action-drawer-item:hover .action-arrow {
    transform: translateX(4px);
    color: var(--brand-primary);
}

/* --- Action Drawer Empty State --- */
.action-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--brand-text-muted);
}

.no-results-icon {
    font-size: 1.75rem;
    color: var(--brand-text-muted);
    background-color: var(--bg-subtle);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color);
    animation: icon-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.action-no-results p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--brand-dark-gray);
}

/* --- Dashboard Empty State --- */
.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--brand-white);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    color: var(--brand-text-muted);
}
.dashboard-empty-state i { 
    font-size: 2rem; 
    color: var(--brand-accent-orange); 
    background-color: rgba(255, 153, 0, 0.1); 
    width: 64px; 
    height: 64px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 1.25rem; 
    animation: icon-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.dashboard-empty-state p { margin: 0; font-weight: 600; font-size: 1.05rem; color: var(--brand-dark-gray); }
.dashboard-empty-state small { margin-top: 0.5rem; font-size: 0.9rem; color: var(--brand-text-muted); }

/* --- App Nav (Desktop) --- */
.app-nav {
    display: flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 1.5rem;
    background-color: var(--brand-white);
    border-bottom: 1px solid var(--border-color);
    gap: 1.5rem;
    z-index: 90;
    flex-shrink: 0;
    position: relative; /* Anchors the z-index */
}

.app-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    height: 100%;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom-color 0.2s;
}

.app-nav-item:hover {
    color: var(--brand-primary);
}

.app-nav-item.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.search-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.search-section-header {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: rgba(240, 244, 248, 0.98); /* Translucent bg-app */
    backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* --- Usage Fuel Gauge Widget --- */
.usage-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

.usage-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background-color: var(--bg-subtle);
    color: var(--brand-dark-gray);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: help;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.usage-pill i {
    color: var(--brand-accent-orange);
    font-size: 0.9rem;
}

.usage-pill:hover {
    background-color: #fff7ed; /* Light orange tint */
    border-color: #fed7aa;
}

.usage-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 180px;
    background-color: var(--brand-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem;
    z-index: 1000;
    flex-direction: column;
    gap: 0.5rem;
}

/* Invisible bridge to keep hover state active when moving mouse from pill to tooltip */
.usage-tooltip::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.usage-widget:hover .usage-tooltip {
    display: flex;
    animation: slideInUp 0.2s ease-out;
}

.usage-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--brand-dark-gray);
}

.usage-footer {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    text-align: center;
}

.usage-footer a {
    color: var(--brand-primary);
    text-decoration: none;
}

.usage-footer a:hover {
    text-decoration: underline;
}

/* --- Comment Count Badge --- */
.comment-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background-color: var(--brand-accent-orange);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    padding: 2px 5px;
    border-radius: 12px;
    line-height: 1;
    min-width: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border: 2px solid var(--bg-surface);
    pointer-events: none; /* Prevent clicks on the badge from interfering with the button */
    animation: mm-fadeIn 0.2s ease-out;
}

/* Ensure the badge border matches dark mode context */
[data-theme="dark"] .comment-badge {
    border-color: var(--bg-surface);
}

/* Adjustments for the Action Capsule specifically */
.action-capsule .comment-badge {
    top: -2px;
    right: 2px;
}

/* --- Native App Feel --- */
.app-nav-item, .list-card, .filter-tab, .pane-switcher-btn, .sidebar-nav-item, .menu-item, .split-button-container, .quick-search-chip, .strategy-chip, .context-pill {
    user-select: none;
    -webkit-user-select: none;
}