/* AI Advisor Lab Brand Guidelines v8.0 - Premium Design System
 * Extracted from index.html inline styles
 * Date: 2026-03-02
 */
/* AI ADVISOR LAB BRAND GUIDELINES v8.0 - PREMIUM DESIGN SYSTEM */
/* Benchmarked against: Perplexity, McKinsey, Deloitte, Accenture */

:root {
    /* ============================================
       PREMIUM COLOR PALETTE v8.0
       ============================================ */

    /* Primary Brand Colors */
    --color-primary: #0052CC;
    --color-primary-dark: #003D99;
    --color-primary-light: #0066FF;
    --color-primary-hover: #0047B3;

    /* Sophisticated Neutrals (Not pure black/white) */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #4B5563;
    --text-inverse: #FFFFFF;

    /* Warm Backgrounds (Subtle warmth for premium feel) */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-tertiary: #F1F5F9;
    --bg-elevated: #FFFFFF;
    --bg-hover: #EFF6FF;

    /* Premium Borders */
    --border-color: #E2E8F0;
    --border-light: #F1F5F9;
    --border-focus: #0066FF;

    /* Status Colors */
    --color-success: #059669;
    --color-success-light: #D1FAE5;
    --color-warning: #D97706;
    --color-warning-light: #FEF3C7;
    --color-error: #DC2626;
    --color-error-light: #FEE2E2;
    --color-info: #0284C7;
    --color-info-light: #E0F2FE;

    /* Premium Accents */
    --color-gold: #F59E0B;
    --color-purple: #7C3AED;
    --color-teal: #0D9488;

    /* Input States */
    --input-bg: #FFFFFF;
    --input-disabled: #F8FAFC;
    --input-focus-ring: rgba(0, 102, 255, 0.15);

    /* Code Blocks */
    --code-inline-bg: #F1F5F9;
    --code-inline-text: #1E293B;

    /* ============================================
       TYPOGRAPHY SCALE v8.0 (1.25 Major Third)
       ============================================ */

    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ============================================
       SPACING SCALE v8.0 (8px Grid)
       ============================================ */

    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */

    /* ============================================
       SHADOWS v8.0 (Premium Elevation System)
       ============================================ */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);

    /* Focus Ring Shadow */
    --shadow-focus: 0 0 0 4px var(--input-focus-ring);

    /* Premium Button Shadow */
    --shadow-btn: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 102, 255, 0.15);
    --shadow-btn-hover: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 102, 255, 0.2);

    /* ============================================
       BORDER RADIUS v8.0
       ============================================ */

    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;

    /* ============================================
       TRANSITIONS v8.0 (Premium Easing)
       ============================================ */

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Spring Animation */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* === Design System v8.42 === */
    /* Data validation tag colours (8-tag inline system) */
    --tag-verified: #D1FAE5;
    --tag-verified-text: #065F46;
    --tag-assumption: #FEF3C7;
    --tag-assumption-text: #92400E;
    --tag-estimate: #DBEAFE;
    --tag-estimate-text: #1E40AF;
    --tag-outdated: #FEE2E2;
    --tag-outdated-text: #991B1B;
    --tag-hallucination: #FCE7F3;
    --tag-hallucination-text: #9D174D;
    --tag-consensus: #E0E7FF;
    --tag-consensus-text: #3730A3;
    --tag-minority-view: #F3F4F6;
    --tag-minority-text: #374151;
    --tag-flagged: #FEF3C7;
    --tag-flagged-text: #92400E;

    /* Elevation system (uses --shadow-sm/md/lg defined above) */

    /* Status colors */
    --color-status-success: #10B981;
    --color-status-warning: #F59E0B;
    --color-status-error: #EF4444;
    --color-status-info: #3B82F6;

    /* Tier colors */
    --color-tier-free: #9CA3AF;
    --color-tier-professional: #3B82F6;
    --color-tier-enterprise: #8B5CF6;
    --color-tier-partner: #F59E0B;
}

/* ============================================
   GLOBAL RESET & BASE STYLES
   ============================================ */

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-primary);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   GLOBAL UX BEST PRACTICES
   ============================================ */

/* Custom text selection — brand-consistent */
::selection {
    background: rgba(0, 82, 204, 0.15);
    color: var(--text-primary);
}

/* Smooth scroll for anchored navigation */
html {
    scroll-behavior: smooth;
}

/* Global scrollbar styling (Webkit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

/* Touch-action: eliminate 300ms tap delay on all interactive elements */
button, a, input, select, textarea, [role="button"], [tabindex] {
    touch-action: manipulation;
}

/* Content max-width: prevent unreadable line lengths on ultra-wide screens */
.message-content,
.advisor-response .response-body,
.welcome-screen {
    max-width: 860px;
}

/* Skeleton loading placeholders */
.skeleton-line {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-color) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    margin-bottom: 8px;
}
.skeleton-line:last-child { width: 60%; }
.skeleton-line--short { width: 40%; }
.skeleton-line--medium { width: 70%; }

.skeleton-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.skeleton-card .skeleton-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-color) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    margin-bottom: 12px;
}

/* Loading state for chat messages area */
.chat-messages--loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

/* Reduced motion — accessibility compliance */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Screen Reader Only - WCAG 2.1 Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enterprise SVG Icon System (icon-registry.js) */
.icon-svg {
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}
.icon-svg svg {
    display: block;
}

/* ============================================
   PREMIUM ANIMATIONS
   ============================================ */

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

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

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

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

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

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-color) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* Premium Hover Transition */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   PREMIUM CARD COMPONENTS v8.0
   ============================================ */

.premium-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.premium-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.premium-card-elevated {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.premium-card-elevated:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ============================================
   MEETING TYPE CARDS v8.0
   ============================================ */

.meeting-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3);
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.meeting-type-card:hover {
    border-color: var(--color-primary-light);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.meeting-type-card.active {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 82, 204, 0.08));
    box-shadow: var(--shadow-sm), 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.meeting-type-card.active:hover {
    transform: translateY(-1px);
}

/* Context Action Buttons */
.context-action-btn:hover {
    border-color: var(--color-primary-light);
    background: var(--bg-hover);
}

.context-action-btn:has(input:checked) {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 82, 204, 0.05));
}

/* Start Meeting Button */
.start-meeting-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-btn);
}

.start-meeting-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-dark));
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.start-meeting-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Premium Input Styles */
.premium-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--input-bg);
    transition: all var(--transition-fast);
}

.premium-input:hover:not(:disabled) {
    border-color: var(--color-primary-light);
}

.premium-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.premium-input:disabled {
    background: var(--input-disabled);
    color: var(--text-muted);
    cursor: not-allowed;
}

.premium-input::placeholder {
    color: var(--text-muted);
}

/* Premium Select Styles */
.premium-select {
    appearance: none;
    padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.premium-select:hover:not(:disabled) {
    border-color: var(--color-primary-light);
}

.premium-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* Premium Badge Styles */
.premium-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.premium-badge-primary {
    background: var(--color-primary);
    color: var(--text-inverse);
}

.premium-badge-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.premium-badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.premium-badge-info {
    background: var(--color-info-light);
    color: var(--color-info);
}

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.loading-spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Button Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Interactive Micro-interactions */
.interactive-scale {
    transition: transform var(--transition-fast);
}

.interactive-scale:hover {
    transform: scale(1.02);
}

.interactive-scale:active {
    transform: scale(0.98);
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.ripple-effect:active::after {
    width: 200px;
    height: 200px;
}

/* Focus Visible Styles (Accessibility) */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* Tooltip Styles */
.premium-tooltip {
    position: relative;
}

.premium-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-2) var(--space-3);
    background: var(--text-primary);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    white-space: nowrap;
    border-radius: var(--radius-md);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1000;
}

.premium-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error);
    color: var(--text-inverse);
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-primary);
}

.app-container {
    display: flex;
    height: calc(100vh - 75px);  /* Account for expanded cost banner at bottom */
    max-width: 2000px;
    margin: 0 auto;
    margin-bottom: 75px;  /* Offset for expanded cost tracking banner at bottom */
}

/* Left Sidebar - Team Config (Premium v8.0) */
.sidebar {
    width: 300px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-slow), opacity var(--transition-base);
}

.sidebar.collapsed {
    width: 48px;
    min-width: 48px;
    overflow: hidden;
}

.sidebar.collapsed > *:not(.collapsed-strip) {
    display: none;
}

.sidebar.collapsed .collapsed-strip {
    display: flex !important;
}

/* Collapsed Strip Styling - Claude.ai Style */
.collapsed-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    gap: 20px;
    height: 100%;
}

.collapsed-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 8px;
    transition: all 0.2s;
    width: 100%;
}

.collapsed-strip-item:hover {
    background: var(--bg-tertiary);
}

.collapsed-strip-item .strip-icon {
    font-size: 18px;
    color: var(--text-secondary);
}

.collapsed-strip-item .strip-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.collapsed-strip-item:hover .strip-icon,
.collapsed-strip-item:hover .strip-label {
    color: var(--text-primary);
}

.sidebar-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.sidebar-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    background: var(--bg-primary);
}

/* Sidebar Scrollbar Styling */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}
.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-content::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: var(--radius-full);
}
.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Project Selector Styles (Part A-3: Project Hierarchy) */
.project-selector {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.project-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.project-selector-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6366F1;
}

.project-new-btn {
    padding: 4px 8px;
    font-size: 11px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.project-new-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-dark));
    transform: translateY(-1px);
}

.project-dropdown {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    background: #FFFFFF;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.project-dropdown:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.project-info {
    margin-top: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2100; /* Above portfolio window (1900) and project window (2000) */
}

.project-modal.active {
    display: flex;
}

.project-modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.project-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.project-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.project-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
}

.project-form-group {
    margin-bottom: 16px;
}

.project-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.project-form-input,
.project-form-textarea,
.project-form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

.project-form-input:focus,
.project-form-textarea:focus,
.project-form-select:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.project-form-textarea {
    min-height: 80px;
    resize: vertical;
}

.project-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.project-form-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.project-form-btn.primary {
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    color: white;
    border: none;
}

.project-form-btn.primary:hover {
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
}

.project-form-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.project-form-btn.secondary:hover {
    background: var(--bg-tertiary);
}

/* AI Team Library Modal Styles - Premium Design System v8.0 */
.team-library-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2500;
}

.team-library-modal.active {
    display: flex;
}

.team-library-modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.team-library-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.team-library-modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.team-library-modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.team-library-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.team-library-modal-toolbar {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    flex-wrap: wrap;
}

.team-library-search {
    flex: 1;
    min-width: 200px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.team-library-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.team-library-filter {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 140px;
    cursor: pointer;
}

.team-library-count {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.team-library-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-6);
    max-height: 450px;
    background: var(--bg-primary);
}

.team-library-loading {
    text-align: center;
    padding: var(--space-10);
    color: var(--text-secondary);
}

.team-library-empty {
    text-align: center;
    padding: var(--space-10);
    color: var(--text-secondary);
}

.team-library-card {
    display: flex;
    align-items: center;
    padding: var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-primary);
}

.team-library-card:hover {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.team-library-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    margin-right: var(--space-4);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.team-library-card-info {
    flex: 1;
    min-width: 0;
}

.team-library-card-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-library-card-meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.team-library-card-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Green Info button for team details */
.team-info-btn {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: 8px;
}

.team-info-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

/* Team Info Popup Modal */
.team-info-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    justify-content: center;
    align-items: center;
}

.team-info-popup.active {
    display: flex;
}

.team-info-popup-content {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.team-info-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1E3A5F, #2563EB);
    color: white;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.team-info-popup-title {
    font-size: 16px;
    font-weight: 600;
}

.team-info-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
}

.team-info-popup-body {
    padding: 20px;
}

.team-info-section {
    margin-bottom: 20px;
}

.team-info-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-info-summary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

.team-info-personas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.team-info-persona {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 11px;
    text-align: center;
    color: var(--text-primary);
}

.team-info-persona-icon {
    font-size: 16px;
    margin-bottom: 4px;
}

.team-info-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.team-library-card-action {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    box-shadow: var(--shadow-btn);
    flex-shrink: 0;
}

.team-library-card-action:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn-hover);
}

.team-library-card-action.added {
    background: linear-gradient(135deg, #10B981, #059669);
    cursor: default;
}

.team-library-modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.team-library-footer-info {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: center;
}

.team-status {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
}

.status-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid #F3F4F6;
}

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

.status-label {
    color: #6B7280;
    font-weight: 500;
}

.status-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================
   PREMIUM BUTTON SYSTEM v8.0
   ============================================ */

.btn {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    cursor: pointer;
    margin-bottom: var(--space-2);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    color: var(--text-inverse);
    box-shadow: var(--shadow-btn);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-success {
    background: #10B981;
    color: #FFFFFF;
}

.btn-success:hover:not(:disabled) {
    background: #059669;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Accessibility: Visually hidden class for screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessibility: Focus states for all buttons */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-success:focus-visible {
    outline: 2px solid #0078D4;
    outline-offset: 2px;
}

.header-btn:focus-visible,
.action-btn:focus-visible,
.response-action-btn:focus-visible,
.input-action-btn:focus-visible {
    outline: 2px solid #0078D4;
    outline-offset: 2px;
}

.doc-tab:focus-visible,
.artifact-btn:focus-visible,
.knowledge-file-btn:focus-visible,
.preview-action-btn:focus-visible {
    outline: 2px solid #0078D4;
    outline-offset: 2px;
}

.toggle-sidebar:focus-visible,
.search-btn:focus-visible,
.search-close:focus-visible,
.modal-close:focus-visible {
    outline: 2px solid #0078D4;
    outline-offset: 2px;
}

.file-upload {
    background: var(--bg-primary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.file-upload:hover {
    border-color: var(--color-primary);
    background: var(--bg-hover);
}

.file-upload input {
    display: none;
}

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

.chat-header {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-primary);
    flex-shrink: 0;
    z-index: 2;
}

.chat-header .logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.chat-header .logo-image {
    height: 36px;
    width: auto;
}

.chat-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.header-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.header-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.header-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* v8.37.3: Help Dropdown Menu */
.help-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 260px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 9999;
    padding: 6px;
    animation: helpDropdownFadeIn 0.2s ease-out;
}
.help-dropdown-menu.show { display: block; }
@keyframes helpDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.help-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: #333;
    transition: background 0.15s;
}
.help-dropdown-item:hover { background: var(--bg-tertiary); }
.help-dropdown-item svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.help-dropdown-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.help-dropdown-item-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.3; margin-top: 2px; }

/* v8.37.3: User Manual Viewer */
/* ======================================================================
   User Manual — McKinsey-style Document Viewer
   ====================================================================== */
.user-manual-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,10,30,0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: helpDropdownFadeIn 0.2s ease-out;
}
.user-manual-container {
    width: 95vw;
    max-width: 1280px;
    height: 92vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* --- Header bar -------------------------------------------------------- */
.user-manual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1px solid #d0d5dd;
    background: linear-gradient(135deg, #00264d 0%, #003d73 100%);
    color: #fff;
    flex-shrink: 0;
}
.user-manual-header h2 {
    margin: 0; font-size: 17px; font-weight: 700;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.user-manual-header-meta { font-size: 11px; opacity: 0.75; margin-top: 2px; }
.user-manual-close {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: background 0.15s;
}
.user-manual-close:hover { background: rgba(255,255,255,0.25); }
/* --- Layout: sidebar + content ----------------------------------------- */
.user-manual-layout {
    display: flex;
    flex: 1;
    min-height: 0; /* CRITICAL: allows flex children to scroll */
}
/* --- Sidebar TOC ------------------------------------------------------- */
.user-manual-toc {
    width: 260px;
    min-width: 260px;
    background: #f7f8fa;
    border-right: 1px solid #e2e5ea;
    overflow-y: auto;
    padding: 20px 0;
    flex-shrink: 0;
    min-height: 0; /* enables scroll in flex child */
}
.user-manual-toc-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: #8a919e; padding: 0 20px 10px;
    border-bottom: 1px solid #e2e5ea; margin-bottom: 8px;
}
.user-manual-toc a {
    display: block;
    padding: 6px 20px;
    font-size: 13px; line-height: 1.4;
    color: #4a5568; text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.user-manual-toc a:hover {
    color: #003366; background: #edf0f5;
}
.user-manual-toc a.active {
    color: #003366; font-weight: 600;
    border-left-color: #003366; background: #e8edf4;
}
.user-manual-toc a.toc-h3 {
    padding-left: 36px; font-size: 12px; color: #718096;
}
.user-manual-toc a.toc-h3:hover { color: #003366; }
.user-manual-toc a.toc-h3.active { color: #003366; font-weight: 600; }
/* --- Main content area ------------------------------------------------- */
.user-manual-body {
    flex: 1;
    min-height: 0; /* CRITICAL: enables scroll in flex child */
    overflow-y: scroll; /* always show scrollbar */
    padding: 40px 56px 60px;
    font-family: 'Georgia', 'Cambria', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.8;
    color: #2d2d2d;
    scroll-behavior: smooth;
}
/* --- Scrollbar styling (always visible, prominent) --------------------- */
.user-manual-body::-webkit-scrollbar,
.user-manual-toc::-webkit-scrollbar {
    width: 10px;
}
.user-manual-body::-webkit-scrollbar-track,
.user-manual-toc::-webkit-scrollbar-track {
    background: #f0f1f3;
    border-radius: 5px;
}
.user-manual-body::-webkit-scrollbar-thumb,
.user-manual-toc::-webkit-scrollbar-thumb {
    background: #a0aec0;
    border-radius: 5px;
    border: 2px solid #f0f1f3;
}
.user-manual-body::-webkit-scrollbar-thumb:hover,
.user-manual-toc::-webkit-scrollbar-thumb:hover {
    background: #718096;
}
/* Firefox scrollbar */
.user-manual-body,
.user-manual-toc {
    scrollbar-width: auto;
    scrollbar-color: #a0aec0 #f0f1f3;
}
/* --- Typography -------------------------------------------------------- */
.user-manual-body h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 32px; font-weight: 800; color: #00264d;
    margin: 40px 0 20px; padding-bottom: 12px;
    border-bottom: 3px solid #00264d;
    letter-spacing: -0.02em;
}
.user-manual-body h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 22px; font-weight: 700; color: #00264d;
    margin: 40px 0 16px; padding: 12px 0 10px;
    border-bottom: 2px solid #003366;
    letter-spacing: -0.01em;
}
.user-manual-body h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px; font-weight: 600; color: #1a365d;
    margin: 28px 0 10px;
}
.user-manual-body h4 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px; font-weight: 600; color: #2d3748;
    margin: 20px 0 8px;
}
/* --- Tables ------------------------------------------------------------ */
.user-manual-body table {
    width: 100%; border-collapse: collapse;
    margin: 16px 0 24px; font-size: 14px;
    font-family: 'Inter', -apple-system, sans-serif;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    overflow: hidden;
}
.user-manual-body thead th {
    background: #00264d; color: #fff;
    padding: 11px 16px; text-align: left;
    font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.user-manual-body td {
    padding: 10px 16px; border-bottom: 1px solid #e8eaed;
    vertical-align: top; color: #374151;
}
.user-manual-body tbody tr:nth-child(even) { background: #f8f9fb; }
.user-manual-body tbody tr:hover { background: #edf2f7; }
/* --- Lists ------------------------------------------------------------- */
.user-manual-body ul, .user-manual-body ol { padding-left: 28px; margin: 10px 0; }
.user-manual-body li { margin: 5px 0; }
.user-manual-body li::marker { color: #003366; }
/* --- Code -------------------------------------------------------------- */
.user-manual-body code {
    background: #f0f2f5; padding: 2px 7px; border-radius: 4px;
    font-size: 13px; font-family: 'Consolas','Monaco',monospace;
    color: #c7254e; border: 1px solid #e2e5ea;
}
.user-manual-body pre {
    background: #1a1b2e; color: #cdd6f4;
    padding: 18px 20px; border-radius: 8px;
    overflow-x: auto; font-size: 13px; line-height: 1.6;
    margin: 12px 0 20px; border: 1px solid #2d2f45;
}
.user-manual-body pre code {
    background: transparent; color: inherit; padding: 0; border: none;
}
/* --- Blockquotes (McKinsey insight callout) ----------------------------- */
.user-manual-body blockquote {
    border-left: 4px solid #003366;
    margin: 20px 0; padding: 14px 20px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e8edf4 100%);
    color: #1a365d; font-style: italic;
    border-radius: 0 6px 6px 0;
    font-size: 14.5px;
}
/* --- Inline styles ----------------------------------------------------- */
.user-manual-body strong { color: #00264d; }
.user-manual-body hr {
    border: none; border-top: 1px solid #d0d5dd;
    margin: 32px 0;
}
.user-manual-body a { color: #0052CC; text-decoration: none; border-bottom: 1px solid #a3bffa; }
.user-manual-body a:hover { color: #003366; border-bottom-color: #003366; }
/* --- Paragraphs -------------------------------------------------------- */
.user-manual-body p { margin: 0 0 14px; }
/* --- Loading spinner --------------------------------------------------- */
.user-manual-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 200px; color: #666; gap: 12px;
}
.user-manual-loading .spinner {
    width: 32px; height: 32px;
    border: 3px solid #e0e0e0; border-top-color: #003366;
    border-radius: 50%; animation: umSpin 0.8s linear infinite;
}
@keyframes umSpin { to { transform: rotate(360deg); } }
/* --- Search Bar -------------------------------------------------------- */
.um-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-color, #e2e5ea);
    background: var(--bg-secondary, #f8f9fb);
}
.um-search-input-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #d0d5dd);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.um-search-input-wrap:focus-within {
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.12);
}
.um-search-icon {
    position: absolute;
    left: 12px;
    color: #8a919e;
    pointer-events: none;
}
#userManualSearch {
    width: 100%;
    padding: 9px 70px 9px 36px;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    background: transparent;
    color: var(--text-primary, #1a1a2e);
    outline: none;
}
#userManualSearch::placeholder {
    color: #8a919e;
}
.um-search-kbd {
    position: absolute;
    right: 36px;
    font-size: 10px;
    font-family: 'Inter', -apple-system, sans-serif;
    padding: 2px 6px;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    background: #f0f2f5;
    color: #8a919e;
    pointer-events: none;
    line-height: 1.4;
}
.um-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: #e2e5ea;
    color: #4a5568;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.um-search-clear:hover { background: #cbd5e0; }
/* --- Search Navigation ------------------------------------------------- */
.um-search-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.um-search-count {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}
.um-search-count.um-no-matches { color: #c41e3a; }
.um-search-nav-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    color: #4a5568;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.um-search-nav-btn:hover { background: #edf0f5; border-color: #003366; color: #003366; }
/* --- Highlight Marks --------------------------------------------------- */
mark.um-highlight {
    background: #FBBF24;
    color: #000;
    padding: 1px 2px;
    border-radius: 2px;
}
mark.um-highlight.um-highlight-current {
    background: #F97316;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(249,115,22,0.4);
}
/* --- TOC Match Badges -------------------------------------------------- */
.um-toc-has-match {
    font-weight: 600 !important;
    color: #003366 !important;
}
.um-toc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #003366;
    border-radius: 9px;
    line-height: 1;
    vertical-align: middle;
}
/* --- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
    .user-manual-toc { display: none; }
    .user-manual-body { padding: 24px 28px 40px; }
    .user-manual-container { width: 98vw; height: 96vh; max-width: none; }
    .um-search-kbd { display: none; }
}

.team-badge {
    background: #10B981;
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #FFFFFF;
    scroll-behavior: smooth;
}

.message-group {
    max-width: 800px;
    margin: 0 auto 24px auto;
    animation: fadeIn 0.3s ease-out;
}

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

.message-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.user-avatar {
    background: #0078D4;
    color: #FFFFFF;
}

.assistant-avatar {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.author-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.message-timestamp {
    font-size: 12px;
    color: #6B7280;
    margin-left: auto;
}

.message-content {
    padding-left: 40px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.message-meta {
    padding-left: 40px;
    margin-top: 8px;
    font-size: 12px;
    color: #6B7280;
}

.phase3-badge {
    display: inline-block;
    background: #0078D4;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 6px;
    cursor: pointer;
}

.phase3-badge:hover {
    background: #106EBE;
}

/* ============================================
   ENHANCED RESPONSE DISPLAY - Claude.ai Style
   ============================================ */

/* Response card wrapper */
.advisor-response {
    background: var(--bg-secondary);
    border-radius: 12px;
    margin: 8px 0 16px 40px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

/* Response header with attribution */
.response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 8px;
}

.contributing-advisors {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.advisor-chip {
    background: var(--bg-primary);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.more-count {
    background: var(--color-primary);
    color: var(--text-inverse);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.synergy-badge {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Enhanced Tooltips System - Smart positioning */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    max-width: 250px;
    width: max-content;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}
/* Tooltip position variants - use data-tooltip-pos attribute */
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}
[data-tooltip-pos="left"]::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 8px);
    transform: translateY(-50%);
}
[data-tooltip-pos="right"]::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
}
/* For elements near left edge - align tooltip to left */
[data-tooltip-align="left"]::after {
    left: 0;
    transform: none;
}
/* For elements near right edge - align tooltip to right */
[data-tooltip-align="right"]::after {
    left: auto;
    right: 0;
    transform: none;
}
/* Help icon for tooltips */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-secondary);
    color: var(--bg-primary);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.help-icon:hover {
    opacity: 1;
}

.query-type-chip {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

/* Response body with improved typography - Claude.ai style compact */
/* v8.21.0: Professional report preview styling */
.response-body {
    padding: 12px 20px;
    line-height: 1.55;
    font-size: 14px;
    white-space: normal;  /* Override pre-wrap from .message-content for proper HTML rendering */
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #1a1a1a;
}

.response-body p {
    margin: 0 0 0.6em 0;
    text-align: justify;
}

.response-body p:last-child {
    margin-bottom: 0;
}

/* Reduce empty paragraph spacing from markdown */
.response-body p:empty,
.response-body br + br {
    margin: 0;
    display: none;
    height: 0;
    line-height: 0;
}

/* Professional list styling */
.response-body ul,
.response-body ol {
    margin: 0.4em 0 0.6em 0;
    padding-left: 1.8em;
}

.response-body li {
    margin: 0.2em 0;
    padding: 0;
    line-height: 1.5;
}

.response-body li p {
    margin: 0;
}

/* Professional blockquote with accent border */
.response-body blockquote {
    margin: 0.75em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #004B87;
    background: #F8F9FB;
    color: #444;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

/* Code blocks */
.response-body pre {
    margin: 0.75em 0;
    padding: 1em;
    border-radius: 6px;
}

.response-body code {
    padding: 0.15em 0.4em;
}

/* Professional branded tables */
.response-body table {
    margin: 0.75em 0;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    overflow: hidden;
}

.response-body th {
    padding: 0.6em 0.9em;
    background: #004B87;
    color: #FFFFFF;
    font-weight: 600;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 13px;
    text-align: left;
    border-bottom: 2px solid #003366;
}

.response-body td {
    padding: 0.5em 0.9em;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.response-body tr:nth-child(even) td {
    background: #F8F9FB;
}

.response-body tr:hover td {
    background: #EDF2F7;
}

/* Collapsible sections */
.response-body h2,
.response-body h3 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    border-bottom: 1px solid var(--border-light);
}

.response-body h4,
.response-body h5,
.response-body h6 {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

.response-body h2::before,
.response-body h3::before {
    content: "v";
    font-size: 10px;
    transition: transform 0.2s ease;
    color: var(--text-secondary);
}

.response-body h2.collapsed::before,
.response-body h3.collapsed::before {
    transform: rotate(-90deg);
}

.section-collapsed {
    display: none !important;
}

/* Response footer actions */
.response-footer {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-tertiary);
}

.response-action-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.response-action-btn:hover {
    background: var(--bg-secondary);
    border-color: #0078D4;
}

/* Perplexity Verification Button - Prominent purple gradient */
.verify-btn {
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.verify-btn:hover {
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    border-color: #7C3AED;
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

.verify-btn.verifying {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    cursor: wait;
    animation: pulse 1.5s infinite;
}

.verify-btn.verified {
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Save Document Button */
.save-btn {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: white;
    border: none;
}

.save-btn:hover {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

.save-btn.saving {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    cursor: wait;
}

.save-btn.saved {
    background: linear-gradient(135deg, #10B981, #059669);
}

.verification-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.verification-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.verification-status.partial {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.typing-indicator {
    padding-left: 40px;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Activity Indicator (rotating status messages) */
.activity-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.activity-icon {
    font-size: 18px;
    animation: pulse 2s ease-in-out infinite;
}

.activity-text {
    color: var(--text-primary);
    font-weight: 500;
}

.activity-dots {
    display: flex;
    gap: 4px;
    margin-left: 4px;
}

.activity-dot {
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: activityBounce 1.4s infinite ease-in-out;
}

.activity-dot:nth-child(1) { animation-delay: 0s; }
.activity-dot:nth-child(2) { animation-delay: 0.2s; }
.activity-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes activityBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-6px); opacity: 1; }
}

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

.typing-dot {
    width: 6px;
    height: 6px;
    background: #0078D4;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

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

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

@keyframes typing {
    0%, 60%, 100% {
        opacity: 0.3;
    }
    30% {
        opacity: 1;
    }
}

/* Input Area */
.chat-input-container {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    background: #FFFFFF;
    /* Enable scrolling when content expands (e.g., image generation panel) */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Meeting controls panel - scrollable when expanded */
/* Width constrained to match project/meetings window layout */
.meeting-controls-panel {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 100;
}

/* Export controls row dropdown menus */
#mainExportControlsRow {
    position: relative;
    z-index: 150;
}

#mainExportControlsRow > div {
    position: relative;
}

/* Dropdown menus for export buttons */
#mainQuickSaveMenu,
#mainExportDropdown,
#mainContextDropdown {
    z-index: 10000 !important;
}

/* Dropdown option hover effects */
.main-export-option:hover,
.main-context-option:hover {
    background: var(--bg-secondary) !important;
}

/* Smooth scrollbar styling */
.chat-input-container::-webkit-scrollbar,
.meeting-controls-panel::-webkit-scrollbar {
    width: 6px;
}

.chat-input-container::-webkit-scrollbar-track,
.meeting-controls-panel::-webkit-scrollbar-track {
    background: transparent;
}

.chat-input-container::-webkit-scrollbar-thumb,
.meeting-controls-panel::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.chat-input-container::-webkit-scrollbar-thumb:hover,
.meeting-controls-panel::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.input-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* Plus Button and Dropdown Menu */
.plus-menu-container {
    position: relative;
    display: inline-block;
}

.plus-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-secondary, #F3F4F6);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-secondary, #6B7280);
    transition: all 0.2s;
}

.plus-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary, #111827);
}

.plus-menu-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    z-index: 1000;
    display: none;
    padding: 8px 0;
}

.plus-menu-dropdown.show {
    display: block;
}

.plus-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary, #111827);
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.plus-menu-item:hover {
    background: var(--bg-hover, #F3F4F6);
}

.plus-menu-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6B7280);
}

.plus-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    position: relative; /* Required for absolutely positioned stop/inject buttons */
}

.file-attachment-area {
    margin-bottom: 12px;
    padding: 12px;
    background: #F9FAFB;
    border-radius: 8px;
    display: none;
}

.file-attachment-area.active {
    display: block;
}

.attached-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}

.remove-file {
    margin-left: auto;
    background: none;
    border: none;
    color: #EF4444;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.input-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.input-action-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.input-action-btn:hover {
    background: #F9FAFB;
    border-color: #0078D4;
}

.output-mode-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #374151;
}

.output-mode-select:hover {
    background: #F9FAFB;
    border-color: #0078D4;
}

.output-mode-select:focus {
    outline: none;
    border-color: #0078D4;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.output-mode-select option {
    padding: 8px;
}

/* ============================================
   PREMIUM INPUT SYSTEM v8.0
   ============================================ */

.chat-input {
    width: 100%;
    min-height: 56px;
    max-height: 200px;
    padding: var(--space-4) 140px var(--space-4) var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    font-size: var(--text-base);
    font-family: inherit;
    line-height: var(--leading-normal);
    color: var(--text-primary);
    resize: none;
    outline: none;
    transition: all var(--transition-base);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    /* Ensure paste/input works */
    user-select: text;
    -webkit-user-select: text;
    pointer-events: auto;
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.chat-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--input-focus-ring), var(--shadow-md);
}

.chat-input:disabled {
    background: #F9FAFB;
    cursor: not-allowed;
}

.send-button {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-width: 120px;
    height: 40px;
    padding: 0 16px;
    gap: 8px;
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #FFFFFF;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-btn);
}

.send-button:hover:not(:disabled) {
    background: #106EBE;
    transform: translateY(-1px);
}

.send-button:disabled {
    background: var(--border-color);
    cursor: not-allowed;
}

.stop-button {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: #DC2626;
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

/* Inject button - appears during streaming to allow prompt injection */
.inject-button {
    position: absolute;
    right: 52px;
    bottom: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.inject-button:hover {
    background: linear-gradient(135deg, #D97706, #B45309);
    transform: translateY(-1px);
}

.inject-button.active {
    display: flex;
}

/* Streaming indicator in input */
.chat-input.streaming {
    border-color: #F59E0B;
    background: rgba(245, 158, 11, 0.05);
}

.chat-input.streaming::placeholder {
    color: #D97706;
}

.stop-button.active {
    display: flex;
}

.stop-button:hover {
    background: #B91C1C;
    transform: translateY(-1px);
}

/* Message action buttons */
.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.message-group:hover .message-actions {
    opacity: 1;
}

.action-btn {
    background: #F3F4F6;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #6B7280;
}

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

/* Right Panel - Documents Panel (Claude Projects Style) */
.documents-panel {
    width: 380px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.documents-panel.collapsed {
    width: 48px;
    min-width: 48px;
    overflow: hidden;
}

.documents-panel.collapsed > *:not(.collapsed-strip) {
    display: none;
}

.documents-panel.collapsed .collapsed-strip {
    display: flex !important;
}

.documents-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.documents-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.documents-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-action-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.header-action-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.header-action-btn:active {
    transform: scale(0.98);
}

.header-action-btn.active {
    background: var(--color-primary);
    color: var(--text-inverse);
    border-color: var(--color-primary);
}

/* Conversation History Styles */
.conversation-history-section {
    border-top: 1px solid var(--border-color);
    margin-top: 16px;
    padding-top: 16px;
}

.conversation-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.conversation-history-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.new-chat-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.new-chat-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-dark));
    transform: translateY(-1px);
}

.conversation-list {
    max-height: 300px;
    overflow-y: auto;
}

.conversation-item {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    border: 1px solid transparent;
}

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

.conversation-item.active {
    background: rgba(0, 120, 212, 0.1);
    border-color: #0078D4;
}

.conversation-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

/* Background streaming indicator (pulsing dot) */
.bg-stream-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.bg-stream-indicator.streaming {
    background: #3B82F6;
    animation: bgStreamPulse 1.2s ease-in-out infinite;
}
.bg-stream-indicator.completed {
    background: #10B981;
}
@keyframes bgStreamPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}
.conversation-item.has-bg-stream {
    border-left: 2px solid #3B82F6;
}
.conversation-item.has-bg-stream-done {
    border-left: 2px solid #10B981;
}

.conversation-item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
}

.conversation-item-team {
    color: #0078D4;
    font-weight: 500;
}

.conversation-item-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
}

.conversation-item:hover .conversation-item-actions {
    display: flex;
}

.conversation-action-btn {
    padding: 4px 6px;
    font-size: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-secondary);
}

.conversation-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.conversation-action-btn.delete:hover {
    background: #FEE2E2;
    color: #DC2626;
    border-color: #DC2626;
}

.conversation-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 8px;
}

.save-indicator.saving {
    color: #F59E0B;
}

.save-indicator.saved {
    color: #10B981;
}

/* Document Tabs */
.documents-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.doc-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.doc-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.doc-tab.active {
    color: #0078D4;
    border-bottom-color: #0078D4;
    background: var(--bg-secondary);
}

/* Tab Content */
.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.tab-content.active {
    display: block;
}

/* Project Knowledge Section */
.knowledge-upload-area {
    margin-bottom: 16px;
    text-align: center;
}

.knowledge-upload-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
}

.knowledge-upload-btn:hover {
    border-color: #0078D4;
    background: var(--bg-secondary);
}

.knowledge-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.knowledge-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.knowledge-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.knowledge-file-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 16px;
}

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

.knowledge-file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knowledge-file-meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.knowledge-file-actions {
    display: flex;
    gap: 4px;
}

.knowledge-file-btn {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    border-radius: 4px;
}

.knowledge-file-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.knowledge-file-btn.delete:hover {
    color: #EF4444;
}

/* Insight Cards (smaller for collapsible) */
.insight-card {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border-light);
}

.insight-card h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.insight-metric {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 11px;
}

.insight-label {
    color: var(--text-secondary);
}

.insight-value {
    color: var(--text-primary);
    font-weight: 600;
}

.insight-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    background: #10B981;
    color: #FFFFFF;
}

.persona-chip {
    display: inline-block;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    font-size: 10px;
    margin: 2px;
    color: var(--text-primary);
}

/* Multi-file Attachment Display */
.attached-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attached-file-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
}

.attached-file-chip .file-icon {
    font-size: 14px;
}

.attached-file-chip .file-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attached-file-chip .remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 0;
    line-height: 1;
}

.attached-file-chip .remove-btn:hover {
    color: #EF4444;
}

.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
}

.welcome-screen h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.welcome-screen p {
    font-size: 15px;
    color: #6B7280;
    max-width: 500px;
    line-height: 1.6;
}

/* Suggested Prompts Styling */
.suggested-prompts {
    margin-top: 20px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 8px;
    max-width: 600px;
    width: 100%;
}

.suggested-prompts-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.suggested-prompt-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: left;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.suggested-prompt-btn:last-child {
    margin-bottom: 0;
}

.suggested-prompt-btn:hover {
    background: #EFF6FF;
    border-color: #0078D4;
    color: #0078D4;
}

.toggle-sidebar {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #6B7280;
    font-size: 20px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-ready {
    background: #10B981;
}

.status-empty {
    background: #F59E0B;
}

/* R3.5: Loading indicator with pulse animation */
.status-loading {
    background: #0078D4;
    animation: pulse 1.5s ease-in-out infinite;
}

.status-error {
    background: #DC2626;
}

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

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 15, 30, 0.38);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
    animation: fadeIn var(--transition-base) ease-out;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    scrollbar-gutter: stable;
}

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

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}

.modal-close {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Document Preview Modal - Claude Projects Style */
.document-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 15, 30, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 2500;  /* Higher than project window (2000) to show above it */
    align-items: center;
    justify-content: center;
}

.document-preview-modal.active {
    display: flex;
}

.document-preview-container {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 90%;
    max-width: 1000px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.document-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.document-preview-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.document-preview-title .doc-icon {
    font-size: 24px;
}

.document-preview-actions {
    display: flex;
    gap: 8px;
}

.preview-action-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-action-btn:hover {
    background: var(--bg-tertiary);
    border-color: #0078D4;
}

.preview-action-btn.primary {
    background: #0078D4;
    color: white;
    border-color: #0078D4;
}

.preview-action-btn.primary:hover {
    background: #106EBE;
}

/* Code/Preview Toggle (Claude Projects style) */
.preview-mode-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.toggle-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

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

.toggle-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Code view styling */
.code-view-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: var(--bg-secondary);
}

.code-view-container pre {
    margin: 0;
    padding: 16px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-primary);
}

.code-view-container code {
    font-family: inherit;
}

/* Line numbers for code view */
.code-with-lines {
    display: table;
    width: 100%;
}

.code-line {
    display: table-row;
}

.line-number {
    display: table-cell;
    text-align: right;
    padding-right: 12px;
    color: var(--text-tertiary);
    user-select: none;
    width: 40px;
    min-width: 40px;
}

.line-content {
    display: table-cell;
    white-space: pre-wrap;
}

.document-preview-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    line-height: 1;
}

.document-preview-close:hover {
    color: var(--text-primary);
}

.document-preview-body {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.document-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

.document-preview-markdown {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 32px 48px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.document-preview-markdown h1 { font-size: 28px; margin: 20px 0 12px 0; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; }
.document-preview-markdown h2 { font-size: 22px; margin: 18px 0 10px 0; border-bottom: 1px solid #F3F4F6; padding-bottom: 6px; }
.document-preview-markdown h3 { font-size: 18px; margin: 16px 0 8px 0; }
.document-preview-markdown p { margin: 10px 0; line-height: 1.6; }
.document-preview-markdown ul, .document-preview-markdown ol { margin: 10px 0 10px 24px; }
.document-preview-markdown li { margin: 4px 0; line-height: 1.5; }
.document-preview-markdown table { border-collapse: collapse; width: 100%; margin: 16px 0; }
.document-preview-markdown th, .document-preview-markdown td { border: 1px solid var(--border-color); padding: 10px 14px; text-align: left; }
.document-preview-markdown th { background: #F9FAFB; font-weight: 600; }
.document-preview-markdown pre { background: #F3F4F6; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; }
.document-preview-markdown code { font-family: 'Monaco', 'Menlo', monospace; font-size: 13px; }

/* Enhanced Artifact Card with Thumbnails */
.artifact-card.document-card {
    position: relative;
}

.artifact-thumbnail {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #F9FAFB 0%, var(--border-color) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.artifact-thumbnail .thumbnail-icon {
    font-size: 48px;
    opacity: 0.9;
}

.artifact-thumbnail.html-thumb {
    background: linear-gradient(135deg, #FEF3C7 0%, #FCD34D 100%);
}

.artifact-thumbnail.docx-thumb {
    background: linear-gradient(135deg, #DBEAFE 0%, #3B82F6 100%);
}

.artifact-thumbnail.pdf-thumb {
    background: linear-gradient(135deg, #FEE2E2 0%, #EF4444 100%);
}

.artifact-thumbnail.md-thumb {
    background: linear-gradient(135deg, #D1FAE5 0%, #10B981 100%);
}

.artifact-thumbnail-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.artifact-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.artifact-format-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.artifact-format-badge.html { background: #FEF3C7; color: #92400E; }
.artifact-format-badge.docx { background: #DBEAFE; color: #1E40AF; }
.artifact-format-badge.pdf { background: #FEE2E2; color: #991B1B; }
.artifact-format-badge.md { background: #D1FAE5; color: #065F46; }

.artifact-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    word-break: break-word;
}

.artifact-size {
    font-size: 11px;
    color: var(--text-secondary);
}

.artifact-actions-row {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.artifact-actions-row .artifact-btn {
    flex: 1;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 12px;
}

.artifact-btn.view-btn {
    background: #0078D4;
    color: white;
    border-color: #0078D4;
}

.artifact-btn.view-btn:hover {
    background: #106EBE;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #FFFFFF;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #D1D5DB;
}

/* v8.21.0: Professional Markdown Rendering Styles */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin-top: 10px;
    margin-bottom: 4px;
    font-weight: 600;
    line-height: 1.3;
    font-family: 'Arial', 'Helvetica', sans-serif;
    color: #1a1a1a;
}

.message-content h1 { font-size: 20px; border-bottom: 2px solid #004B87; padding-bottom: 6px; color: #004B87; margin-top: 16px; }
.message-content h2 { font-size: 17px; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; color: #003366; }
.message-content h3 { font-size: 15px; color: #004B87; }
.message-content h4 { font-size: 13.5px; color: #333; }
.message-content h5 { font-size: 12px; color: #555; }
.message-content h6 { font-size: 11px; color: #6B7280; }

.message-content p {
    margin-bottom: 4px;
    line-height: 1.45;
}

.message-content p:empty {
    display: none;
}

.message-content ul,
.message-content ol {
    margin-bottom: 6px;
    margin-top: 4px;
    padding-left: 22px;
}

.message-content li {
    margin-bottom: 2px;
    line-height: 1.4;
}

.message-content blockquote {
    margin: 8px 0;
    padding: 6px 16px;
    border-left: 4px solid #004B87;
    background: #F8F9FB;
    color: #444;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

.message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    border: 1px solid #D1D5DB;
}

.message-content table th,
.message-content table td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    font-size: 13px;
}

.message-content table th {
    background: #004B87;
    color: #FFFFFF;
    font-weight: 600;
    font-family: 'Arial', 'Helvetica', sans-serif;
    border-bottom: 2px solid #003366;
}

.message-content table tr:nth-child(even) td {
    background: #F8F9FB;
}

.message-content table tr:hover td {
    background: #EDF2F7;
}

/* Strong/bold text with brand color */
.message-content strong {
    color: #004B87;
    font-weight: 700;
}

.message-content code {
    background: #F3F4F6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    color: #1F2937;
}

.message-content pre {
    position: relative;
    background: #1E1E1E;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    overflow-x: auto;
}

.message-content pre code {
    background: transparent;
    padding: 0;
    color: #D4D4D4;
    display: block;
    line-height: 1.4;
    font-size: 12px;
}

.code-block-wrapper {
    position: relative;
    margin: 8px 0;
}

.copy-code-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #374151;
    color: #FFFFFF;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10;
}

.copy-code-btn:hover {
    background: #4B5563;
}

.copy-code-btn.copied {
    background: #059669;
}

/* Verification Summary Styles - Professional Formatting */
.verification-summary {
    margin-top: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.verification-summary h3 {
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.verification-summary h4 {
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    margin: 12px 0 6px 0;
}

.verification-summary table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.verification-summary table th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.verification-summary table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.verification-summary table tr:last-child td {
    border-bottom: none;
}

.verification-summary table td:first-child {
    font-weight: 600;
    color: #64748b;
    width: 140px;
    background: #fafbfc;
}

.verification-summary hr {
    border: none;
    border-top: 1px dashed #e2e8f0;
    margin: 16px 0;
}

.verification-summary ul {
    margin: 6px 0;
    padding-left: 20px;
}

.verification-summary li {
    margin: 4px 0;
    line-height: 1.5;
}

.verification-summary a {
    color: #3b82f6;
    text-decoration: none;
}

.verification-summary a:hover {
    text-decoration: underline;
}

.verification-summary strong {
    color: #334155;
}

.verification-summary p {
    margin: 6px 0;
    line-height: 1.5;
}

/* Status indicators in verification */
.verification-summary td:contains('[OK]'),
.verification-summary td:has(text*='VERIFIED') {
    color: #059669;
}

.message-content a {
    color: #0078D4;
    text-decoration: none;
}

.message-content a:hover {
    text-decoration: underline;
}

.message-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

.message-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0;
}

/* Syntax Highlighting - VS Code Dark+ Theme */
.hljs {
    background: #1E1E1E;
    color: #D4D4D4;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
    color: #569CD6;
}

.hljs-function,
.hljs-class .hljs-title {
    color: #DCDCAA;
}

.hljs-string,
.hljs-title,
.hljs-name,
.hljs-type,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
    color: #CE9178;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
    color: #6A9955;
}

.hljs-number,
.hljs-regexp,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: #B5CEA8;
}

.hljs-doctag {
    color: #608B4E;
}

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

.hljs-strong {
    font-weight: bold;
}

/* ============================================================ */
/* P2 FEATURES - Priority 2 Enhancements */
/* ============================================================ */

/* P2-11: Metadata Dashboard */
.metadata-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.metadata-panel.expanded {
    max-height: 800px;
}

.metadata-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.metadata-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metadata-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.metadata-item {
    background: var(--bg-primary);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

.metadata-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.metadata-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.persona-list {
    margin-top: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.persona-item {
    background: var(--bg-primary);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 12px;
    border: 1px solid var(--border-light);
}

.persona-name {
    font-weight: 600;
    color: var(--text-primary);
}

.persona-role {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* P2-12: Multi-File Upload */
.file-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    background: var(--bg-secondary);
}

.file-drop-zone.drag-over {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.05);
}

.file-drop-zone:hover {
    border-color: #3B82F6;
}

.file-list {
    margin-top: 12px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid var(--border-light);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.file-icon {
    font-size: 20px;
}

.file-details {
    flex: 1;
}

.file-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.file-size {
    font-size: 11px;
    color: var(--text-secondary);
}

.file-remove {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 18px;
}

.file-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

/* P2-13: Search Functionality */
.search-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    display: none;
}

.search-container.active {
    display: block;
}

.search-input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.search-controls {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}

.search-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 3px;
}

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

.search-count {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 6px;
}

.highlight-match {
    background: #FEF3C7;
    color: #92400E;
    padding: 2px 4px;
    border-radius: 2px;
}

.highlight-current {
    background: #FCD34D;
    color: #92400E;
    padding: 2px 4px;
    border-radius: 2px;
}

/* P2-14: Artifacts Panel */
.artifacts-panel {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.artifacts-panel.open {
    right: 0;
}

.artifacts-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.artifacts-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.artifacts-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.artifact-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

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

.artifact-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.artifact-actions {
    display: flex;
    gap: 8px;
}

.artifact-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

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

.artifact-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.artifact-editable {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 12px;
    background: var(--input-bg);
    color: var(--text-primary);
    resize: vertical;
}

/* P2-15: Token Usage Display */
.token-display {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 12px;
}

.token-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.token-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.token-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.cost-value {
    color: #10B981;
}

.token-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
}

/* Enhanced API Cost Tracking Banner - Premium Soft Design - BOTTOM POSITION */
.api-cost-banner {
    display: flex;  /* Always visible - shows $0 until API calls are made */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2100; /* Above project-window (2000) */
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    padding: 10px 20px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

.api-cost-banner.active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Collapsed state for cost banner */
.api-cost-banner.collapsed {
    padding: 6px 20px;
    height: 38px;
}

.api-cost-banner.collapsed .api-cost-section {
    display: none;
}

.api-cost-banner.collapsed .api-cost-total {
    display: none;
}

.api-cost-banner.collapsed .api-cost-collapsed-summary {
    display: flex !important;
}

.api-cost-collapsed-summary {
    display: none;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.api-cost-collapsed-summary .total-cost {
    font-weight: 600;
    color: var(--color-primary);
}

.api-cost-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--text-secondary);
    font-size: 12px;
    transition: all 0.2s;
    border-radius: 4px;
}

.api-cost-toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.api-cost-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.api-cost-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.api-cost-item.claude {
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(217, 119, 6, 0.05);
}

.api-cost-item.perplexity {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
}

.api-cost-item.deep-research {
    border-color: rgba(52, 168, 83, 0.3);
}

.api-cost-item.nano-banana {
    border-color: rgba(255, 193, 7, 0.4);
}

.api-cost-item.total {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.api-icon {
    font-size: 14px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.api-icon.claude {
    background: #D97706;
    color: white;
}

.api-icon.perplexity {
    background: #20808D;
    color: white;
}

.api-icon.deep-research {
    background: linear-gradient(135deg, #4285F4, #34A853);
    color: white;
}

.api-icon.nano-banana {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
}

.api-icon.total {
    background: #10B981;
    color: white;
}

.api-icon svg {
    width: 16px;
    height: 16px;
}

.api-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.api-name {
    font-size: 10px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-values {
    display: flex;
    gap: 8px;
    font-size: 12px;
}

.api-tokens {
    color: #CBD5E1;
}

.api-cost {
    color: #10B981;
    font-weight: 600;
}

.api-calls {
    color: #94A3B8;
    font-size: 10px;
}

.toggle-button {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-button:hover {
    background: var(--bg-tertiary);
}

.badge {
    background: #3B82F6;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

/* Additional P2 Component Styles */
.artifact-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.artifact-lang {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
}

.artifacts-empty {
    display: none;
}

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

.token-metric {
    display: flex;
    align-items: center;
    gap: 6px;
}

.metadata-toggle {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: all 0.2s;
}

.metadata-toggle:hover {
    background: var(--bg-secondary);
    border-color: #3B82F6;
}

.toggle-icon {
    color: var(--text-secondary);
    font-size: 12px;
}

.metadata-section {
    margin-bottom: 16px;
}

.metadata-section h4 {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    font-weight: 600;
}

.remove-file {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.remove-file:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.file-details {
    flex: 1;
    min-width: 0;
}

.file-details > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-btn:hover {
    background: var(--bg-secondary);
    border-color: #3B82F6;
}

.search-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.search-close:hover {
    color: var(--text-primary);
}

.search-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 13px;
}

.search-input:focus {
    outline: none;
    border-color: #3B82F6;
}

.artifacts-header button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.artifacts-header button:hover {
    color: var(--text-primary);
}

/* Responsive Design - Mobile and Tablet Support */
@media (max-width: 1024px) {
    .documents-panel {
        width: 320px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        z-index: 3100;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: calc(100% - 56px - env(safe-area-inset-bottom, 0px));
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        background: var(--bg-primary);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    .documents-panel {
        position: fixed;
        z-index: 3100;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 380px;
        height: calc(100% - 56px - env(safe-area-inset-bottom, 0px));
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        background: var(--bg-primary);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .documents-panel:not(.collapsed) {
        transform: translateX(0);
    }

    /* Hide desktop panel toggle buttons on mobile — tab bar replaces them */
    .panel-toggle-btn,
    .sidebar-toggle-btn,
    [onclick*="toggleMainLeftPanel"],
    [onclick*="toggleMainRightPanel"] {
        display: none !important;
    }

    .chat-container {
        margin-left: 0;
    }

    .message-group {
        max-width: 100%;
        padding: 12px;
    }

    .chat-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    .header-btn {
        font-size: 11px;
        padding: 6px 8px;
    }

    .chat-input-container {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .header-btn span {
        display: none;
    }

    .token-display {
        display: none;
    }

    .team-badge {
        display: none;
    }

    /* Welcome screen mobile improvements */
    .welcome-screen {
        padding: 20px 16px !important;
    }

    .welcome-screen h2 {
        font-size: 20px !important;
    }

    .welcome-screen p {
        font-size: 14px !important;
    }

    /* Industry cards stack on mobile */
    #industryQuickStart {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .industry-card {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }

    /* Input actions stack on mobile */
    .input-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .input-action-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .output-mode-select {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* Suggested prompts container */
    #suggestedPromptsContainer {
        padding: 8px !important;
    }

    .suggested-prompt-btn {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Chat input adjustments */
    .chat-input {
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* Advisor chips compact */
    .advisor-chip {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    .synergy-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    /* Response footer actions */
    .response-footer {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .response-action-btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

/* Tablet-specific adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    #industryQuickStart {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .input-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Touch-friendly improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
    .btn,
    button,
    .input-action-btn,
    .industry-card,
    .advisor-chip {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger touch targets for action buttons */
    .response-action-btn {
        min-height: 36px;
        padding: 8px 12px !important;
    }

    /* Better tap feedback */
    button:active,
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* =================================================================
   PROJECT WINDOW STYLES (Claude Projects-Style Enhancement)
   ================================================================= */

/* Open Project Window Button */
.open-project-window-btn {
    width: 100%;
    padding: 12px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 82, 204, 0.3);
}

.open-project-window-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 82, 204, 0.4);
}

.open-project-window-btn:disabled {
    background: var(--border-color);
    color: #4B5563;
    cursor: not-allowed;
    box-shadow: none;
}

.open-project-window-btn .btn-icon {
    font-size: 16px;
}

/* Project Stats */
.project-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.project-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.project-stats .stat-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

.project-stats .stat-divider {
    color: #D1D5DB;
}

/* =====================================================================
 * PROJECT PORTFOLIO WINDOW (Claude Projects-Style List View)
 * Similar to https://claude.ai/projects - shows all projects
 * ===================================================================== */
.project-portfolio-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 1900; /* Below project window (2000) */
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-portfolio-window.open {
    display: flex;
    opacity: 1;
}

.project-portfolio-window.banner-offset {
    top: 65px !important;
    height: calc(100vh - 65px) !important;
}

.portfolio-header {
    height: 72px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.portfolio-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.portfolio-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s;
}

.portfolio-back-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
}

.portfolio-title {
    font-size: 26px;
    font-weight: 700;
    color: #1F2937;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -0.02em;
}

.portfolio-title-icon {
    font-size: 32px;
}

.portfolio-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portfolio-new-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.portfolio-new-btn:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.portfolio-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.portfolio-close-btn:hover {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #DC2626;
}

.portfolio-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.portfolio-search {
    max-width: 500px;
    margin-bottom: 24px;
}

.portfolio-search input {
    width: 100%;
    padding: 12px 16px;
    padding-left: 44px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    background: var(--bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    transition: all 0.2s;
}

.portfolio-search input:focus {
    outline: none;
    border-color: #3B82F6;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
    padding: 8px 4px;
}

.portfolio-project-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.portfolio-project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.portfolio-project-card:hover {
    border-color: #3B82F6;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-4px);
}

.portfolio-project-card:hover::before {
    opacity: 1;
}

.portfolio-project-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.portfolio-project-name {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.4;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Meeting name edit button styles (2026-01-12) */
.portfolio-project-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.portfolio-edit-btn {
    background: transparent;
    border: none;
    color: #4B5563;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0;
}

.portfolio-project-card:hover .portfolio-edit-btn {
    opacity: 1;
}

.portfolio-edit-btn:hover {
    background: #F3F4F6;
    color: #4F46E5;
}

.portfolio-project-industry {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    color: #4F46E5;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
}

.portfolio-delete-btn {
    background: #F9FAFB;
    border: 1px solid var(--border-color);
    color: #6B7280;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.portfolio-delete-btn:hover {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #DC2626;
}

.portfolio-project-stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 12px;
}

.portfolio-project-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4B5563;
    font-weight: 500;
}

.portfolio-project-stat-icon {
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.portfolio-project-stat-value {
    font-weight: 700;
    color: #1F2937;
    margin-right: 4px;
}

.portfolio-project-date {
    font-size: 12px;
    color: #4B5563;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.portfolio-project-date::before {
    content: '🕒';
    font-size: 11px;
}

.portfolio-empty {
    text-align: center;
    padding: 80px 40px;
    color: var(--text-secondary);
    background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
    border-radius: 20px;
    border: 2px dashed var(--border-color);
    max-width: 500px;
    margin: 40px auto;
}

.portfolio-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    filter: grayscale(0.3);
}

.portfolio-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.portfolio-empty p {
    font-size: 15px;
    color: #6B7280;
    margin-bottom: 28px;
    line-height: 1.6;
}

/* Project Window (Full-screen Modal) - Token bar at BOTTOM */
.project-window {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 95px;  /* Offset for expanded cost tracking banner at bottom (increased from 75px) */
    width: 100vw;
    height: calc(100vh - 95px);  /* Account for expanded cost banner height */
    background: var(--bg-primary);
    z-index: 2000;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease, height 0.3s ease;
}

/* When cost banner is collapsed, give project window more space */
.project-window.banner-collapsed {
    bottom: 38px;
    height: calc(100vh - 38px);
}

/* Adjust Project Window position when cost banner is visible (legacy support) */
.project-window.banner-offset {
    top: 55px !important; /* Height of api-cost-banner */
    height: calc(100vh - 55px) !important;
}

.project-window.open {
    display: flex;
    opacity: 1;
}

/* Project Window Header */
.project-window-header {
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    flex-shrink: 0;
}

.project-window-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.project-window-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-window-back-btn:hover {
    background: var(--bg-secondary);
}

.project-window-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.project-window-title .project-name {
    color: #3B82F6;
}

.project-window-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-window-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-window-close-btn:hover {
    background: #FEE2E2;
    color: #EF4444;
}

/* Project Window Content (3-Column Layout) */
.project-window-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Conversations Panel (Left Column) */
.project-conversations-panel {
    width: 280px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    flex-shrink: 0;
    transition: width 0.3s ease, min-width 0.3s ease;
}

.project-conversations-panel.collapsed {
    width: 48px;
    min-width: 48px;
    overflow: hidden;
}

.project-conversations-panel.collapsed > *:not(.collapsed-strip) {
    display: none;
}

.project-conversations-panel.collapsed .collapsed-strip {
    display: flex !important;
}

/* Panel Toggle Buttons */
.panel-toggle-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.2s;
    z-index: 10;
}

.panel-toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.panel-toggle-btn.left {
    left: 0;
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.panel-toggle-btn.right {
    right: 0;
    border-radius: 6px 0 0 6px;
    border-right: none;
}

.project-conversations-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-conversations-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.project-conversations-new-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-conversations-new-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-dark));
    transform: translateY(-1px);
}

.project-conversations-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.project-conversations-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.project-conversations-search input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.project-conversations-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.project-conversation-item {
    padding: 12px;
    margin-bottom: 4px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-conversation-item:hover {
    background: var(--bg-tertiary);
}

.project-conversation-item.active {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3B82F6;
}

.project-conversation-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-conversation-item-meta {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.project-conversation-item-preview {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-conversations-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Conversation Processing Indicator - shown when a stream is running in background */
.conv-processing-indicator {
    font-size: 10px;
    color: #3B82F6;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.conv-processing-indicator .processing-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3B82F6;
    animation: processingPulse 1.4s infinite ease-in-out;
}

@keyframes processingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Conversation Context Menu */
.project-conversation-item {
    position: relative;
}

.project-conv-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.project-conversation-item:hover .project-conv-menu-btn {
    opacity: 1;
}

.project-conv-menu-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.project-conv-context-menu {
    position: absolute;
    top: 32px;
    right: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 140px;
    overflow: hidden;
}

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

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

.project-conv-context-menu-item.danger {
    color: #EF4444;
}

.project-conv-context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Inline Title Editing */
.project-conversation-item-title.editing {
    background: var(--bg-tertiary);
    border: 1px solid #3B82F6;
    border-radius: 4px;
    padding: 2px 6px;
    outline: none;
}

.project-conv-title-input {
    width: 100%;
    border: 1px solid #3B82F6;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}

/* Pinned Conversation */
.project-conversation-item.pinned {
    border-left: 3px solid #F59E0B;
}

.project-conversation-item .pin-icon {
    color: #F59E0B;
    font-size: 10px;
    margin-left: 4px;
}

/* R2.2: Contextual Hints System (replaces modal wizard) */
.contextual-hint {
    position: relative;
    display: inline-block;
}

.contextual-hint-bubble {
    position: absolute;
    background: linear-gradient(135deg, #0078D4 0%, #3B82F6 100%);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    max-width: 220px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,120,212,0.3);
    animation: hintPulse 2s ease-in-out infinite;
}

.contextual-hint-bubble::after {
    content: '';
    position: absolute;
    border: 8px solid transparent;
}

.contextual-hint-bubble.hint-left::after {
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #3B82F6;
}

.contextual-hint-bubble.hint-right::after {
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #0078D4;
}

.contextual-hint-bubble.hint-bottom::after {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #0078D4;
}

.contextual-hint-bubble .hint-dismiss {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
    line-height: 1;
}

.contextual-hint-bubble .hint-dismiss:hover {
    color: white;
}

.contextual-hint-bubble .hint-step {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 6px;
}

@keyframes hintPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(0,120,212,0.3); }
    50% { box-shadow: 0 4px 20px rgba(0,120,212,0.5); }
}

.hint-highlight {
    animation: highlightPulse 1.5s ease-in-out infinite;
}

@keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0,120,212,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(0,120,212,0.5); }
}

/* R3.2: Multi-Industry Filter Dropdown */
.multi-filter-dropdown {
    position: relative;
    display: inline-block;
}

.multi-filter-trigger {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    min-width: 140px;
}

.multi-filter-trigger:hover {
    border-color: var(--text-tertiary);
}

.multi-filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}

.multi-filter-options {
    padding: 8px 0;
}

.multi-filter-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.multi-filter-option:hover {
    background: var(--bg-hover);
}

.multi-filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0078D4;
}

.multi-filter-actions {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.multi-filter-actions button {
    background: none;
    border: none;
    color: #0078D4;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
}

.multi-filter-actions button:hover {
    text-decoration: underline;
}

/* R3.3: Breadcrumb Navigation */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1; /* Ensure breadcrumb stays visible */
}

.breadcrumb-nav a {
    color: #0078D4;
    text-decoration: none;
}

.breadcrumb-nav a:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--text-tertiary);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Meeting name edit button in breadcrumb (2026-01-12) */
.breadcrumb-edit-btn {
    background: transparent;
    border: none;
    color: #4B5563;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
    opacity: 0.5;
}

.breadcrumb-edit-btn:hover {
    background: #F3F4F6;
    color: #4F46E5;
    opacity: 1;
}

/* Enhanced Team Cards */
.project-team-card-enhanced {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.project-team-card-enhanced:hover {
    border-color: var(--text-tertiary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.project-team-card-enhanced.active {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.05);
}

.project-team-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.project-team-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.project-team-card-badge {
    font-size: 10px;
    padding: 2px 8px;
    background: #10B981;
    color: white;
    border-radius: 10px;
}

.project-team-card-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-team-card-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}

.project-team-card-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.project-team-card-actions {
    display: flex;
    gap: 8px;
}

/* Knowledge File Usage Indicator */
.knowledge-file-used {
    position: relative;
}

.knowledge-file-used::after {
    content: '✓ Used';
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 10px;
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.ai-response-knowledge-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Improved File Attachment UI */
.project-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.project-chat-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 4px 10px 4px 12px;
    font-size: 12px;
    color: var(--text-primary);
}

.project-chat-attachment-chip .remove-btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-tertiary);
    color: var(--bg-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background 0.15s ease;
}

.project-chat-attachment-chip .remove-btn:hover {
    background: #EF4444;
}

/* Conversation Grouping */
.project-conversations-group {
    margin-bottom: 16px;
}

.project-conversations-group-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px 4px;
}

/* Chat Panel (Center Column) */
.project-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    min-width: 0;
    position: relative;
}

.project-chat-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-chat-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.project-chat-team-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-chat-team-selector select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.project-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;  /* Prevent horizontal scroll */
    padding: 20px;
    position: relative;
}

/* Ensure all chat output stays within bounds */
.project-chat-messages * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.project-chat-messages pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-width: 100%;
}

.project-chat-messages table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* Scroll to bottom button - Positioned above Meeting Type controls */
.project-scroll-to-bottom {
    position: absolute;
    bottom: 195px;  /* Positioned above Meeting Type section */
    right: 50px;    /* Moved slightly left */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 50;
    transition: opacity 0.2s, transform 0.2s;
}

.project-scroll-to-bottom:hover {
    background: #2563EB;
    transform: scale(1.1);
}

.project-scroll-to-bottom.visible {
    display: flex;
}

.project-chat-message {
    margin-bottom: 16px;
    max-width: 85%;
}

.project-chat-message.user {
    margin-left: auto;
}

.project-chat-message-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    white-space: normal;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #1a1a1a;
}

/* v8.25.0: Professional formatting for project window chat bubbles */
/* Mirror .response-body styles so project window gets same table/content styling */
.project-chat-message-bubble p {
    margin: 0 0 0.6em 0;
    text-align: justify;
}

.project-chat-message-bubble p:last-child {
    margin-bottom: 0;
}

.project-chat-message-bubble p:empty,
.project-chat-message-bubble br + br {
    margin: 0;
    display: none;
    height: 0;
    line-height: 0;
}

/* Professional list styling */
.project-chat-message-bubble ul,
.project-chat-message-bubble ol {
    margin: 0.4em 0 0.6em 0;
    padding-left: 1.8em;
}

.project-chat-message-bubble li {
    margin: 0.2em 0;
    padding: 0;
    line-height: 1.5;
}

.project-chat-message-bubble li p {
    margin: 0;
}

/* Professional blockquote */
.project-chat-message-bubble blockquote {
    margin: 0.75em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #004B87;
    background: #F8F9FB;
    color: #444;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

/* Code blocks */
.project-chat-message-bubble pre {
    margin: 0.75em 0;
    padding: 1em;
    border-radius: 6px;
}

.project-chat-message-bubble code {
    padding: 0.15em 0.4em;
}

/* Professional branded tables */
.project-chat-message-bubble table {
    margin: 0.75em 0;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    overflow: hidden;
}

.project-chat-message-bubble th {
    padding: 0.6em 0.9em;
    background: #004B87;
    color: #FFFFFF;
    font-weight: 600;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 13px;
    text-align: left;
    border-bottom: 2px solid #003366;
}

.project-chat-message-bubble td {
    padding: 0.5em 0.9em;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.project-chat-message-bubble tr:nth-child(even) td {
    background: #F8F9FB;
}

.project-chat-message-bubble tr:hover td {
    background: #EDF2F7;
}

/* Heading styles */
.project-chat-message-bubble h2,
.project-chat-message-bubble h3 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    border-bottom: 1px solid var(--border-light);
}

.project-chat-message-bubble h4,
.project-chat-message-bubble h5,
.project-chat-message-bubble h6 {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

/* Strong/emphasis */
.project-chat-message-bubble strong {
    font-weight: 700;
    color: #1a1a1a;
}

.project-chat-message.user .project-chat-message-bubble {
    background: #3B82F6;
    color: white;
    border-bottom-right-radius: 4px;
}

.project-chat-message.assistant .project-chat-message-bubble {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.project-chat-message-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    padding: 0 4px;
}

/* Document Artifact - Claude Projects Style */
.document-artifact {
    margin-top: 12px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.document-artifact:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-artifact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0A1628 0%, #1E3A5F 100%);
    color: white;
}

.document-artifact-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-artifact-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.document-artifact-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.document-artifact-subtitle {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}

.document-artifact-actions {
    display: flex;
    gap: 8px;
}

.document-artifact-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.document-artifact-btn-primary {
    background: #3B82F6;
    color: white;
}

.document-artifact-btn-primary:hover {
    background: #2563EB;
}

.document-artifact-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.document-artifact-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.document-artifact-preview {
    padding: 16px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 12px;
    color: #475569;
    line-height: 1.6;
    border-top: 1px solid #E2E8F0;
}

.document-artifact-preview::-webkit-scrollbar {
    width: 6px;
}

.document-artifact-preview::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.document-artifact-footer {
    padding: 10px 16px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #64748B;
}

.document-artifact-generating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: #64748B;
}

.document-artifact-generating .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #E2E8F0;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Background Task Indicators (2026-01-07) */
.bg-task-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
}

.bg-task-indicator .spinner-dot {
    width: 8px;
    height: 8px;
    background: #3B82F6;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

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

.global-bg-task-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.global-bg-task-indicator:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.global-bg-task-indicator .task-count {
    background: white;
    color: #3B82F6;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    min-width: 16px;
    text-align: center;
}

.global-bg-task-indicator .spinner-icon {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ============================================
   PROCESSING STATUS DISPLAY v8.6
   Real-time status indicator for MPPG processing
   Similar to Claude's processing indicator
   ============================================ */
.processing-status-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: 400px;
    max-width: 90vw;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 16px 20px;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.processing-status-container.visible {
    display: block;
    opacity: 1;
}

.processing-status-container.hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

.processing-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.processing-status-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.processing-status-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.processing-status-phase {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.processing-status-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 12px;
    min-height: 20px;
}

.processing-status-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 12px;
}

.processing-status-progress {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.processing-status-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
    width: 0%;
}

.processing-status-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.processing-status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.processing-status-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: all 0.3s ease;
}

.processing-status-step-dot.active {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.2);
}

.processing-status-step-dot.completed {
    background: var(--color-success);
}

.processing-status-step-label {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.processing-status-step-label.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* Complete state styling */
.processing-status-container.complete .processing-status-spinner {
    border-color: var(--color-success);
    border-top-color: var(--color-success);
    animation: none;
}

.processing-status-container.complete .processing-status-progress-bar {
    background: linear-gradient(90deg, var(--color-success), #34D399);
}

/* Animation for status changes */
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.processing-status-message.updating {
    animation: statusPulse 0.5s ease;
}

/* Toast notification styles */
.background-task-toast {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.background-task-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.background-task-toast .toast-icon {
    font-size: 18px;
    font-weight: bold;
}

.background-task-toast .toast-message {
    flex: 1;
    font-size: 13px;
}

.background-task-toast .toast-action {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.background-task-toast .toast-action:hover {
    background: rgba(255, 255, 255, 0.3);
}

.background-task-toast .toast-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.background-task-toast .toast-close:hover {
    opacity: 1;
}

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

.project-chat-input-container {
    padding: 16px 20px;
    padding-bottom: 24px;  /* Extra padding to prevent token bar overlap */
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    /* Enable scrolling when content expands (e.g., image generation panel) */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Smooth scrollbar styling for project container */
.project-chat-input-container::-webkit-scrollbar {
    width: 6px;
}

.project-chat-input-container::-webkit-scrollbar-track {
    background: transparent;
}

.project-chat-input-container::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.project-chat-input-container::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Meeting controls panel scrollable container */
.meeting-controls-panel {
    max-height: 260px;  /* Allow scroll when meeting section is tall */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Meeting context row wrapping to prevent horizontal overflow */
#meetingContextRow {
    flex-wrap: wrap !important;
}

/* Ensure research toggles are always visible */
#webResearchToggle, #deepResearchToggle {
    display: flex !important;
    visibility: visible !important;
}

.project-chat-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.project-chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: none;
    min-height: 44px;
    max-height: 150px;
    /* Ensure paste/input works */
    user-select: text;
    -webkit-user-select: text;
    pointer-events: auto;
}

.project-chat-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.project-chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-btn);
}

.project-chat-send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-dark));
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.project-chat-send-btn:disabled {
    background: var(--border-color);
    color: #4B5563;
    cursor: not-allowed;
}

/* Project Window Stop/Inject Buttons */
.project-stop-btn {
    display: none;
    padding: 12px 14px;
    background: #DC2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.project-stop-btn.active {
    display: flex;
}

.project-stop-btn:hover {
    background: #B91C1C;
}

.project-inject-btn {
    display: none;
    padding: 12px 14px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    transition: all 0.2s ease;
}

.project-inject-btn.active {
    display: flex;
}

.project-inject-btn:hover {
    background: linear-gradient(135deg, #D97706, #B45309);
}

/* Streaming indicator for project chat input */
.project-chat-input.streaming {
    border-color: #F59E0B;
    background: rgba(245, 158, 11, 0.05);
}

.project-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
}

.project-chat-welcome-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.project-chat-welcome h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.project-chat-welcome p {
    font-size: 14px;
    max-width: 400px;
}

/* Resources Panel (Right Column) */
.project-resources-panel {
    width: 320px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.3s ease, min-width 0.3s ease;
}

.project-resources-panel.collapsed {
    width: 48px;
    min-width: 48px;
    overflow: hidden;
}

.project-resources-panel.collapsed > *:not(.collapsed-strip) {
    display: none;
}

.project-resources-panel.collapsed .collapsed-strip {
    display: flex !important;
}

/* Toggle Tabs for Resources Panel */
.project-resources-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
}

.project-resources-tab {
    flex: 1;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.project-resources-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.project-resources-tab.active {
    color: #3B82F6;
    background: var(--bg-secondary);
}

.project-resources-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #3B82F6;
}

.project-resources-tab-icon {
    margin-right: 6px;
}

.project-resources-tab-count {
    margin-left: 4px;
    font-size: 11px;
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 10px;
}

.project-resources-content {
    flex: 1;
    overflow-y: auto;
}

.project-resources-view {
    display: none;
}

.project-resources-view.active {
    display: block;
}

.project-resources-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.project-resources-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.project-resources-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.project-resources-add-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-resources-add-btn:hover {
    background: var(--bg-tertiary);
    border-color: #3B82F6;
    color: #3B82F6;
}

/* Team Card */
.project-team-card {
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
}

.project-team-card.active {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.project-team-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.project-team-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.project-team-card-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: #3B82F6;
    color: white;
    border-radius: 4px;
    font-weight: 500;
}

.project-team-card-meta {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
}

.project-team-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.project-team-card-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
}

.project-team-card-btn:hover {
    background: var(--bg-secondary);
}

.project-team-card-btn.remove:hover {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #EF4444;
}

/* Knowledge File Card */
.project-knowledge-card {
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-knowledge-card-icon {
    font-size: 20px;
    opacity: 0.7;
}

.project-knowledge-card-info {
    flex: 1;
    min-width: 0;
}

.project-knowledge-card-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-knowledge-card-meta {
    font-size: 10px;
    color: var(--text-secondary);
}

.project-knowledge-card-actions {
    display: flex;
    gap: 4px;
}

.project-knowledge-card-btn {
    padding: 4px 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
}

.project-knowledge-card-btn:hover {
    background: var(--bg-tertiary);
}

.project-knowledge-card-btn.remove:hover {
    background: #FEE2E2;
    color: #EF4444;
}

.project-knowledge-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
}

.project-knowledge-dropzone {
    padding: 20px 16px;
    text-align: center;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-knowledge-dropzone:hover {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.05);
}

.project-knowledge-dropzone.drag-over {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
}

/* Output Card Styles */
.project-output-card {
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
}

.project-output-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.project-output-card-icon {
    font-size: 24px;
    line-height: 1;
}

.project-output-card-info {
    flex: 1;
    min-width: 0;
}

.project-output-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

.project-output-card-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.project-output-card-context {
    background: var(--bg-tertiary);
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 11px;
}

.project-output-card-context-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.project-output-card-context-item + .project-output-card-context-item {
    margin-top: 4px;
}

.project-output-card-context-label {
    color: var(--text-tertiary);
}

.project-output-card-context-value {
    color: var(--text-primary);
    font-weight: 500;
}

.project-output-card-actions {
    display: flex;
    gap: 4px;
}

.project-output-card-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-output-card-btn:hover {
    background: var(--bg-tertiary);
    border-color: #3B82F6;
    color: #3B82F6;
}

.project-outputs-filter {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-secondary);
}

.project-outputs-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-outputs-filter-value {
    color: #3B82F6;
    font-weight: 500;
}

/* Project Window Footer */
.project-window-footer {
    padding: 8px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .project-resources-panel {
        width: 280px;
    }
}

@media (max-width: 900px) {
    .project-conversations-panel {
        width: 240px;
    }
    .project-resources-panel {
        width: 260px;
    }
}

/* ========================================
   Phase 7: Output Enhancement Styles
   16-Persona Multi-Expert Framework
   ======================================== */

/* Visual Hierarchy Callout Boxes */
.callout-box {
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0;
    border-left: 4px solid;
    background: var(--bg-secondary);
}

.callout-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.callout-box-icon {
    font-size: 18px;
}

.callout-box-content {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Callout Types */
.callout-key-finding {
    border-left-color: #0078D4;
    background: rgba(0, 120, 212, 0.08);
}

.callout-key-finding .callout-box-header {
    color: #0078D4;
}

.callout-risk-alert {
    border-left-color: #DC2626;
    background: rgba(220, 38, 38, 0.08);
}

.callout-risk-alert .callout-box-header {
    color: #DC2626;
}

.callout-recommendation {
    border-left-color: #10B981;
    background: rgba(16, 185, 129, 0.08);
}

.callout-recommendation .callout-box-header {
    color: #10B981;
}

.callout-synthesis {
    border-left-color: #8B5CF6;
    background: rgba(139, 92, 246, 0.08);
}

.callout-synthesis .callout-box-header {
    color: #8B5CF6;
}

.callout-decision-point {
    border-left-color: #F59E0B;
    background: rgba(245, 158, 11, 0.08);
}

.callout-decision-point .callout-box-header {
    color: #F59E0B;
}

/* Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-on-track {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.status-at-risk {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.status-off-track {
    background: rgba(220, 38, 38, 0.15);
    color: #DC2626;
}

/* Executive Summary Section */
.executive-summary {
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.05), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(0, 120, 212, 0.2);
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0;
}

.executive-summary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.executive-summary-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0078D4, #10B981);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.executive-summary-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.executive-summary-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

.executive-summary-meta {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Persona Matrix */
.persona-matrix {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
    overflow-x: auto;
}

.persona-matrix-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.persona-matrix-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.persona-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.persona-matrix-table th {
    background: var(--bg-tertiary);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.persona-matrix-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.persona-matrix-cell-agree {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    text-align: center;
    font-weight: 500;
}

.persona-matrix-cell-partial {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
    text-align: center;
    font-weight: 500;
}

.persona-matrix-cell-diverge {
    background: rgba(220, 38, 38, 0.15);
    color: #DC2626;
    text-align: center;
    font-weight: 500;
}

/* Decision Tree */
.decision-tree {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
}

.decision-tree-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.decision-tree-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.decision-node {
    position: relative;
    padding: 12px 16px;
    margin: 8px 0;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid #0078D4;
}

.decision-node-question {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.decision-node-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 16px;
}

.decision-node-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.decision-node-option::before {
    content: "→";
    color: #0078D4;
}

.decision-node-recommended {
    border-left-color: #10B981;
    background: rgba(16, 185, 129, 0.08);
}

.decision-confidence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.confidence-high {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.confidence-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.confidence-low {
    background: rgba(220, 38, 38, 0.15);
    color: #DC2626;
}

/* Red Team Analysis */
.red-team-analysis {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
}

.red-team-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.red-team-icon {
    font-size: 24px;
}

.red-team-title {
    font-size: 16px;
    font-weight: 600;
    color: #DC2626;
}

.red-team-challenge {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 14px;
    margin: 10px 0;
}

.red-team-challenge-title {
    font-weight: 600;
    font-size: 13px;
    color: #DC2626;
    margin-bottom: 6px;
}

.red-team-challenge-content {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
}

.red-team-response {
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid #10B981;
    padding: 10px 14px;
    margin-top: 8px;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Assumptions Registry */
.assumptions-registry {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
}

.assumptions-registry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.assumptions-registry-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.assumption-item {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 14px;
    margin: 8px 0;
}

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

.assumption-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.assumption-sensitivity {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.sensitivity-high {
    background: rgba(220, 38, 38, 0.15);
    color: #DC2626;
}

.sensitivity-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.sensitivity-low {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

/* Failure Mode Table */
.failure-mode-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 12px;
}

.failure-mode-table th {
    background: rgba(220, 38, 38, 0.1);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #DC2626;
    border-bottom: 2px solid rgba(220, 38, 38, 0.3);
}

.failure-mode-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.failure-mode-table tr:hover {
    background: var(--bg-secondary);
}

/* Critical Path Visualization */
.critical-path {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
}

.critical-path-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.critical-path-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.critical-path-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 20px;
    border-left: 3px solid #0078D4;
}

.critical-path-item {
    position: relative;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-left: 16px;
}

.critical-path-item::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0078D4;
    border: 3px solid var(--bg-primary);
}

.critical-path-item.milestone::before {
    background: #10B981;
    width: 16px;
    height: 16px;
    left: -26px;
}

.critical-path-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.critical-path-item-duration {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Executive Dashboard */
.executive-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.dashboard-metric {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.dashboard-metric-value {
    font-size: 28px;
    font-weight: 700;
    color: #0078D4;
    margin-bottom: 8px;
}

.dashboard-metric-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-metric-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
}

.trend-up {
    color: #10B981;
}

.trend-down {
    color: #DC2626;
}

.trend-neutral {
    color: var(--text-secondary);
}

/* Inverted Structure (Recommendation First) */
.recommendation-first {
    border: 2px solid #10B981;
    border-radius: 12px;
    overflow: hidden;
    margin: 16px 0;
}

.recommendation-first-header {
    background: linear-gradient(135deg, #10B981, #059669);
    padding: 20px;
    color: white;
}

.recommendation-first-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.recommendation-first-title {
    font-size: 18px;
    font-weight: 600;
}

.recommendation-first-body {
    padding: 20px;
    background: var(--bg-secondary);
}

.recommendation-first-impact {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
}

.recommendation-first-evidence {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Feedback Section */
.feedback-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
}

.feedback-rating {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.feedback-star {
    font-size: 24px;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
}

.feedback-star:hover,
.feedback-star.active {
    color: #F59E0B;
}

/* Multi-Expert Consensus Bar */
.consensus-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}

.consensus-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #0078D4);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.consensus-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Persona Role Tags */
.persona-role-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 120, 212, 0.1);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    color: #0078D4;
}

.persona-role-tag-icon {
    font-size: 12px;
}

/* Source Transparency */
.source-citation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s;
}

.source-citation:hover {
    background: var(--bg-secondary);
}

/* Progressive Disclosure Toggle */
.disclosure-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.2s;
}

.disclosure-toggle:hover {
    background: var(--bg-secondary);
    border-color: #0078D4;
}

.disclosure-toggle-icon {
    transition: transform 0.2s;
}

.disclosure-toggle.expanded .disclosure-toggle-icon {
    transform: rotate(180deg);
}

.disclosure-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.disclosure-content.expanded {
    max-height: 2000px;
}

/* === Data Validation Tags (8-tag system, patent-differentiated) === */
.expert-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
    margin: 0 2px;
}
.expert-tag.tag-verified, .tag-verified { background: var(--tag-verified, #D1FAE5); color: var(--tag-verified-text, #065F46); }
.expert-tag.tag-assumption, .tag-assumption { background: var(--tag-assumption, #FEF3C7); color: var(--tag-assumption-text, #92400E); }
.expert-tag.tag-estimate, .tag-estimate { background: var(--tag-estimate, #DBEAFE); color: var(--tag-estimate-text, #1E40AF); }
.expert-tag.tag-outdated, .tag-outdated { background: var(--tag-outdated, #FEE2E2); color: var(--tag-outdated-text, #991B1B); }
.expert-tag.tag-hallucination, .tag-hallucination { background: var(--tag-hallucination, #FCE7F3); color: var(--tag-hallucination-text, #9D174D); }
.expert-tag.tag-flagged, .tag-flagged { background: var(--tag-flagged, #FEF3C7); color: var(--tag-flagged-text, #92400E); }
.expert-tag.tag-consensus, .tag-consensus { background: var(--tag-consensus, #E0E7FF); color: var(--tag-consensus-text, #3730A3); }
.expert-tag.tag-minority, .tag-minority { background: var(--tag-minority-view, #F3F4F6); color: var(--tag-minority-text, #374151); }

/* === Connection Status Indicator === */
#connectionStatusIndicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: default;
}

/* === Tier Gate Modal Styles === */
.tier-gate-toast {
    max-width: 420px !important;
}

/* === Innovation Mode Preview === */
.innovation-preview {
    background: linear-gradient(135deg, #EDE9FE, #DBEAFE);
    border: 1px solid #C4B5FD;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
    font-size: 12px;
}
.innovation-preview .preview-header {
    font-weight: 600;
    color: #5B21B6;
    margin-bottom: 4px;
}
.innovation-preview .framework-list {
    color: #6D28D9;
    font-size: 11px;
}
.innovation-preview .cost-note {
    color: #7C3AED;
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.8;
}

/* === Analysis Quality Badge === */
.analysis-quality-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    border: 1px solid #A7F3D0;
    border-radius: 20px;
    font-size: 11px;
    color: #065F46;
    font-weight: 500;
    margin-top: 8px;
}

/* === Materials Active Chip === */
.materials-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 6px;
    font-size: 11px;
    color: #1E40AF;
    font-weight: 500;
}

/* === Phase Progress Display === */
.phase-progress {
    padding: 8px 12px;
    background: var(--bg-secondary, #F9FAFB);
    border-radius: 8px;
    margin: 4px 0;
}
.phase-progress .phase-label {
    font-size: 12px;
    color: var(--text-secondary, #6B7280);
    margin-bottom: 4px;
}
.phase-progress .progress-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}
.phase-progress .progress-fill {
    height: 100%;
    background: var(--color-primary, #3B82F6);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* === Unified Button System (F-25) === */
.btn-primary {
    background: var(--color-primary, #1A56DB);
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: transparent;
    color: var(--color-primary, #1A56DB);
    border: 1.5px solid var(--color-primary, #1A56DB);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary:hover { background: rgba(26, 86, 219, 0.05); }

.btn-tertiary {
    background: transparent;
    color: var(--text-secondary, #6B7280);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-tertiary:hover { background: var(--bg-secondary, #F3F4F6); }

.btn-danger {
    background: transparent;
    color: #EF4444;
    border: 1.5px solid #EF4444;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.05); }

/* =================================================================
   ENHANCED MOBILE STYLES (2026-01-07 - P0 Fixes)
   ================================================================= */

/* Mobile Token Bar - Compact Version (not hidden) */
@media (max-width: 480px) {
    .token-display {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
        font-size: 10px;
    }

    .token-display .token-item {
        padding: 2px 6px;
        white-space: nowrap;
    }

    /* Mobile-optimized chat input */
    .chat-input-container {
        padding: 8px;
    }

    .chat-input {
        min-height: 50px;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Touch-friendly buttons */
    .response-action-btn,
    .input-action-btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Collapsible cost banner mobile */
    .cost-banner-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        padding: 8px;
        z-index: 1000;
    }
}

/* =================================================================
   ACCESSIBILITY IMPROVEMENTS (WCAG 2.1 AA)
   ================================================================= */

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 8px 16px;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-muted: #333;
    }

    .premium-card,
    .premium-card-elevated {
        border-width: 2px;
    }

    button, .btn {
        border: 2px solid currentColor;
    }
}

/* Reduced motion for vestibular disorders */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode high contrast */
.dark-mode.high-contrast {
    --text-primary: #fff;
    --text-secondary: #ddd;
    --border-color: #fff;
}

/* =================================================================
   TEMPLATE LIBRARY & FAVORITES (2026-01-07)
   ================================================================= */

/* Template Library Panel */
.template-library-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    z-index: 10001;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.template-library-panel.active {
    display: flex;
}

.template-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.template-library-header h2 {
    font-size: var(--text-xl);
    font-weight: 600;
}

.template-library-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.template-category {
    margin-bottom: 24px;
}

.template-category-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: 12px;
}

.template-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    margin-bottom: 8px;
    transition: all var(--transition-fast);
}

.template-card:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary-light);
    transform: translateX(4px);
}

.template-card-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.template-card-content {
    flex: 1;
}

.template-card-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.template-card-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.template-card-tokens {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Favorites System */
.favorites-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    padding: 4px;
}

.favorite-btn:hover,
.favorite-btn.favorited {
    color: var(--color-gold);
    transform: scale(1.1);
}

.favorite-btn.favorited::before {
    content: '\2605'; /* Filled star */
}

.favorite-btn:not(.favorited)::before {
    content: '\2606'; /* Empty star */
}

/* =================================================================
   MICRO-INTERACTIONS & PROGRESS INDICATORS
   ================================================================= */

/* Enhanced loading skeleton */
.skeleton-text {
    height: 16px;
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-color) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.full { width: 100%; }

/* Progress ring */
.progress-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: var(--border-color);
}

.progress-ring-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

/* Stage progress indicator */
.stage-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}

.stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: all var(--transition-fast);
}

.stage-dot.active {
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
}

.stage-dot.completed {
    background: var(--color-success);
}

/* =================================================================
   EXPORT HISTORY PANEL
   ================================================================= */

.export-history-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 70vh;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    z-index: 10001;
    display: none;
    flex-direction: column;
}

.export-history-panel.active {
    display: flex;
}

.export-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.export-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.export-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

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

.export-item-icon {
    font-size: 24px;
}

.export-item-info {
    flex: 1;
}

.export-item-name {
    font-weight: 500;
}

.export-item-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.export-item-actions {
    display: flex;
    gap: 8px;
}

/* Bulk download checkbox */
.bulk-select-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.bulk-download-bar {
    display: none;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
}

.bulk-download-bar.active {
    display: flex;
}

/* =================================================================
   BREADCRUMBS & NAVIGATION
   ================================================================= */

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--text-muted);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Recent Items Panel */
.recent-items-panel {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.recent-items-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

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

.recent-item-icon {
    color: var(--text-muted);
}

.recent-item-text {
    flex: 1;
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-item-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* =================================================================
   MOBILE RESPONSIVE DESIGN SYSTEM v1.0 (2026-03-19)
   Phases 1-5: Full mobile responsiveness implementation
   ================================================================= */

/* -----------------------------------------------------------------
   PHASE 5: Dynamic Viewport Height (iOS address bar fix)
   ----------------------------------------------------------------- */
.full-height-mobile {
    height: calc(var(--vh, 1vh) * 100);
}

/* -----------------------------------------------------------------
   PHASE 1: Mobile Bottom Tab Bar (G1, G2)
   ----------------------------------------------------------------- */
.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    z-index: 3000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95);
}

.mobile-tab-bar__tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
    padding: 0 8px;
}

.mobile-tab-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    min-width: 64px;
    min-height: 48px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-tab-bar__item--active {
    color: var(--color-primary);
}

.mobile-tab-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mobile-tab-bar__label {
    font-size: 10px;
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------
   PHASE 1: Mobile Menu Bottom Sheet
   ----------------------------------------------------------------- */
.mobile-menu-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3100;
    pointer-events: none;
}

.mobile-menu-sheet.open {
    pointer-events: auto;
}

.mobile-menu-sheet__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.mobile-menu-sheet.open .mobile-menu-sheet__backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.mobile-menu-sheet__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    max-height: 70dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-sheet.open .mobile-menu-sheet__content {
    transform: translateY(0);
}

.mobile-menu-sheet__handle {
    width: 36px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 0 auto 16px;
}

.mobile-menu-sheet__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-menu-sheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    width: 100%;
    text-align: left;
    transition: background var(--transition-fast);
    min-height: 48px;
}

.mobile-menu-sheet__item:hover,
.mobile-menu-sheet__item:active {
    background: var(--bg-secondary);
}

/* -----------------------------------------------------------------
   PHASE 2: iOS-Safe Modal Constraints (G3)
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .modal-content,
    .document-preview-container,
    .project-modal-content,
    .share-modal-content,
    .template-library-panel,
    .team-library-panel {
        max-height: calc(var(--vh, 1vh) * 100 - 32px);
        max-height: 85dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Full-screen modals on mobile */
    .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
    }

    .document-preview-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }

    .project-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

/* -----------------------------------------------------------------
   PHASE 2: Responsive Tables (G5)
   ----------------------------------------------------------------- */
.responsive-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    position: relative;
}

.responsive-table-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg-primary));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.responsive-table-wrap.has-overflow::after {
    opacity: 1;
}

/* -----------------------------------------------------------------
   PHASE 2: Help Dropdown Viewport Clamping (G10)
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .help-dropdown-menu {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        max-height: 60dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-lg) !important;
        z-index: 3050 !important;
        width: auto !important;
    }
}

/* -----------------------------------------------------------------
   PHASE 3: Input Touch Targets (G9) — iOS zoom prevention
   ----------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: max(16px, 1em);  /* Prevents iOS zoom on focus */
        min-height: 44px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        padding: 12px 16px;
    }
}

/* -----------------------------------------------------------------
   PHASE 4: Responsive Typography (G6) — Fluid font scale
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --text-xs: clamp(0.75rem, 1.5vw, 0.75rem);
        --text-sm: clamp(0.8125rem, 1.8vw, 0.875rem);
        --text-base: clamp(0.9375rem, 2vw, 1rem);
        --text-lg: clamp(1.0625rem, 2.2vw, 1.125rem);
        --text-xl: clamp(1.1875rem, 2.5vw, 1.25rem);
    }
}

/* Fix G6: Minimum 12px for all interactive elements on mobile */
@media (max-width: 480px) {
    .header-btn {
        font-size: 12px;
        padding: 8px 10px;
    }

    .header-btn span {
        display: none; /* Keep icon-only but at readable size */
    }

    .response-action-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .advisor-chip {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .synergy-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .input-action-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .output-mode-select {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* -----------------------------------------------------------------
   PHASE 4: Sidebar Collapse Affordance (G14)
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar.collapsed .collapsed-strip {
        display: none;
    }

    /* Hide project window panel toggle buttons on mobile */
    .project-conversations-panel .panel-toggle-btn,
    .project-resources-panel .panel-toggle-btn,
    [onclick*="toggleProjectLeftPanel"],
    [onclick*="toggleProjectRightPanel"] {
        display: none !important;
    }
}

/* -----------------------------------------------------------------
   Mobile Panel Overlay (backdrop behind side panels)
   ----------------------------------------------------------------- */
.mobile-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 56px;
    background: rgba(0, 0, 0, 0);
    z-index: 3050;
    transition: background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-panel-overlay.visible {
    background: rgba(0, 0, 0, 0.3);
}

/* -----------------------------------------------------------------
   PHASE 4: Meeting Type Selector Small Phones (G15)
   ----------------------------------------------------------------- */
@media (max-width: 400px) {
    .meeting-type-grid,
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}

/* -----------------------------------------------------------------
   PHASE 5: Scroll Momentum (G12)
   ----------------------------------------------------------------- */
.sidebar-content,
.documents-panel .artifacts-list,
.chat-messages,
.modal-body,
.portfolio-content,
.project-conversations-panel,
.project-resources-panel,
.template-library-panel .template-list,
.favorites-panel .favorites-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* -----------------------------------------------------------------
   PHASE 1C: Portfolio Card Actions — Touch Devices (G4)
   ----------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .portfolio-card .project-card-actions,
    .portfolio-card .card-actions,
    .portfolio-card-actions {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        padding: 8px 12px;
        border-top: 1px solid var(--border-color);
        display: flex !important;
        gap: 8px;
    }

    /* Ensure action buttons are always visible, not hover-dependent */
    .project-card:hover .project-card-actions,
    .portfolio-card:hover .card-actions {
        opacity: 1;
    }
}

/* -----------------------------------------------------------------
   MASTER MOBILE LAYOUT: Bottom Tab Bar Accommodation
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Add bottom padding when tab bar is present */
    body.is-mobile-layout .chat-input-container {
        padding-bottom: calc(12px + 56px + env(safe-area-inset-bottom, 0px));
    }

    body.is-mobile-layout .chat-messages {
        padding-bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0px));
    }

    /* Ensure project window accommodates tab bar */
    body.is-mobile-layout .project-window {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    body.is-mobile-layout .project-portfolio-window {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Welcome screen demo cards: stack on mobile */
    .welcome-screen [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Welcome screen buttons stack */
    .welcome-screen [style*="display: flex; gap: 16px; align-items: center"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    .welcome-screen [style*="display: flex; gap: 16px; align-items: center"] button,
    .welcome-screen [style*="display: flex; gap: 16px; align-items: center"] label {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Project window header: compact on mobile */
    .project-window-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px !important;
    }

    .project-window-header-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .project-window-header-left a span {
        display: none; /* Hide brand text on mobile */
    }

    .project-window-header-right {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Project window: hide side panels by default on mobile */
    .project-conversations-panel {
        display: none;
    }

    .project-resources-panel {
        display: none;
    }

    /* Meeting type info modal: responsive grid */
    #meetingTypeInfoModal [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    #meetingTypeInfoModal [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Account settings modal */
    .account-settings-overlay .account-settings-container {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* Team library full-screen on mobile */
    .team-library-overlay .team-library-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        border-radius: 0 !important;
    }

    /* Marketplace responsive */
    .marketplace-container {
        padding: 16px 12px 120px !important;
    }

    .marketplace-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .marketplace-nav {
        flex-wrap: wrap;
        width: 100%;
    }

    .marketplace-toolbar {
        flex-direction: column;
    }

    .marketplace-search {
        width: 100%;
    }

    /* FAQ mobile */
    .faq-container {
        padding: 16px 12px !important;
    }

    /* Cost banner compact on mobile */
    .cost-banner {
        flex-wrap: wrap;
        font-size: 11px;
    }
}

/* Extra small phones */
@media (max-width: 360px) {
    .mobile-tab-bar__label {
        font-size: 9px;
    }

    .mobile-tab-bar__item {
        min-width: 56px;
        padding: 6px 8px;
    }

    .chat-input-container {
        padding: 6px !important;
    }
}

/* -----------------------------------------------------------------
   LANDSCAPE MOBILE
   ----------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-tab-bar {
        height: calc(44px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-tab-bar__tabs {
        height: 44px;
    }

    .mobile-tab-bar__label {
        display: none;
    }

    body.is-mobile-layout .chat-messages {
        padding-bottom: calc(16px + 44px + env(safe-area-inset-bottom, 0px));
    }

    body.is-mobile-layout .chat-input-container {
        padding-bottom: calc(12px + 44px + env(safe-area-inset-bottom, 0px));
    }
}