/* ============================================
   Helgie Web App Styles — "Basecamp" Theme
   Rivian-Inspired Design System v2.0
   ============================================ */

/* ============================================
   Design Tokens
   ============================================ */

:root {
  /* === LIGHT MODE (Default) === */

  /* Backgrounds - Limestone palette */
  --bg-primary: #F8F6F3;
  --bg-secondary: #F3F0EC;
  --bg-tertiary: #EBE7E1;

  /* Surfaces (cards, modals) */
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5F4F2;
  --bg-card-active: #EFEDEA;
  --bg-modal: #FFFFFF;

  /* Text hierarchy */
  --text-primary: #2D3436;
  --text-secondary: #636E72;
  --text-muted: #9BA3A9;
  --text-inverse: #FFFFFF;

  /* Borders & Dividers */
  --border-color: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.12);
  --border-focus: #2D5A4A;

  /* Accent - Forest Green (Primary actions) */
  --accent: #2D5A4A;
  --accent-hover: #245247;
  --accent-dim: rgba(45, 90, 74, 0.08);
  --accent-softer: rgba(45, 90, 74, 0.04);

  /* Accent Secondary - Ocean Blue */
  --accent-secondary: #3D7B8C;
  --accent-secondary-hover: #346B7A;
  --accent-secondary-dim: rgba(61, 123, 140, 0.08);

  /* Highlight - Soft Purple (FAB, special) */
  --highlight: #8B7CF6;
  --highlight-dim: rgba(139, 124, 246, 0.12);

  /* Semantic Colors */
  --color-success: #2D5A4A;
  --color-success-dim: rgba(45, 90, 74, 0.10);
  --color-warning: #C4784A;
  --color-warning-hover: #B56B3F;
  --color-warning-dim: rgba(196, 120, 74, 0.08);
  --color-warning-softer: rgba(196, 120, 74, 0.04);
  --color-error: #B85450;
  --color-error-hover: #A64945;
  --color-error-dim: rgba(184, 84, 80, 0.08);
  --color-info: #3D7B8C;
  --color-info-dim: rgba(61, 123, 140, 0.08);

  /* Status Badge Colors */
  --status-active-bg: rgba(45, 90, 74, 0.12);
  --status-active-text: #2D5A4A;
  --status-pending-bg: rgba(196, 120, 74, 0.12);
  --status-pending-text: #C4784A;
  --status-progress-bg: rgba(61, 123, 140, 0.12);
  --status-progress-text: #3D7B8C;
  --status-completed-bg: rgba(99, 110, 114, 0.08);
  --status-completed-text: #636E72;
  --status-blocked-bg: rgba(184, 84, 80, 0.12);
  --status-blocked-text: #B85450;
  --status-draft-bg: rgba(196, 180, 74, 0.12);
  --status-draft-text: #8B7F4A;
  --status-realized-bg: rgba(139, 124, 246, 0.12);
  --status-realized-text: #8B7CF6;
  --status-archived-bg: rgba(155, 163, 169, 0.08);
  --status-archived-text: #9BA3A9;

  /* Entity Type Colors */
  --color-task: #C4784A;         /* Canyon amber - tasks feel actionable */
  --color-task-light: rgba(196, 120, 74, 0.06);
  --color-task-dim: rgba(196, 120, 74, 0.12);
  --color-idea: #3D7B8C;         /* Ocean blue - ideas feel exploratory */
  --color-idea-light: rgba(61, 123, 140, 0.06);
  --color-idea-dim: rgba(61, 123, 140, 0.12);
  --color-output: #2D5A4A;       /* Forest green - outputs feel accomplished */
  --color-output-light: rgba(45, 90, 74, 0.06);
  --color-output-dim: rgba(45, 90, 74, 0.12);
  --color-memory: #8B7CF6;       /* Soft purple - memories feel reflective */
  --color-memory-light: rgba(139, 124, 246, 0.06);
  --color-memory-dim: rgba(139, 124, 246, 0.12);
  --color-knowledge: #6366F1;    /* Indigo - knowledge feels scholarly */
  --color-knowledge-light: rgba(99, 102, 241, 0.06);
  --color-knowledge-dim: rgba(99, 102, 241, 0.12);
  --color-project: #636E72;      /* Neutral - projects feel structural */
  --color-project-light: rgba(99, 110, 114, 0.06);
  --color-project-dim: rgba(99, 110, 114, 0.12);
  --color-collection: #6B7280;   /* Slate gray - collections feel organized */
  --color-collection-light: rgba(107, 114, 128, 0.06);
  --color-collection-dim: rgba(107, 114, 128, 0.12);
  --color-person: #9B7FB8;       /* Soft purple - people are relational */
  --color-person-light: rgba(155, 127, 184, 0.06);
  --color-person-dim: rgba(155, 127, 184, 0.12);

  /* Memory Sub-type Colors */
  --color-correction: #B85450;
  --color-decision: #C4784A;
  --color-commitment: #9B7FB8;
  --color-insight: #3D7B8C;
  --color-learning: #5D6BA3;
  --color-pattern: #4A8A6F;
  --color-gap: #9BA3A9;

  /* Task Priority Colors */
  --color-high: #B85450;
  --color-high-dim: rgba(184, 84, 80, 0.08);
  --color-medium: #C4784A;
  --color-medium-dim: rgba(196, 120, 74, 0.08);
  --color-low: #9BA3A9;
  --color-low-dim: rgba(155, 163, 169, 0.08);

  /* Task Complexity Colors */
  --color-quick: #2D5A4A;
  --color-quick-dim: rgba(45, 90, 74, 0.10);
  --color-medium-complexity: #C4784A;
  --color-medium-complexity-dim: rgba(196, 120, 74, 0.10);
  --color-deep: #5D6BA3;
  --color-deep-dim: rgba(93, 107, 163, 0.10);

  /* Overlays */
  --overlay-light: rgba(255, 255, 255, 0.8);
  --overlay-dark: rgba(0, 0, 0, 0.5);

  /* Illustrated Scene Colors (Home view) */
  --scene-sky-top: #D4E4EC;
  --scene-sky-bottom: #EBE6E0;
  --scene-sun: #F7E5B5;
  --scene-mountain-far: #B8C4CB;
  --scene-mountain-mid: #9BABB5;
  --scene-mountain-near: #8A9CA8;
  --scene-trees: #6B8A6E;
  --scene-stars: transparent;

  /* Syntax Highlighting (Code blocks) */
  --code-bg: #F3F0EC;
  --code-border: rgba(0, 0, 0, 0.06);
  --code-text: #2D3436;
  --code-keyword: #8B5A8B;
  --code-string: #2D5A4A;
  --code-number: #C4784A;
  --code-comment: #9BA3A9;
  --code-function: #3D7B8C;
  --code-variable: #5D6BA3;
  --code-operator: #636E72;

  /* File Type Colors */
  --file-code: #3D7B8C;
  --file-code-bg: rgba(61, 123, 140, 0.12);
  --file-code-border: rgba(61, 123, 140, 0.25);
  --file-code-bg-hover: rgba(61, 123, 140, 0.20);
  --file-code-border-hover: rgba(61, 123, 140, 0.40);
  --file-doc: #8B7CF6;
  --file-doc-bg: rgba(139, 124, 246, 0.12);
  --file-doc-border: rgba(139, 124, 246, 0.25);
  --file-doc-bg-hover: rgba(139, 124, 246, 0.20);
  --file-doc-border-hover: rgba(139, 124, 246, 0.40);
  --file-data: #C4784A;
  --file-data-bg: rgba(196, 120, 74, 0.12);
  --file-data-border: rgba(196, 120, 74, 0.25);
  --file-data-bg-hover: rgba(196, 120, 74, 0.20);
  --file-data-border-hover: rgba(196, 120, 74, 0.40);
  --file-config: #4A8A6F;
  --file-config-bg: rgba(74, 138, 111, 0.12);
  --file-config-border: rgba(74, 138, 111, 0.25);
  --file-config-bg-hover: rgba(74, 138, 111, 0.20);
  --file-config-border-hover: rgba(74, 138, 111, 0.40);
  --file-style: #3D9A8C;
  --file-style-bg: rgba(61, 154, 140, 0.12);
  --file-style-border: rgba(61, 154, 140, 0.25);
  --file-style-bg-hover: rgba(61, 154, 140, 0.20);
  --file-style-border-hover: rgba(61, 154, 140, 0.40);
  --file-markup: #B85470;
  --file-markup-bg: rgba(184, 84, 112, 0.12);
  --file-markup-border: rgba(184, 84, 112, 0.25);
  --file-markup-bg-hover: rgba(184, 84, 112, 0.20);
  --file-markup-border-hover: rgba(184, 84, 112, 0.40);
  --file-error: #B85450;
  --file-default: #9BA3A9;
  --file-default-bg: rgba(155, 163, 169, 0.12);
  --file-default-border: rgba(155, 163, 169, 0.25);
  --file-default-bg-hover: rgba(155, 163, 169, 0.20);
  --file-default-border-hover: rgba(155, 163, 169, 0.40);

  /* Link Colors */
  --link-visited: #7B6AB5;

  /* Callout/Alert Colors */
  --callout-note-bg: rgba(61, 123, 140, 0.08);
  --callout-note-border: #3D7B8C;
  --callout-tip-bg: rgba(45, 90, 74, 0.08);
  --callout-tip-border: #2D5A4A;
  --callout-warning-bg: rgba(196, 120, 74, 0.08);
  --callout-warning-border: #C4784A;
  --callout-danger-bg: rgba(184, 84, 80, 0.08);
  --callout-danger-border: #B85450;

  /* Mark/Highlight */
  --mark-bg: rgba(196, 180, 74, 0.25);

  /* Grid/Layout Values */
  --grid-card-min: 200px;
  --grid-card-max: 1fr;
  --content-max-width: 900px;
  --content-max-width-lg: 1200px;

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type Scale */
  --text-3xs: 0.5625rem;  /* 9px */
  --text-2xs: var(--space-2-5);   /* 10px */
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: var(--space-3);     /* 12px */
  --text-base: var(--space-3-5);  /* 14px */
  --text-md: 0.9375rem;   /* 15px */
  --text-lg: var(--space-4);        /* 16px */
  --text-xl: var(--space-5);    /* 18px */
  --text-2xl: 1.375rem;   /* 22px */
  --text-3xl: 1.625rem;   /* 26px */
  --text-4xl: var(--space-8);       /* 32px */
  --text-5xl: 3rem;       /* 48px - for empty state icons */
  --text-ios-input: 16px; /* Prevents iOS zoom on focus */

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

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

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* === Spacing (4px base grid) === */
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-highlight: 0 4px 20px rgba(139, 124, 246, 0.35);
  --shadow-accent: 0 4px 20px rgba(45, 90, 74, 0.25);

  /* === Border Radius === */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 9999px;

  /* === Animation === */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --duration-slowest: 500ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy aliases for compatibility */
  --transition-fast: 0.15s var(--ease-out);
  --transition-normal: 0.25s var(--ease-out);

  /* === Layout === */
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 0px;
  --header-height: 56px;
  --chat-height: 300px;
  --detail-width: 400px;

  /* === Z-Index Scale === */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-sidebar: 40;
  --z-modal-backdrop: 50;
  --z-modal: 60;
  --z-popover: 70;
  --z-tooltip: 80;
  --z-toast: 90;
  --z-max: 100;
}

/* === DARK MODE === */
[data-theme="dark"] {
  /* Backgrounds - Cool charcoal */
  --bg-primary: #1A1D21;
  --bg-secondary: #1E2225;
  --bg-tertiary: #252A2E;

  /* Surfaces */
  --bg-card: #252A2E;
  --bg-card-hover: #353B42;
  --bg-card-active: #3D444C;
  --bg-modal: #252A2E;

  /* Text */
  --text-primary: #F5F5F5;
  --text-secondary: #9EABB3;
  --text-muted: #6B7680;
  --text-inverse: #1A1D21;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-focus: #4A8A6F;

  /* Accents - Lighter for dark mode */
  --accent: #4A8A6F;
  --accent-hover: #5A9A7F;
  --accent-dim: rgba(74, 138, 111, 0.15);
  --accent-softer: rgba(74, 138, 111, 0.08);

  --accent-secondary: #5A9AAD;
  --accent-secondary-hover: #6AAABD;
  --accent-secondary-dim: rgba(90, 154, 173, 0.15);

  --highlight: #9B8AFB;
  --highlight-dim: rgba(155, 138, 251, 0.15);

  /* Semantic */
  --color-success: #4A8A6F;
  --color-success-dim: rgba(74, 138, 111, 0.15);
  --color-warning: #D4915E;
  --color-warning-hover: #E4A16E;
  --color-warning-dim: rgba(212, 145, 94, 0.12);
  --color-warning-softer: rgba(212, 145, 94, 0.06);
  --color-error: #E07470;
  --color-error-hover: #F08480;
  --color-error-dim: rgba(224, 116, 112, 0.12);
  --color-info: #5A9AAD;
  --color-info-dim: rgba(90, 154, 173, 0.15);

  /* Status Badge Colors (dark mode) */
  --status-active-bg: rgba(74, 138, 111, 0.20);
  --status-active-text: #5AAA8A;
  --status-pending-bg: rgba(212, 145, 94, 0.20);
  --status-pending-text: #D4915E;
  --status-progress-bg: rgba(90, 154, 173, 0.20);
  --status-progress-text: #5A9AAD;
  --status-completed-bg: rgba(158, 171, 179, 0.15);
  --status-completed-text: #9EABB3;
  --status-blocked-bg: rgba(224, 116, 112, 0.20);
  --status-blocked-text: #E07470;
  --status-draft-bg: rgba(212, 180, 94, 0.20);
  --status-draft-text: #D4B45E;
  --status-realized-bg: rgba(155, 138, 251, 0.20);
  --status-realized-text: #9B8AFB;
  --status-archived-bg: rgba(107, 118, 128, 0.15);
  --status-archived-text: #6B7680;

  /* Entity Colors */
  --color-task: #D4915E;
  --color-task-light: rgba(212, 145, 94, 0.08);
  --color-task-dim: rgba(212, 145, 94, 0.15);
  --color-idea: #5A9AAD;
  --color-idea-light: rgba(90, 154, 173, 0.08);
  --color-idea-dim: rgba(90, 154, 173, 0.15);
  --color-output: #4A8A6F;
  --color-output-light: rgba(74, 138, 111, 0.08);
  --color-output-dim: rgba(74, 138, 111, 0.15);
  --color-memory: #9B8AFB;
  --color-memory-light: rgba(155, 138, 251, 0.08);
  --color-memory-dim: rgba(155, 138, 251, 0.15);
  --color-knowledge: #818CF8;
  --color-knowledge-light: rgba(129, 140, 248, 0.08);
  --color-knowledge-dim: rgba(129, 140, 248, 0.15);
  --color-project: #9EABB3;
  --color-project-light: rgba(158, 171, 179, 0.08);
  --color-project-dim: rgba(158, 171, 179, 0.15);

  /* Memory Sub-types */
  --color-correction: #E07470;
  --color-decision: #D4915E;
  --color-commitment: #B89BD0;
  --color-insight: #5A9AAD;
  --color-learning: #8B9AD0;
  --color-pattern: #5AAA8A;
  --color-gap: #6B7680;

  /* Priority */
  --color-high: #E07470;
  --color-high-dim: rgba(224, 116, 112, 0.12);
  --color-medium: #D4915E;
  --color-medium-dim: rgba(212, 145, 94, 0.12);
  --color-low: #6B7680;
  --color-low-dim: rgba(107, 118, 128, 0.12);

  /* Complexity */
  --color-quick: #4A8A6F;
  --color-quick-dim: rgba(74, 138, 111, 0.15);
  --color-medium-complexity: #D4915E;
  --color-medium-complexity-dim: rgba(212, 145, 94, 0.15);
  --color-deep: #8B9AD0;
  --color-deep-dim: rgba(139, 154, 208, 0.15);

  /* Overlays */
  --overlay-light: rgba(255, 255, 255, 0.1);
  --overlay-dark: rgba(0, 0, 0, 0.6);

  /* Scene Colors (dark mode) */
  --scene-sky-top: #1a2a3a;
  --scene-sky-bottom: #1A1D21;
  --scene-sun: #3D4A5C;
  --scene-mountain-far: #252A30;
  --scene-mountain-mid: #2A3038;
  --scene-mountain-near: #2D3238;
  --scene-trees: #1A1D21;
  --scene-stars: rgba(245, 245, 245, 0.5);

  /* Syntax Highlighting (dark mode) */
  --code-bg: #252A2E;
  --code-border: rgba(255, 255, 255, 0.08);
  --code-text: #F5F5F5;
  --code-keyword: #B89BD0;
  --code-string: #5AAA8A;
  --code-number: #D4915E;
  --code-comment: #6B7680;
  --code-function: #5A9AAD;
  --code-variable: #8B9AD0;
  --code-operator: #9EABB3;

  /* File Type Colors (dark mode) */
  --file-code: #5A9AAD;
  --file-code-bg: rgba(90, 154, 173, 0.15);
  --file-code-border: rgba(90, 154, 173, 0.30);
  --file-code-bg-hover: rgba(90, 154, 173, 0.25);
  --file-code-border-hover: rgba(90, 154, 173, 0.50);
  --file-doc: #9B8AFB;
  --file-doc-bg: rgba(155, 138, 251, 0.15);
  --file-doc-border: rgba(155, 138, 251, 0.30);
  --file-doc-bg-hover: rgba(155, 138, 251, 0.25);
  --file-doc-border-hover: rgba(155, 138, 251, 0.50);
  --file-data: #D4915E;
  --file-data-bg: rgba(212, 145, 94, 0.15);
  --file-data-border: rgba(212, 145, 94, 0.30);
  --file-data-bg-hover: rgba(212, 145, 94, 0.25);
  --file-data-border-hover: rgba(212, 145, 94, 0.50);
  --file-config: #5AAA8A;
  --file-config-bg: rgba(90, 170, 138, 0.15);
  --file-config-border: rgba(90, 170, 138, 0.30);
  --file-config-bg-hover: rgba(90, 170, 138, 0.25);
  --file-config-border-hover: rgba(90, 170, 138, 0.50);
  --file-style: #5AAAA0;
  --file-style-bg: rgba(90, 170, 160, 0.15);
  --file-style-border: rgba(90, 170, 160, 0.30);
  --file-style-bg-hover: rgba(90, 170, 160, 0.25);
  --file-style-border-hover: rgba(90, 170, 160, 0.50);
  --file-markup: #E07490;
  --file-markup-bg: rgba(224, 116, 144, 0.15);
  --file-markup-border: rgba(224, 116, 144, 0.30);
  --file-markup-bg-hover: rgba(224, 116, 144, 0.25);
  --file-markup-border-hover: rgba(224, 116, 144, 0.50);
  --file-error: #E07470;
  --file-default: #6B7680;
  --file-default-bg: rgba(107, 118, 128, 0.15);
  --file-default-border: rgba(107, 118, 128, 0.30);
  --file-default-bg-hover: rgba(107, 118, 128, 0.25);
  --file-default-border-hover: rgba(107, 118, 128, 0.50);

  /* Link Colors (dark mode) */
  --link-visited: #9B8AFB;

  /* Callout/Alert Colors (dark mode) */
  --callout-note-bg: rgba(90, 154, 173, 0.12);
  --callout-note-border: #5A9AAD;
  --callout-tip-bg: rgba(74, 138, 111, 0.12);
  --callout-tip-border: #4A8A6F;
  --callout-warning-bg: rgba(212, 145, 94, 0.12);
  --callout-warning-border: #D4915E;
  --callout-danger-bg: rgba(224, 116, 112, 0.12);
  --callout-danger-border: #E07470;

  /* Mark/Highlight (dark mode) */
  --mark-bg: rgba(212, 180, 94, 0.30);

  /* Shadows - Deeper for dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* System preference respects theme selection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Backgrounds - Cool charcoal */
    --bg-primary: #1A1D21;
    --bg-secondary: #1E2225;
    --bg-tertiary: #252A2E;

    /* Surfaces */
    --bg-card: #252A2E;
    --bg-card-hover: #353B42;
    --bg-card-active: #3D444C;
    --bg-modal: #252A2E;

    /* Text */
    --text-primary: #F5F5F5;
    --text-secondary: #9EABB3;
    --text-muted: #6B7680;
    --text-inverse: #1A1D21;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-focus: #4A8A6F;

    /* Accents */
    --accent: #4A8A6F;
    --accent-hover: #5A9A7F;
    --accent-dim: rgba(74, 138, 111, 0.15);
    --accent-softer: rgba(74, 138, 111, 0.08);

    --accent-secondary: #5A9AAD;
    --accent-secondary-hover: #6AAABD;
    --accent-secondary-dim: rgba(90, 154, 173, 0.15);

    --highlight: #9B8AFB;
    --highlight-dim: rgba(155, 138, 251, 0.15);

    /* Semantic */
    --color-success: #4A8A6F;
    --color-success-dim: rgba(74, 138, 111, 0.15);
    --color-warning: #D4915E;
    --color-warning-hover: #E4A16E;
    --color-warning-dim: rgba(212, 145, 94, 0.12);
    --color-warning-softer: rgba(212, 145, 94, 0.06);
    --color-error: #E07470;
    --color-error-hover: #F08480;
    --color-error-dim: rgba(224, 116, 112, 0.12);
    --color-info: #5A9AAD;
    --color-info-dim: rgba(90, 154, 173, 0.15);

    /* Entity Colors */
    --color-task: #D4915E;
    --color-task-light: rgba(212, 145, 94, 0.08);
    --color-task-dim: rgba(212, 145, 94, 0.15);
    --color-idea: #5A9AAD;
    --color-idea-light: rgba(90, 154, 173, 0.08);
    --color-idea-dim: rgba(90, 154, 173, 0.15);
    --color-output: #4A8A6F;
    --color-output-light: rgba(74, 138, 111, 0.08);
    --color-output-dim: rgba(74, 138, 111, 0.15);
    --color-memory: #9B8AFB;
    --color-memory-light: rgba(155, 138, 251, 0.08);
    --color-memory-dim: rgba(155, 138, 251, 0.15);
    --color-knowledge: #818CF8;
    --color-knowledge-light: rgba(129, 140, 248, 0.08);
    --color-knowledge-dim: rgba(129, 140, 248, 0.15);
    --color-project: #9EABB3;
    --color-project-light: rgba(158, 171, 179, 0.08);
    --color-project-dim: rgba(158, 171, 179, 0.15);

    /* Memory Sub-types */
    --color-correction: #E07470;
    --color-decision: #D4915E;
    --color-commitment: #B89BD0;
    --color-insight: #5A9AAD;
    --color-learning: #8B9AD0;
    --color-pattern: #5AAA8A;
    --color-gap: #6B7680;

    /* Priority */
    --color-high: #E07470;
    --color-high-dim: rgba(224, 116, 112, 0.12);
    --color-medium: #D4915E;
    --color-medium-dim: rgba(212, 145, 94, 0.12);
    --color-low: #6B7680;
    --color-low-dim: rgba(107, 118, 128, 0.12);

    /* Complexity */
    --color-quick: #4A8A6F;
    --color-quick-dim: rgba(74, 138, 111, 0.15);
    --color-medium-complexity: #D4915E;
    --color-medium-complexity-dim: rgba(212, 145, 94, 0.15);
    --color-deep: #8B9AD0;
    --color-deep-dim: rgba(139, 154, 208, 0.15);

    /* Overlays */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-dark: rgba(0, 0, 0, 0.6);

    /* Scene Colors */
    --scene-sky-top: #1a2a3a;
    --scene-sky-bottom: #1A1D21;
    --scene-sun: #3D4A5C;
    --scene-mountain-far: #252A30;
    --scene-mountain-mid: #2A3038;
    --scene-mountain-near: #2D3238;
    --scene-trees: #1A1D21;
    --scene-stars: rgba(245, 245, 245, 0.5);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.25);
  }
}

/* Explicit light mode override */
[data-theme="light"] {
  /* All light mode values are in :root by default */
}

/* ============================================
   Reset & Base
   ============================================ */

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

/* Smooth theme transitions */
*,
*::before,
*::after {
  transition: background-color var(--duration-slow) var(--ease-out),
              border-color var(--duration-slow) var(--ease-out);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* Prevent iOS zoom on interactive elements */
button,
input,
textarea,
select,
a {
  touch-action: manipulation;
}

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

/* ============================================
   App Layout
   ============================================ */

.app {
  display: flex;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
}

/* Content wrapper for push-drawer layout */
.content-wrapper {
  display: flex;
  flex: 1;
  min-width: 0;
  transition: all var(--transition-normal);
}

/* ============================================
   Sidebar — Basecamp Theme
   ============================================ */

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-card);
  border-right: var(--space-px) solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: var(--z-sidebar);
  transition: transform var(--duration-slow) var(--ease-out),
              width var(--duration-slow) var(--ease-out);
}

/* Desktop sidebar collapsed state */
.sidebar.collapsed {
  transform: translateX(-100%);
  width: 0;
  overflow: hidden;
}

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

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* Sidebar header home button - clickable logo */
.sidebar-home-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--space-2);
  margin: calc(-1 * var(--space-2));
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-out);
}

.sidebar-home-btn:hover {
  background: var(--bg-card-hover);
}

/* No special active state for sidebar home button */

.logo-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.logo-text {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
  line-height: 1.1;
}

.logo-subtext {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-align: left;
  width: 100%;
  border-left: 3px solid transparent;
  margin-left: -3px;
}

.nav-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

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

.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: var(--font-semibold);
}

.nav-item svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Navigation Section Labels */
.nav-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  padding: var(--space-4) var(--space-3) var(--space-2);
  margin-top: var(--space-1);
}

/* Navigation Type Dots */
.nav-type-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-right: -4px;
}

.nav-type-dot.project { background: var(--color-project); }
.nav-type-dot.task { background: var(--color-task); }
.nav-type-dot.idea { background: var(--color-idea); }
.nav-type-dot.memory { background: var(--color-memory); }
.nav-type-dot.knowledge { background: var(--color-knowledge); }
.nav-type-dot.output { background: var(--color-output); }

/* Type-specific active states */
.nav-item-project.active {
  border-left-color: var(--color-project);
  background: var(--color-project-dim);
  color: var(--color-project);
}
.nav-item-task.active {
  border-left-color: var(--color-task);
  background: var(--color-task-dim);
  color: var(--color-task);
}
.nav-item-idea.active {
  border-left-color: var(--color-idea);
  background: var(--color-idea-dim);
  color: var(--color-idea);
}
.nav-item-memory.active {
  border-left-color: var(--color-memory);
  background: var(--color-memory-dim);
  color: var(--color-memory);
}
.nav-item-output.active {
  border-left-color: var(--color-output);
  background: var(--color-output-dim);
  color: var(--color-output);
}

/* Navigation Badge */
.nav-badge {
  margin-left: auto;
  background: var(--color-warning);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}

/* Navigation Spacer */
.nav-spacer {
  flex: 1;
  min-height: var(--space-4);
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: var(--space-px) solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-primary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.refresh-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--accent);
}

.refresh-btn:active {
  transform: scale(0.97);
}

.refresh-btn svg {
  transition: transform var(--duration-slow) var(--ease-out);
}

.refresh-btn.refreshing svg {
  animation: spin 1s linear infinite;
}

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

.date-display {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* ============================================
   Main Content
   ============================================ */

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* ============================================
   Header — Basecamp Theme
   ============================================ */

.header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  border-bottom: var(--space-px) solid transparent;
  background: transparent;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Header gets solid background on non-home views, transparent on home */
.main-content:not(:has(#view-home.active)) .header {
  background: var(--bg-primary);
  border-bottom-color: var(--border-color);
}


.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-menu-btn {
  display: flex;
  padding: var(--space-2);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-lg);
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
}

.mobile-menu-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

.view-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--space-px) solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.header-badge:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.header-badge:active {
  transform: scale(0.97);
}

.badge-count {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--space-px) solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

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

.theme-toggle-btn:active {
  transform: scale(0.95);
}

/* Show sun in dark mode, moon in light mode */
.theme-icon-dark { display: none; }
.theme-icon-light { display: block; }

[data-theme="dark"] .theme-icon-dark { display: block; }
[data-theme="dark"] .theme-icon-light { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark { display: block; }
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
}

.chat-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--space-px) solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.chat-toggle-btn:hover {
  background: var(--highlight-dim);
  border-color: var(--highlight);
  color: var(--highlight);
  box-shadow: var(--shadow-md);
}

.chat-toggle-btn:active {
  transform: scale(0.95);
}

.chat-toggle-btn.active {
  background: var(--highlight);
  border-color: var(--highlight);
  color: white;
  box-shadow: var(--shadow-highlight);
}

/* ============================================
   Views Container — Basecamp Theme
   ============================================ */

.views-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8);
  position: relative;
  z-index: 1; /* Above the scene background */
}

/* On home view, mask the scroll content so it fades at the top as it scrolls under the header */
.main-content:has(#view-home.active) .views-container {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 100px);
  mask-image: linear-gradient(to bottom, transparent 0px, black 100px);
}

.view {
  display: none;
  max-width: 1024px;
  margin: 0 auto;
}

.view.active {
  display: block;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   Sections — Basecamp Theme
   ============================================ */

.section {
  margin-bottom: var(--space-8);
}

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

.section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

/* Section header with title and subtitle */
.section-header-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-subtitle {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Collapsible Sections */
.collapsible .section-header {
  cursor: pointer;
  padding: var(--space-2) 0;
  margin-bottom: 0;
}

.collapsible .section-header:hover .section-title {
  color: var(--text-secondary);
}

.collapsible .chevron {
  transition: transform var(--transition-fast);
  color: var(--text-muted);
}

.collapsible.collapsed .chevron {
  transform: rotate(-90deg);
}

.collapsible .section-content {
  overflow: hidden;
  transition: max-height var(--transition-normal);
  max-height: 1000px;
  padding-top: var(--space-4);
}

.collapsible.collapsed .section-content {
  max-height: 0;
  padding-top: 0;
}

/* ============================================
   Progress Indicator — Basecamp Theme
   ============================================ */

.progress-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.progress-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.progress-bar {
  width: 100px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

/* ============================================
   Illustrated Scene Background — Basecamp Theme
   Only visible on Home view
   Now lives at main-content level for proper z-index behind header
   ============================================ */

.scene-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 350px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 1; /* Visible by default for native app compatibility */
  transition: opacity var(--duration-normal) var(--ease-out);
  /* Fade the entire scene very gradually - no hard edge */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.1) 50%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.1) 50%, transparent 70%);
}

/* Hide scene on non-home views using :has() */
.main-content:has(.view.active:not(#view-home)) .scene-background {
  opacity: 0;
}

@media (min-width: 768px) {
  .scene-background {
    height: 420px;
  }
}

/* Content fade overlay - not needed, using mask on focus-section instead */
.content-fade-overlay {
  display: none;
}

.scene-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Scene element colors via CSS */
.scene-sky-top { stop-color: var(--scene-sky-top); }
.scene-sky-bottom { stop-color: var(--scene-sky-bottom); }
.scene-fade { stop-color: var(--bg-primary); }
.scene-sun { fill: var(--scene-sun); opacity: 1; }
.scene-mountain-far { fill: var(--scene-mountain-far); opacity: 0.7; }
.scene-mountain-mid { fill: var(--scene-mountain-mid); opacity: 0.8; }
.scene-mountain-near { fill: var(--scene-mountain-near); opacity: 0.9; }
.scene-trees { fill: var(--scene-trees); opacity: 0.7; }

/* Stars - only visible in dark mode */
.scene-stars { fill: var(--scene-stars); opacity: 0; }
[data-theme="dark"] .scene-stars { opacity: 0.5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene-stars { opacity: 0.5; }
}

/* Trees darker in dark mode for silhouette effect */
[data-theme="dark"] .scene-trees { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene-trees { opacity: 1; }
}

/* Mascot on mountain peak */
.scene-mascot {
  opacity: 0.95;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.15));
}

/* Smooth theme transition for scene */
.scene-svg * {
  transition: fill var(--duration-slowest) var(--ease-out),
              opacity var(--duration-slowest) var(--ease-out),
              stop-color var(--duration-slowest) var(--ease-out);
}

/* ============================================
   Dynamic Scene System - Time of Day & Weather
   ============================================ */

/* Location layers - only active one is visible */
.location-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slower) var(--ease-out);
}

.location-layer.active {
  opacity: 1;
}

/* Scene layer colors (replacing old mountain-specific classes) */
.scene-layer-far { fill: var(--scene-layer-far); opacity: 0.7; }
.scene-layer-mid { fill: var(--scene-layer-mid); opacity: 0.8; }
.scene-layer-near { fill: var(--scene-layer-near); opacity: 0.9; }

/* Time-based CSS variables (defaults - JS will update these) */
:root {
  /* Default daytime values */
  --scene-layer-far: var(--scene-mountain-far);
  --scene-layer-mid: var(--scene-mountain-mid);
  --scene-layer-near: var(--scene-mountain-near);

  /* Moon */
  --scene-moon: #E8E8E8;
  --scene-moon-shadow: #C8C8C8;

  /* Clouds */
  --cloud-light: rgba(255, 255, 255, 0.9);
  --cloud-dark: rgba(230, 230, 230, 0.8);
  --rain-cloud-light: rgba(120, 120, 130, 0.9);
  --rain-cloud-dark: rgba(80, 80, 90, 0.95);

  /* Beach */
  --scene-water: #4A90A4;
  --scene-water-wave: rgba(255, 255, 255, 0.3);
  --scene-sand: #E8DCC8;
  --scene-palm-trunk: #8B6914;
  --scene-palm-frond: #2D5A2D;

  /* Desert */
  --scene-mesa: #C4A882;
  --scene-cactus: #3D6B3D;

  /* Countryside */
  --scene-grass-far: #5A8A5A;
  --scene-grass-mid: #4A7A4A;
  --scene-grass-near: #3A6A3A;
  --scene-barn: #8B4513;
  --scene-barn-roof: #4A3020;
  --scene-fence: #8B7355;

  /* City */
  --scene-building-far: var(--scene-mountain-far);
  --scene-building-mid: var(--scene-mountain-mid);
  --scene-building-near: var(--scene-mountain-near);
  --scene-street: #4A4A50;
  --scene-window: rgba(255, 220, 150, 0.6);
}

/* Dark mode scene adjustments */
[data-theme="dark"] {
  --scene-layer-far: var(--scene-mountain-far);
  --scene-layer-mid: var(--scene-mountain-mid);
  --scene-layer-near: var(--scene-mountain-near);

  --scene-moon: #E8E8E8;
  --scene-moon-shadow: #A8A8A8;

  --cloud-light: rgba(60, 60, 70, 0.7);
  --cloud-dark: rgba(40, 40, 50, 0.8);
  --rain-cloud-light: rgba(40, 40, 50, 0.9);
  --rain-cloud-dark: rgba(25, 25, 35, 0.95);

  --scene-water: #1A3A4A;
  --scene-sand: #3A3428;
  --scene-palm-trunk: #3A2A0A;
  --scene-palm-frond: #1A3A1A;

  --scene-mesa: #4A3A2A;
  --scene-cactus: #1A3A1A;

  --scene-grass-far: #1A3A2A;
  --scene-grass-mid: #152A1F;
  --scene-grass-near: #102015;
  --scene-barn: #3A2010;
  --scene-barn-roof: #201510;
  --scene-fence: #3A3025;

  --scene-street: #1A1A20;
  --scene-window: rgba(255, 200, 100, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scene-layer-far: var(--scene-mountain-far);
    --scene-layer-mid: var(--scene-mountain-mid);
    --scene-layer-near: var(--scene-mountain-near);

    --cloud-light: rgba(60, 60, 70, 0.7);
    --cloud-dark: rgba(40, 40, 50, 0.8);
    --rain-cloud-light: rgba(40, 40, 50, 0.9);
    --rain-cloud-dark: rgba(25, 25, 35, 0.95);

    --scene-water: #1A3A4A;
    --scene-sand: #3A3428;
    --scene-palm-trunk: #3A2A0A;
    --scene-palm-frond: #1A3A1A;

    --scene-mesa: #4A3A2A;
    --scene-cactus: #1A3A1A;

    --scene-grass-far: #1A3A2A;
    --scene-grass-mid: #152A1F;
    --scene-grass-near: #102015;
    --scene-barn: #3A2010;
    --scene-barn-roof: #201510;
    --scene-fence: #3A3025;

    --scene-street: #1A1A20;
    --scene-window: rgba(255, 200, 100, 0.8);
  }
}

/* Sun and Moon */
.scene-sun {
  fill: var(--scene-sun);
  opacity: 1;
  transition: all var(--duration-slower) var(--ease-out);
}

.scene-moon {
  fill: var(--scene-moon);
  opacity: 0;
  transition: all var(--duration-slower) var(--ease-out);
}

/* Night mode - show moon, hide sun */
[data-time-period="night"] .scene-sun { opacity: 0; }
[data-time-period="night"] .scene-moon { opacity: 1; }
[data-time-period="late-night"] .scene-sun { opacity: 0; }
[data-time-period="late-night"] .scene-moon { opacity: 1; }

/* Stars visibility based on time */
.scene-stars {
  fill: currentColor;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity var(--duration-slowest) var(--ease-out);
}

[data-time-period="night"] .scene-stars { opacity: 0.7; }
[data-time-period="late-night"] .scene-stars { opacity: 0.8; }
[data-time-period="dawn"] .scene-stars { opacity: 0.2; }
[data-time-period="dusk"] .scene-stars { opacity: 0.3; }

/* Cloud styles */
.cloud {
  fill: url(#cloudGradient);
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-out);
}

.rain-cloud {
  fill: url(#rainCloudGradient);
}

.cloud-light { stop-color: var(--cloud-light); }
.cloud-dark { stop-color: var(--cloud-dark); }
.rain-cloud-light { stop-color: var(--rain-cloud-light); }
.rain-cloud-dark { stop-color: var(--rain-cloud-dark); }

/* Weather states */
[data-weather="partly-cloudy"] .cloud { opacity: 0.7; }
[data-weather="cloudy"] .cloud { opacity: 0.9; }
[data-weather="fog"] .cloud { opacity: 0.6; }
[data-weather="rainy"] .cloud { opacity: 1; }
[data-weather="stormy"] .cloud { opacity: 1; }
[data-weather="snowy"] .cloud { opacity: 0.85; }

/* Lightning flash */
.lightning-flash {
  opacity: 0;
  pointer-events: none;
}

@keyframes lightning {
  0%, 100% { opacity: 0; }
  5% { opacity: 0.8; }
  10% { opacity: 0; }
  15% { opacity: 0.5; }
  20% { opacity: 0; }
}

/* Rain particles */
.rain-drop {
  fill: none;
  stroke: rgba(150, 180, 220, 0.6);
  stroke-width: 1.5;
  stroke-linecap: round;
}

@keyframes rain-fall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(450px); opacity: 0; }
}

/* Snow particles */
.snowflake {
  fill: rgba(255, 255, 255, 0.9);
}

@keyframes snow-fall {
  0% {
    transform: translateY(-20px) translateX(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  50% { transform: translateY(200px) translateX(10px); }
  90% { opacity: 0.8; }
  100% {
    transform: translateY(450px) translateX(-5px);
    opacity: 0;
  }
}

/* ============================================
   Weather Animations
   ============================================ */

/* Cloud drift animation - seamless loop with gentle vertical bobbing */
/* Speed is set per-cloud via inline style for variation */
@keyframes cloud-drift-1 {
  0% { transform: translate(-200px, 0); }
  25% { transform: translate(75px, -8px); }
  50% { transform: translate(350px, 5px); }
  75% { transform: translate(625px, -5px); }
  100% { transform: translate(900px, 0); }
}

@keyframes cloud-drift-2 {
  0% { transform: translate(-200px, 0); }
  25% { transform: translate(75px, 6px); }
  50% { transform: translate(350px, -4px); }
  75% { transform: translate(625px, 8px); }
  100% { transform: translate(900px, 0); }
}

@keyframes cloud-drift-3 {
  0% { transform: translate(-200px, 0); }
  25% { transform: translate(75px, -5px); }
  50% { transform: translate(350px, 8px); }
  75% { transform: translate(625px, -3px); }
  100% { transform: translate(900px, 0); }
}

.cloud-animated {
  /* Duration set inline for per-cloud speed variation */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Bird flight animation */
/* Bird flight - left to right */
@keyframes bird-fly-right {
  0% {
    transform: translateX(-50px) translateY(0);
    opacity: 0;
  }
  3% { opacity: 1; }
  25% { transform: translateX(200px) translateY(-6px); }
  50% { transform: translateX(450px) translateY(4px); }
  75% { transform: translateX(700px) translateY(-5px); }
  97% { opacity: 1; }
  100% {
    transform: translateX(850px) translateY(0);
    opacity: 0;
  }
}

/* Bird flight - right to left */
@keyframes bird-fly-left {
  0% {
    transform: translateX(850px) translateY(0) scaleX(-1);
    opacity: 0;
  }
  3% { opacity: 1; }
  25% { transform: translateX(650px) translateY(-5px) scaleX(-1); }
  50% { transform: translateX(400px) translateY(6px) scaleX(-1); }
  75% { transform: translateX(150px) translateY(-4px) scaleX(-1); }
  97% { opacity: 1; }
  100% {
    transform: translateX(-50px) translateY(0) scaleX(-1);
    opacity: 0;
  }
}

/* Bird flight - diagonal (front to back, smaller) */
@keyframes bird-fly-diagonal {
  0% {
    transform: translateX(-30px) translateY(20px) scale(0.6);
    opacity: 0;
  }
  3% { opacity: 0.5; }
  50% { transform: translateX(400px) translateY(-10px) scale(0.5); }
  97% { opacity: 0.4; }
  100% {
    transform: translateX(850px) translateY(-30px) scale(0.4);
    opacity: 0;
  }
}

.bird {
  fill: var(--scene-layer-near);
}

.bird-group {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* Animation name and duration set inline */
}

.bird-group-distant {
  opacity: 0.4;
}

.bird-group-mid {
  opacity: 0.6;
}

.bird-group-near {
  opacity: 0.8;
}

/* Fog/mist animation */
@keyframes fog-drift {
  0% { transform: translateX(0); opacity: 0.3; }
  50% { opacity: 0.5; }
  100% { transform: translateX(100px); opacity: 0.3; }
}

@keyframes fog-drift-reverse {
  0% { transform: translateX(0); opacity: 0.25; }
  50% { opacity: 0.4; }
  100% { transform: translateX(-80px); opacity: 0.25; }
}

.fog-layer {
  fill: rgba(200, 200, 210, 0.3);
  animation-name: fog-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* Duration set inline for variation */
}

.fog-layer-2 {
  fill: rgba(180, 185, 195, 0.25);
  animation-name: fog-drift-reverse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

[data-theme="dark"] .fog-layer {
  fill: rgba(100, 105, 115, 0.4);
}

[data-theme="dark"] .fog-layer-2 {
  fill: rgba(80, 85, 95, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fog-layer {
    fill: rgba(100, 105, 115, 0.4);
  }
  :root:not([data-theme="light"]) .fog-layer-2 {
    fill: rgba(80, 85, 95, 0.35);
  }
}

/* Wind effect for clear days - subtle leaf/particle movement */
@keyframes wind-particle {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  50% { transform: translateX(150px) translateY(-20px) rotate(180deg); }
  90% { opacity: 0.4; }
  100% {
    transform: translateX(300px) translateY(10px) rotate(360deg);
    opacity: 0;
  }
}

.wind-particle {
  fill: var(--scene-layer-near);
  opacity: 0.5;
  animation-name: wind-particle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* Duration set inline for per-particle variation */
}

/* Mini-scene cloud animation - scaled for 200px width with gentle bob */
@keyframes mini-cloud-drift {
  0% { transform: translate(-50px, 0); }
  25% { transform: translate(17px, -2px); }
  50% { transform: translate(85px, 1px); }
  75% { transform: translate(152px, -1px); }
  100% { transform: translate(220px, 0); }
}

.mini-cloud-animated {
  animation-name: mini-cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* Duration set inline for variation */
}

.mini-scene-background .bird-group {
  animation: bird-fly 15s linear infinite;
}

.mini-scene-background .fog-layer {
  animation: fog-drift 40s ease-in-out infinite;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .cloud-animated,
  .cloud-animated-slow,
  .cloud-animated-reverse,
  .bird-group,
  .bird-group-delayed,
  .bird-wing,
  .fog-layer,
  .fog-layer-2,
  .wind-particle {
    animation: none;
  }
}

/* Beach specific */
.scene-water { fill: var(--scene-water); }
.scene-sand { fill: var(--scene-sand); }

.palm-trunk {
  fill: none;
  stroke: var(--scene-palm-trunk);
  stroke-width: 8;
  stroke-linecap: round;
}

.palm-frond {
  fill: none;
  stroke: var(--scene-palm-frond);
  stroke-width: 4;
  stroke-linecap: round;
}

/* Wave animation */
.wave {
  fill: none;
  stroke: var(--scene-water-wave);
  stroke-width: 2;
  stroke-linecap: round;
}

@keyframes wave-motion {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

.wave-1 { animation: wave-motion 4s ease-in-out infinite; }
.wave-2 { animation: wave-motion 4s ease-in-out infinite 0.5s; }

/* Desert specific */
.scene-mesa { fill: var(--scene-mesa); }

.cactus-trunk, .cactus-arm {
  fill: none;
  stroke: var(--scene-cactus);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cactus-arm {
  stroke-width: 4;
}

/* Countryside specific */
.scene-grass-far { fill: var(--scene-grass-far); }
.scene-grass-mid { fill: var(--scene-grass-mid); }
.scene-grass-near { fill: var(--scene-grass-near); }

.barn-body { fill: var(--scene-barn); }
.barn-roof { fill: var(--scene-barn-roof); }
.barn-door { fill: #2A1510; }
.silo-body { fill: #9A9A9A; }
.silo-top { fill: #7A7A7A; stroke: none; }

.scene-fence line {
  stroke: var(--scene-fence);
  stroke-width: 2;
}

.countryside-trees ellipse { fill: var(--scene-trees); }
.countryside-trees rect { fill: var(--scene-palm-trunk); }

/* City specific */
.city-buildings rect { fill: var(--scene-building-far); }
.scene-layer-mid.city-buildings rect { fill: var(--scene-building-mid); }
.city-buildings-near rect { fill: var(--scene-building-near); }
.scene-street { fill: var(--scene-street); }

/* City windows glow at night */
[data-time-period="night"] .city-buildings rect,
[data-time-period="late-night"] .city-buildings rect,
[data-time-period="dusk"] .city-buildings rect {
  /* Windows effect would need more complex implementation */
}

/* Lake specific */
.scene-lake {
  fill: var(--scene-water);
}

.lake-shimmer .shimmer {
  fill: rgba(255, 255, 255, 0.2);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

/* Forest specific */
.forest-trees path { fill: var(--scene-trees); }

/* ============================================
   Scene Settings UI
   ============================================ */

.settings-description {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.scene-location-toggle {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.location-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

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

.location-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.location-btn svg {
  width: 18px;
  height: 18px;
}

/* Toggle switch for random daily */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  transition: var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-full);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: var(--duration-fast) var(--ease-out);
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--accent-dim);
  border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: var(--accent);
}

/* Settings select dropdown */
.settings-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  min-width: 120px;
}

.settings-select:hover {
  border-color: var(--border-hover);
}

.settings-select:focus {
  outline: none;
  border-color: var(--accent);
}

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

.settings-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  min-width: 180px;
  max-width: 250px;
}

.settings-input:hover {
  border-color: var(--border-hover);
}

.settings-input:focus {
  outline: none;
  border-color: var(--accent);
}

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

/* Weather status display */
.weather-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.weather-temp {
  padding: var(--space-1) var(--space-2);
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
}

/* Weather location display */
.weather-location-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

#weather-location-display {
  color: var(--text-primary);
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.btn-text:hover {
  background: var(--accent-dim);
}

/* ============================================
   Mini Scene (Header Background for Sub-pages)
   ============================================ */

.mini-scene-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* Show mini scene on non-home views */
.main-content:has(.view.active:not(#view-home)) .mini-scene-background {
  opacity: 1;
}

/* Hide mini scene on home view (full scene is visible) */
.main-content:has(#view-home.active) .mini-scene-background {
  opacity: 0;
}

.mini-scene-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mini scene element styles */
.mini-scene-silhouette {
  fill: var(--scene-layer-near);
  opacity: 0.3;
}

.mini-scene-background .scene-sun {
  fill: var(--scene-sun);
  opacity: 0.6;
}

.mini-scene-background .scene-moon {
  fill: var(--scene-moon);
  opacity: 0;
}

.mini-scene-background .scene-stars {
  fill: currentColor;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
}

[data-time-period="night"] .mini-scene-background .scene-sun { opacity: 0; }
[data-time-period="night"] .mini-scene-background .scene-moon { opacity: 0.7; }
[data-time-period="night"] .mini-scene-background .scene-stars { opacity: 0.5; }

[data-time-period="late-night"] .mini-scene-background .scene-sun { opacity: 0; }
[data-time-period="late-night"] .mini-scene-background .scene-moon { opacity: 0.7; }
[data-time-period="late-night"] .mini-scene-background .scene-stars { opacity: 0.6; }

[data-time-period="dawn"] .mini-scene-background .scene-stars { opacity: 0.15; }
[data-time-period="dusk"] .mini-scene-background .scene-stars { opacity: 0.2; }
[data-time-period="dusk"] .mini-scene-background .scene-moon { opacity: 0.4; }

/* Mini-scene weather effects */
.mini-scene-background .mini-cloud {
  fill: url(#miniCloudGradient);
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-out);
}

.mini-scene-background .mini-cloud-animated {
  animation: cloud-drift 100s linear infinite;
}

[data-weather="partly-cloudy"] .mini-scene-background .mini-cloud { opacity: 0.5; }
[data-weather="cloudy"] .mini-scene-background .mini-cloud { opacity: 0.7; }
[data-weather="fog"] .mini-scene-background .mini-cloud { opacity: 0.5; }
[data-weather="rainy"] .mini-scene-background .mini-cloud { opacity: 0.8; }
[data-weather="stormy"] .mini-scene-background .mini-cloud { opacity: 0.8; }
[data-weather="snowy"] .mini-scene-background .mini-cloud { opacity: 0.65; }

/* Mini-scene rain (scaled) */
.mini-scene-background .mini-rain-drop {
  fill: none;
  stroke: rgba(150, 180, 220, 0.4);
  stroke-width: 0.5;
  stroke-linecap: round;
}

@keyframes mini-rain-fall {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(70px); opacity: 0; }
}

/* Mini-scene snow (scaled) */
.mini-scene-background .mini-snowflake {
  fill: rgba(255, 255, 255, 0.7);
}

@keyframes mini-snow-fall {
  0% { transform: translateY(-10px) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(30px) translateX(3px); }
  90% { opacity: 0.6; }
  100% { transform: translateY(70px) translateX(-2px); opacity: 0; }
}

/* Mini-scene fog */
.mini-scene-background .mini-fog-layer {
  fill: rgba(200, 200, 210, 0.2);
  animation: fog-drift 50s ease-in-out infinite;
}

[data-theme="dark"] .mini-scene-background .mini-fog-layer {
  fill: rgba(100, 105, 115, 0.25);
}

/* Mini-scene birds */
.mini-scene-background .mini-bird {
  fill: var(--scene-layer-near);
  opacity: 0.5;
}

@keyframes mini-bird-fly {
  0% { transform: translateX(-20px); opacity: 0; }
  5% { opacity: 0.7; }
  95% { opacity: 0.7; }
  100% { transform: translateX(220px); opacity: 0; }
}

.mini-scene-background .mini-bird-group {
  animation: mini-bird-fly 12s linear infinite;
}

/* Header needs relative positioning for mini scene */
.header {
  position: relative;
  overflow: hidden;
}

/* Ensure header content is above mini scene */
.header-left,
.header-right {
  position: relative;
  z-index: 1;
}

/* Make header background slightly transparent on non-home views to show mini scene */
.main-content:has(.view.active:not(#view-home)) .header {
  background: transparent;
}

/* Add a subtle gradient overlay to ensure text readability */
.main-content:has(.view.active:not(#view-home)) .header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--bg-primary-rgb, 248, 246, 243), 0.7) 0%,
    rgba(var(--bg-primary-rgb, 248, 246, 243), 0.85) 50%,
    var(--bg-primary) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Dark mode header overlay */
[data-theme="dark"] .main-content:has(.view.active:not(#view-home)) .header::after {
  background: linear-gradient(
    to bottom,
    rgba(26, 29, 33, 0.6) 0%,
    rgba(26, 29, 33, 0.8) 50%,
    var(--bg-primary) 100%
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .main-content:has(.view.active:not(#view-home)) .header::after {
    background: linear-gradient(
      to bottom,
      rgba(26, 29, 33, 0.6) 0%,
      rgba(26, 29, 33, 0.8) 50%,
      var(--bg-primary) 100%
    );
  }
}

/* Mini scene smooth transitions */
.mini-scene-svg * {
  transition: fill var(--duration-slower) var(--ease-out),
              opacity var(--duration-slower) var(--ease-out),
              stop-color var(--duration-slower) var(--ease-out);
}

/* Home view positioning */
#view-home {
  position: relative;
}

#view-home .section {
  position: relative;
  z-index: 1;
}

/* Push focus section down to account for scene */
#view-home .focus-section {
  margin-top: 80px;
}

@media (min-width: 768px) {
  #view-home .focus-section {
    margin-top: 120px;
  }
}

/* ============================================
   Focus List (Tasks) — Basecamp Theme
   Card-style task list for Today's Focus
   ============================================ */

/* Focus Section Card */
.focus-section {
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: visible;
}

/* Peeking mascot above focus card - feet resting on container edge */
.focus-mascot {
  position: absolute;
  top: -80px;
  left: 20px;
  width: 100px;
  height: 100px;
  object-fit: contain;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.08));
}

/* Larger screens - bigger mascot */
@media (min-width: 1200px) {
  .focus-mascot {
    width: 120px;
    height: 120px;
    top: -80px;
    left: 25px;
  }
}

/* Tablets - slightly larger mascot */
@media (min-width: 768px) and (max-width: 1199px) {
  .focus-mascot {
    width: 110px;
    height: 110px;
    top: -75px;
    left: 20px;
  }
}

/* Mobile - larger mascot for visibility */
@media (max-width: 767px) {
  .focus-mascot {
    width: 100px;
    height: 100px;
    top: -65px;
    left: 12px;
  }
}

/* Section mascot (smaller, for other sections) */
.section-mascot {
  position: absolute;
  top: -30px;
  right: 20px;
  width: 55px;
  height: 55px;
  object-fit: contain;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.06));
  transform: scaleX(-1); /* Flip to face left */
}

.section-mascot.hidden {
  display: none;
}

/* Sections need relative positioning for mascot */
.contextual-section,
.collapsible {
  position: relative;
}

@media (min-width: 1200px) {
  .section-mascot {
    width: 70px;
    height: 70px;
    top: -40px;
    right: 25px;
  }
}

@media (max-width: 767px) {
  .section-mascot {
    width: 40px;
    height: 40px;
    top: -22px;
    right: 10px;
  }
}

@media (min-width: 768px) {
  .focus-section {
    padding: var(--space-8);
  }
}

.focus-section .section-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-6);
}

.focus-section .section-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
}

.focus-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Project Group - Tasks grouped by project */
.focus-project-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.focus-project-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-out);
  user-select: none;
}

.focus-project-header:hover {
  background: var(--bg-card-hover);
}

.focus-project-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.focus-project-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.focus-project-group.collapsed .focus-project-toggle {
  transform: rotate(-90deg);
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.focus-project-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.focus-project-name:hover {
  color: var(--accent);
}

.focus-project-count {
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  margin-left: auto;
  border-radius: var(--radius-full);
  margin-left: auto;
}

.focus-project-done-badge {
  font-size: var(--text-sm);
  color: var(--color-success);
  margin-left: var(--space-2);
  padding-right: var(--space-2);
}

.focus-project-tasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-2);
  overflow: hidden;
  max-height: 1000px;
  transition: max-height var(--transition-normal), opacity var(--transition-normal);
}

.focus-project-group.collapsed .focus-project-tasks {
  max-height: 0;
  opacity: 0;
}

/* Completed project group styling */
.focus-project-group.project-complete {
  opacity: 0.7;
}

.focus-project-group.project-complete .focus-project-header {
  background: var(--bg-tertiary);
}

.focus-project-group.project-complete .focus-project-name {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Completed project count shows completion */
.focus-project-group.project-complete .focus-project-count {
  color: var(--color-success);
}

/* Visual separator between active and completed sections */
.focus-project-group:not(.project-complete) + .focus-project-group.project-complete {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--space-px) solid var(--border-color);
}

/* Focus header controls */
.focus-header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-icon-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-icon-small:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.btn-text-small {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 var(--space-3);
  border: none;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

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

/* Task Item — Basecamp Theme */
.focus-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

/* iPhone - compact task items (tighter sizing for small screens) */
@media (max-width: 480px) {
  .focus-item {
    padding: var(--space-2) var(--space-2-5);
    gap: var(--space-2);
  }

  .focus-title {
    font-size: 12px;
    line-height: 1.3;
  }

  .focus-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .priority-badge {
    font-size: 7px;
    padding: 2px 4px;
  }

  .focus-section {
    padding: var(--space-3);
  }

  .focus-section .section-title {
    font-size: var(--text-base);
  }

  .focus-section .section-subtitle {
    font-size: var(--text-2xs);
  }

  .focus-project-header {
    padding: var(--space-1) var(--space-1-5);
  }

  .focus-project-name {
    font-size: var(--text-2xs);
  }

  .focus-project-tasks {
    gap: var(--space-1);
  }

  .focus-list {
    gap: var(--space-4);
  }

  .complexity-badge {
    font-size: 7px;
    padding: 1px 4px;
  }
}

/* iPad - larger task items (optimized for tablet width) */
@media (min-width: 768px) and (max-width: 1024px) {
  .focus-item {
    padding: var(--space-5) var(--space-6);
    gap: var(--space-4);
  }

  .focus-title {
    font-size: var(--text-xl);
    line-height: 1.35;
  }

  .focus-checkbox {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .priority-badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  .focus-section {
    padding: var(--space-8) var(--space-10);
  }

  .focus-section .section-title {
    font-size: var(--text-3xl);
  }

  .focus-section .section-subtitle {
    font-size: var(--text-base);
  }

  .focus-project-name {
    font-size: var(--text-sm);
  }

  .focus-project-count {
    font-size: var(--text-xs);
  }

  .complexity-badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  .focus-list {
    gap: var(--space-7);
  }

  .focus-project-tasks {
    gap: var(--space-3);
  }
}

/* Desktop - comfortable sizing */
@media (min-width: 1025px) {
  .focus-item {
    padding: var(--space-5) var(--space-6);
  }
}

.focus-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.focus-item:active {
  transform: scale(0.99);
}

/* Priority styling - visual weight via left border accent */
.focus-item.priority-high {
  border-left: var(--space-1) solid var(--color-warning);
  background: var(--color-warning-softer);
}

.focus-item.priority-high .focus-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.focus-item.priority-high:hover {
  background: var(--color-warning-dim);
}

.focus-item.priority-medium {
  border-left: var(--space-px) solid var(--border-color);
}

.focus-item.priority-medium .focus-title {
  font-weight: var(--font-medium);
}

.focus-item.priority-low {
  border-left: none;
  opacity: 0.8;
}

.focus-item.priority-low .focus-title {
  font-weight: var(--font-normal);
  color: var(--text-secondary);
}

/* In-progress state */
.focus-item.in-progress {
  background: var(--color-task-light);
  border-color: var(--color-task);
}

/* Completed state - faded with strikethrough */
.focus-item.completed {
  opacity: 0.6;
  background: transparent;
}

.focus-item.completed .focus-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Checkbox - circular, touch-friendly, satisfying bounce */
.focus-checkbox {
  width: var(--space-5);
  height: var(--space-5);
  min-width: var(--space-5);
  border: var(--space-0-5) solid var(--border-color);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  background: var(--bg-card);
}

.focus-checkbox:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: scale(1.08);
}

.focus-checkbox:active {
  transform: scale(0.92);
}

.focus-item.completed .focus-checkbox {
  background: var(--color-success);
  border-color: var(--color-success);
  animation: checkBounce var(--duration-normal) var(--ease-spring);
}

@keyframes checkBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.focus-checkbox svg {
  opacity: 0;
  color: var(--text-inverse);
  transition: opacity var(--duration-fast) var(--ease-out);
  width: 14px;
  height: 14px;
}

.focus-item.completed .focus-checkbox svg {
  opacity: 1;
}

/* Completed row styling */
.focus-item.completed {
  opacity: 0.6;
  background: transparent;
}

.focus-item.completed .focus-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.focus-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.focus-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Project badge (small, muted) */
.focus-project {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.focus-project:hover {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

.focus-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-shrink: 0;
}

/* Priority badges in focus items */
.priority-badge {
  font-size: 9px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.3;
}

.priority-badge.priority-high {
  background: var(--color-warning);
  color: var(--text-inverse);
}

.priority-badge.priority-medium {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.priority-badge.priority-low {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

/* Output indicator */
.focus-output-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  color: var(--color-output);
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-output-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.focus-output-indicator:hover {
  background: var(--color-output-light);
}

.focus-output-indicator svg {
  flex-shrink: 0;
}

.focus-badges {
  display: flex;
  gap: var(--space-1);
}

/* Complexity Indicators - QUICK TASK/MEDIUM TASK/DEEP TASK badges (pill-shaped) */
.complexity-badge {
  min-width: auto;
  height: var(--space-5);
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.complexity-badge.quick {
  background: var(--color-quick-dim);
  color: var(--color-quick);
}

.complexity-badge.medium {
  background: var(--color-medium-complexity-dim);
  color: var(--color-medium-complexity);
}

.complexity-badge.deep {
  background: var(--color-deep-dim);
  color: var(--color-deep);
}

/* Badge Component — Basecamp Theme */
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 3px var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* Entity type badges */
.badge.type-task { color: var(--color-task); background: var(--color-task-dim); }
.badge.type-idea { color: var(--color-idea); background: var(--color-idea-dim); }
.badge.type-output { color: var(--color-output); background: var(--color-output-dim); }
.badge.type-memory { color: var(--color-memory); background: var(--color-memory-dim); }
.badge.type-knowledge { color: var(--color-knowledge); background: var(--color-knowledge-dim); }
.badge.type-project { color: var(--color-project); background: var(--color-project-dim); }

/* Priority badges */
.badge.priority-high { color: var(--color-high); background: var(--color-high-dim); }
.badge.priority-medium { color: var(--color-medium); background: var(--color-medium-dim); }
.badge.priority-low { color: var(--color-low); background: var(--color-low-dim); }

/* Complexity badges (task type) */
.badge.complexity-quick { color: var(--color-quick); background: var(--color-quick-dim); }
.badge.complexity-medium { color: var(--color-medium-complexity); background: var(--color-medium-complexity-dim); }
.badge.complexity-deep { color: var(--color-deep); background: var(--color-deep-dim); }

/* Memory sub-type badges */
.badge.type-correction { color: var(--color-correction); background: var(--color-error-dim); }
.badge.type-decision { color: var(--color-decision); background: var(--color-warning-dim); }
.badge.type-commitment { color: var(--color-commitment); background: rgba(155, 127, 184, 0.12); }
.badge.type-insight { color: var(--color-insight); background: var(--color-info-dim); }
.badge.type-learning { color: var(--color-learning); background: rgba(93, 107, 163, 0.12); }
.badge.type-pattern { color: var(--color-pattern); background: var(--color-success-dim); }
.badge.type-gap { color: var(--color-gap); background: rgba(155, 163, 169, 0.12); }

/* Complete button (optional action) */
.focus-complete-btn {
  display: none; /* Hidden by default, shown on hover/focus */
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.focus-item:hover .focus-complete-btn {
  display: flex;
}

.focus-complete-btn:hover {
  background: var(--color-success);
  color: var(--text-inverse);
}

/* Empty State — Basecamp Theme */
.focus-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--bg-card);
  border: var(--space-0-5) dashed var(--border-color);
  border-radius: var(--radius-xl);
}

.focus-empty-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.focus-empty-text {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
}

.focus-empty-hint {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
}

/* Focus Draft State (pre-dawn prep) */
.draft-badge {
  background: var(--accent);
  color: var(--text-inverse);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.focus-draft {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.focus-draft-section {
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.focus-draft-section[open] > .focus-draft-summary {
  border-bottom: var(--space-px) solid var(--border-color);
}

.focus-draft-summary {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card);
}

.focus-draft-summary:hover {
  background: var(--bg-hover);
}

.focus-draft-summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}

details[open] > .focus-draft-summary::before {
  transform: rotate(90deg);
}

.focus-draft-content {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.focus-draft-content p {
  margin: 0 0 var(--space-2) 0;
}

.focus-draft-content ul,
.focus-draft-content ol {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.focus-draft-content li {
  margin: var(--space-1) 0;
}

.focus-draft-content strong {
  color: var(--text-primary);
}

.focus-draft-tasks {
  padding: var(--space-3) var(--space-4);
}

.focus-draft-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.focus-draft-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.focus-draft-task-list li {
  padding: var(--space-2) 0;
  border-bottom: var(--space-px) solid var(--border-subtle);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.focus-draft-task-list li:last-child {
  border-bottom: none;
}

.focus-draft-task-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.focus-draft-cta {
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--accent-bg) 0%, transparent 100%);
  border-radius: var(--radius-lg);
  text-align: center;
}

.focus-draft-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* ============================================
   Quick Actions
   ============================================ */

.quick-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3-5);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-inverse);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-action-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.quick-action-btn.secondary {
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  color: var(--text-secondary);
}

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

/* ============================================
   Contextual Surfacing Section
   Related items surface based on today's work
   ============================================ */

.contextual-section {
  margin-top: var(--space-2);
}

/* Smaller title for contextual section - more inline with Recent Activity */
.contextual-section .section-title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: var(--font-semibold);
}

.contextual-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.show-more-btn {
  font-size: var(--text-2xs);
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.show-more-btn:hover {
  background: var(--accent-dim);
}

.contextual-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contextual-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3-5);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.contextual-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

/* Type indicator - colored dot/icon */
.contextual-type-indicator {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.contextual-type-indicator.memory { background: var(--color-memory); }
.contextual-type-indicator.idea { background: var(--color-idea); }
.contextual-type-indicator.output { background: var(--color-output); }
.contextual-type-indicator.person { background: var(--color-project); }

.contextual-content {
  flex: 1;
  min-width: 0;
}

.contextual-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contextual-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-0-5);
  font-size: var(--text-3xs);
  color: var(--text-muted);
}

.contextual-type-badge {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.contextual-type-badge.memory { color: var(--color-memory); background: var(--color-memory-dim); }
.contextual-type-badge.idea { color: var(--color-idea); background: var(--color-idea-dim); }
.contextual-type-badge.output { color: var(--color-output); background: var(--color-output-dim); }
.contextual-type-badge.person { color: var(--color-project); background: var(--color-project-dim); }

.contextual-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Contextual Grid - Small Card Layout */
.contextual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.contextual-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-2-5);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 60px;
}

.contextual-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

/* Contextual card type indicators - colored left border */
.contextual-card.type-memory { border-left: 3px solid var(--color-memory); }
.contextual-card.type-idea { border-left: 3px solid var(--color-idea); }
.contextual-card.type-output { border-left: 3px solid var(--color-output); }
.contextual-card.type-task { border-left: 3px solid var(--color-task); }
.contextual-card.type-knowledge { border-left: 3px solid var(--color-knowledge); }

.contextual-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.contextual-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
}

.contextual-card-icon.type-memory { color: var(--color-memory); }
.contextual-card-icon.type-idea { color: var(--color-idea); }
.contextual-card-icon.type-output { color: var(--color-output); }
.contextual-card-icon.type-task { color: var(--color-task); }
.contextual-card-icon.type-knowledge { color: var(--color-knowledge); }

.contextual-card-title {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contextual-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: auto;
}

.contextual-card-type {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: var(--font-semibold);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.contextual-card-type.memory { color: var(--color-memory); background: var(--color-memory-dim); }
.contextual-card-type.idea { color: var(--color-idea); background: var(--color-idea-dim); }
.contextual-card-type.output { color: var(--color-output); background: var(--color-output-dim); }

.contextual-card-project {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.contextual-card-project:hover {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

.contextual-card-project svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.contextual-card-time {
  font-size: var(--text-3xs);
  color: var(--text-muted);
  margin-left: auto;
}

/* Responsive: fewer columns on mobile */
@media (max-width: 600px) {
  .contextual-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .contextual-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Inbox Queue Section
   ============================================ */

.inbox-section {
  background: var(--bg-card);
  border: var(--space-px) solid var(--color-warning);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}

.inbox-section .section-header {
  margin-bottom: var(--space-3);
}

.inbox-hint {
  font-size: var(--text-3xs);
  color: var(--text-muted);
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
}

.inbox-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.inbox-dot.task { background: var(--color-task); }
.inbox-dot.idea { background: var(--color-idea); }
.inbox-dot.note { background: var(--text-muted); }

.inbox-content {
  flex: 1;
  min-width: 0;
}

.inbox-title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-meta {
  display: flex;
  gap: var(--space-1-5);
  margin-top: var(--space-1);
}

/* ============================================
   Notifications
   ============================================ */

.notification {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-modal);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
  z-index: 500;
  opacity: 0;
  transition: transform var(--transition-normal) ease, opacity var(--transition-normal) ease;
}

.notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Phase 4.1: Error notification styling */
.notification-error {
  background: rgba(248, 113, 113, 0.15);
  border-color: var(--color-error);
  color: var(--color-error);
}

.notification-success {
  background: rgba(74, 222, 128, 0.15);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* ============================================
   Projects Grid
   ============================================ */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.project-card {
  padding: var(--space-4);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.project-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.project-card-name {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.project-card-meta {
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.project-domain {
  display: inline-block;
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

.project-domain.work { color: var(--color-info); }
.project-domain.personal { color: var(--color-success); }
.project-domain.nonprofit { color: var(--color-commitment); }

/* ============================================
   Projects Landing View (New Full-Width Grid)
   ============================================ */

.projects-landing {
  padding: var(--space-4);
}

.projects-landing .projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

.projects-landing .project-card {
  padding: var(--space-5);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.projects-landing .project-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.project-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.projects-landing .project-card-header .project-card-name {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0;
  margin: 0;
  line-height: 1.3;
}

.project-card-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.project-card-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-stats {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--space-px) solid var(--border-color);
}

.project-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.project-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.project-stat-label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-card-subprojects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--space-px) solid var(--border-color);
}

.project-subproject-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.project-subproject-chip:hover {
  background: var(--bg-card-hover);
  color: var(--accent);
}

.project-subproject-chip svg {
  opacity: 0.6;
}

/* Project Card Landing Specific */
.project-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.project-card-domain {
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  padding: var(--space-0-5) var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.project-card-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.project-card-stat .stat-count {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.subprojects-label {
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  width: 100%;
  margin-bottom: var(--space-1);
}

.project-subproject-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.project-subproject-link:hover {
  background: var(--bg-card-hover);
  color: var(--accent);
}

.subprojects-more {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
}

/* Projects Detail View (Full Screen) */
.projects-detail-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.projects-detail-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: var(--space-px) solid var(--border-color);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.projects-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

.projects-back-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent);
  border-color: var(--accent);
}

.projects-back-btn svg {
  color: var(--text-muted);
}

.projects-back-btn:hover svg {
  color: var(--accent);
}

.projects-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.projects-breadcrumb .breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.projects-breadcrumb .breadcrumb-link:hover {
  color: var(--accent);
}

.projects-breadcrumb .breadcrumb-sep {
  color: var(--text-muted);
  margin: 0 var(--space-1);
}

.projects-detail-content {
  flex: 1;
  padding: var(--space-5);
  overflow-y: auto;
}

/* ============================================
   Recent List
   ============================================ */

.recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.recent-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

.recent-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  flex-shrink: 0;
}

.recent-dot.task { background: var(--color-task); }
.recent-dot.idea { background: var(--color-idea); }
.recent-dot.memory { background: var(--color-memory); }
.recent-dot.correction { background: var(--color-correction); }
.recent-dot.decision { background: var(--color-decision); }
.recent-dot.commitment { background: var(--color-commitment); }
.recent-dot.insight { background: var(--color-insight); }
.recent-dot.learning { background: var(--color-learning); }
.recent-dot.pattern { background: var(--color-pattern); }
.recent-dot.gap { background: var(--color-gap); }
.recent-dot.output { background: var(--color-output); }
.recent-dot.project { background: var(--color-project); }

.recent-text {
  flex: 1;
  font-size: var(--text-base);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recent Activity Section - Secondary, more subtle */
#recent-section {
  opacity: 0.85;
}

#recent-section .section-header {
  border-bottom: none;
  padding: 0;
  margin-bottom: var(--space-3);
  background: transparent;
  border: none;
  width: auto;
  display: inline-flex;
  gap: var(--space-1-5);
  transition: opacity var(--transition-fast);
}

#recent-section .section-header:hover {
  opacity: 0.8;
}

#recent-section .section-title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-semibold);
}

#recent-section .chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  opacity: 0.6;
}

#recent-section:hover {
  opacity: 1;
}

/* Compact Recent Activity Rows */
.recent-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  max-height: none; /* Allow full height */
  overflow-y: visible;
}

/* Limit height only when collapsed section pattern is used */
.collapsible .recent-rows {
  max-height: 400px;
  overflow-y: auto;
}

.recent-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.recent-row:hover {
  background: var(--bg-card);
}

.recent-row.completed {
  opacity: 0.5;
}

.recent-row.completed .recent-row-title {
  text-decoration: line-through;
}

.recent-type-dot {
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: 50%;
  flex-shrink: 0;
}

.recent-type-dot.task { background: var(--color-task); }
.recent-type-dot.idea { background: var(--color-idea); }
.recent-type-dot.memory { background: var(--color-memory); }
.recent-type-dot.output { background: var(--color-output); }
.recent-type-dot.collection { background: var(--text-muted); }

.recent-row-title {
  flex: 1;
  font-size: var(--text-base);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.recent-row-type {
  font-size: var(--text-2xs);
  padding: var(--space-0-5) var(--space-1);
  flex-shrink: 0;
}

.recent-row-time {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================================
   Task Row Component - Reusable Compact Row
   Used in: Today's Focus, Tasks View, Project View
   ============================================ */

/* Task Card View - project sections */
.tasks-card-section {
  margin-bottom: var(--space-6);
}

.tasks-card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--space-px) solid var(--border-color);
}

.tasks-card-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.tasks-card-section-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

/* Task Project Groups - collapsible project sections */
.tasks-project-group {
  margin-bottom: var(--space-2);
}

.tasks-project-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.tasks-project-header:hover {
  background: var(--bg-card-hover);
}

.tasks-project-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.tasks-project-group.collapsed .tasks-project-chevron {
  transform: rotate(-90deg);
}

.tasks-project-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.tasks-project-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-full);
}

.tasks-project-content {
  padding-left: var(--space-6);
  margin-top: var(--space-1);
}

.tasks-project-group.collapsed .tasks-project-content {
  display: none;
}

.task-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: var(--space-px) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.task-row:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

/* Priority visual treatment */
.task-row.priority-high {
  border-left: var(--space-1) solid var(--color-warning);
  background: var(--color-warning-softer);
}

.task-row.priority-high .task-row-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.task-row.priority-high:hover {
  background: var(--color-warning-dim);
}

.task-row.priority-medium {
  border-left: var(--space-px) solid var(--border-color);
}

.task-row.priority-medium .task-row-title {
  font-weight: var(--font-medium);
}

.task-row.priority-low {
  border-left: none;
  opacity: 0.75;
}

.task-row.priority-low .task-row-title {
  font-weight: var(--font-normal);
  color: var(--text-muted);
}

/* Status states */
.task-row.status-in_progress {
  background: var(--color-task-dim);
  border-color: var(--color-task);
}

.task-row.status-completed {
  opacity: 0.5;
  background: transparent;
}

.task-row.status-completed .task-row-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-row.status-blocked {
  opacity: 0.7;
  border-left: var(--space-1) solid var(--color-error);
}

/* Checkbox - 24x24px touch-friendly with satisfying animations */
.task-checkbox {
  width: var(--space-6);
  height: var(--space-6);
  min-width: var(--space-6);
  border: var(--space-0-5) solid var(--text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  background: var(--bg-card);
}

.task-checkbox:hover {
  border-color: var(--color-task);
  background: var(--color-task-dim);
  transform: scale(1.05);
}

.task-checkbox:active {
  transform: scale(0.95);
}

.task-row.status-completed .task-checkbox {
  background: var(--color-success);
  border-color: var(--color-success);
  animation: checkbox-bounce 0.3s ease;
}

.task-checkbox svg {
  opacity: 0;
  color: var(--text-inverse);
  transition: opacity var(--transition-fast);
  width: 14px;
  height: 14px;
}

.task-row.status-completed .task-checkbox svg {
  opacity: 1;
}

/* Bug Fix: Strikethrough and opacity for completed task rows */
.task-row.status-completed {
  opacity: 0.6;
}

.task-row.status-completed .task-row-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Main content area - two row layout */
.task-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Top row: title + priority badge */
.task-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-row-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

/* Priority badge in top-right */
.task-row-top .priority-badge {
  flex-shrink: 0;
}

/* Bottom row: complexity + project + outputs */
.task-row-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
}

/* Legacy support for task-row-content */
.task-row-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-project-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.task-project-badge svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.task-project-badge:hover {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

.task-project-badge:hover svg {
  opacity: 1;
}

/* Meta area (badges + indicators) */
.task-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-shrink: 0;
}

.task-output-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  color: var(--color-output);
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-output-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.task-output-indicator:hover {
  background: var(--color-output-light);
}

.task-output-indicator svg {
  flex-shrink: 0;
}

/* Task file indicator */
.task-file-indicator {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  opacity: 0.7;
}

.task-file-indicator:hover {
  opacity: 1;
  color: var(--accent);
}

.task-file-indicator svg {
  flex-shrink: 0;
}

/* Output popover for multiple outputs */
.output-popover {
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  max-width: 300px;
  overflow: hidden;
}

.output-popover-header {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--space-px) solid var(--border-color);
}

.output-popover-list {
  max-height: 200px;
  overflow-y: auto;
}

.output-popover-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.output-popover-item:hover {
  background: var(--bg-card-hover);
}

.output-popover-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.output-popover-icon.type-output { color: var(--color-output); }

.output-popover-title {
  font-size: var(--text-base);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================================
   List Views (Tasks, Ideas, Memories)
   ============================================ */

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-4);
}

.list-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* View Toggle (List vs Cards) */
.view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-2-5);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.view-toggle-btn.active {
  background: var(--accent);
  color: white;
}

.view-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.view-toggle-container {
  display: flex;
  align-items: center;
}

/* List Row Component - Compact row for list view */
.list-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: var(--space-px) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.list-row:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.list-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.list-row-icon.type-task { color: var(--color-task); }
.list-row-icon.type-idea { color: var(--color-idea); }
.list-row-icon.type-memory { color: var(--color-memory); }
.list-row-icon.type-knowledge { color: var(--color-knowledge); }
.list-row-icon.type-output { color: var(--color-output); }

.list-row-title {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.list-row-status {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: var(--font-semibold);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.list-row-status.status-active { background: var(--color-idea-dim); color: var(--color-idea); }
.list-row-status.status-completed { background: var(--color-output-dim); color: var(--color-output); }
.list-row-status.status-realized { background: var(--color-output-dim); color: var(--color-output); }

.list-row-project {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
}

.list-row-project:hover {
  color: var(--text-secondary);
  background: var(--bg-card-hover);
}

.list-row-time {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Form Select — Basecamp Theme */
.filter-select {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-ios-input); /* Prevents iOS zoom on focus */
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.filter-select:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.filter-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Primary Button — Basecamp Theme */
.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-inverse);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-accent);
}

.add-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.add-btn:active {
  transform: scale(0.97);
}

/* Items List — Basecamp Theme */
.items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Item Row — Basecamp Theme */
.item-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.item-row:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.item-row:active {
  transform: scale(0.99);
}

.item-content {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.item-date {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-muted);
}

/* ============================================
   Chat Section (Right Drawer)
   ============================================ */

.chat-section {
  width: 0;
  min-width: 0;
  border-left: var(--space-px) solid var(--border-color);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-normal), min-width var(--transition-normal);
  overflow: hidden;
  flex-shrink: 0;
}

.chat-section.open {
  width: 420px;
  min-width: 420px;
}

.chat-section.expanded {
  width: 600px;
  min-width: 600px;
}

/* Chat Header — Basecamp Style */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--space-px) solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-card);
}

.chat-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.chat-status {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-left: var(--space-3);
}

.chat-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.chat-status.connected .status-dot {
  background: var(--color-success);
}

.chat-status .status-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.chat-controls {
  display: flex;
  gap: var(--space-2);
}

.chat-new-btn,
.chat-history-btn,
.chat-expand-btn,
.chat-close-btn,
.chat-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chat-new-btn:hover,
.chat-history-btn:hover,
.chat-expand-btn:hover,
.chat-voice-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent);
}

.chat-voice-btn.active {
  background: var(--color-success);
  color: white;
}

.chat-close-btn:hover {
  background: var(--color-error-dim);
  color: var(--color-error);
}

/* Voice Mode Overlay */
.voice-mode-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  display: none;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.voice-mode-overlay.active {
  display: flex;
}

.voice-mode-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  overflow: hidden;
  min-height: 0;
}

/* Ensure orb and status never shrink */
.voice-mode-content .voice-orb,
.voice-mode-content .voice-status-text,
.voice-mode-content .voice-live-transcript {
  flex-shrink: 0;
}

.voice-mode-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  width: 100%;
  max-width: 400px;
  overflow-y: auto;
  padding: var(--space-4);
  margin-top: var(--space-4);
  min-height: 0;
  max-height: 50%;
}

.voice-mode-end-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-tertiary);
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  width: 100%;
}

.voice-mode-end-btn:hover {
  background: var(--color-error-dim);
  color: var(--color-error);
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-8);
}

.chat-hint {
  font-size: var(--text-2xs);
  margin-top: var(--space-2);
}

#chat-iframe {
  flex: 1;
  border: none;
  background: #0a0a0f;
  width: 100%;
  height: 100%;
  display: none; /* Hidden until ttyd connects */
}

#chat-iframe.connected {
  display: block;
}

/* ============================================
   Detail Panel (Right Drawer) — Basecamp Theme
   ============================================ */

.detail-panel {
  width: 0;
  min-width: 0;
  height: 100vh;
  background: var(--bg-card);
  border-left: var(--space-px) solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-slow) var(--ease-out),
              min-width var(--duration-slow) var(--ease-out);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-xl);
}

.detail-panel.open {
  width: var(--detail-width);
  min-width: var(--detail-width);
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: var(--space-px) solid var(--border-color);
}

.detail-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.detail-close-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

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

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Colored icon to indicate entity type in detail panel */
.detail-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
}
.detail-type-icon.type-task { color: var(--color-task); }
.detail-type-icon.type-idea { color: var(--color-idea); }
.detail-type-icon.type-memory { color: var(--color-memory); }
.detail-type-icon.type-knowledge { color: var(--color-knowledge); }
.detail-type-icon.type-output { color: var(--color-output); }
.detail-type-icon.type-project { color: var(--color-project); }

.detail-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.detail-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.detail-section {
  margin-bottom: var(--space-6);
}

.detail-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.detail-section-content {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
}

.detail-meta-row {
  display: flex;
  justify-content: space-between;
}

.detail-meta-label {
  color: var(--text-muted);
}

.detail-meta-value {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.detail-entities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--accent-dim);
  border: var(--space-px) solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.entity-chip:hover {
  background: var(--accent);
  color: white;
}

.confidence-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.confidence-track {
  flex: 1;
  height: var(--space-1-5);
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-xs);
}

.confidence-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  min-width: 35px;
}

/* Detail Related Items - Contextual surfacing in detail panel */
.detail-related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.detail-related-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-2-5);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.detail-related-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.detail-related-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.detail-related-title {
  font-size: var(--text-xs);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.detail-related-more {
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: var(--space-px) dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: var(--text-2xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.detail-related-more:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ============================================
   Modal
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

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

.modal {
  width: 90%;
  max-width: 480px;
  background: var(--bg-modal);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-xl);
  transform: translateY(20px) scale(0.95);
  transition: transform var(--transition-normal);
  display: none;
}

.modal-overlay.open .modal.active {
  display: block;
  transform: translateY(0) scale(1);
}

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

.modal-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.modal-form {
  padding: var(--space-5);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-1-5);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-ios-input); /* Prevents iOS zoom on focus */
  color: var(--text-primary);
  transition: all var(--transition-fast);
  touch-action: manipulation;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-2);
}

/* Hint toggles for inbox modal */
.hint-label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2-5);
  display: block;
}

.hint-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hint-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.hint-section-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hint-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.hint-btn {
  padding: var(--space-1-5) var(--space-2-5);
  border: var(--space-px) solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hint-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.hint-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* File upload drop zone */
.capture-drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  margin-bottom: var(--space-3);
}

.capture-drop-zone:hover,
.capture-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

.capture-drop-zone.has-file {
  border-style: solid;
  border-color: var(--success-color, #28a745);
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.drop-zone-icon {
  font-size: var(--text-2xl);
}

.drop-zone-text {
  font-size: var(--text-sm);
}

/* File preview */
.file-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.file-icon {
  font-size: var(--text-xl);
}

.file-name {
  flex: 1;
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

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

.file-remove {
  background: none;
  border: none;
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.file-remove:hover {
  background: var(--bg-card-hover);
  color: var(--danger-color, #dc3545);
}

/* Bottom sheet attached file */
.bs-attached-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: var(--space-px) solid var(--border-color);
}

.bs-file-icon {
  font-size: var(--text-2xl);
}

.bs-file-name {
  flex: 1;
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-file-actions {
  display: flex;
  gap: var(--space-2);
}

.bs-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: var(--space-px) solid var(--border-color);
}

.bs-file-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.bs-file-btn.view:hover {
  background: var(--accent);
}

.bs-file-btn.download:hover {
  background: var(--success-color, #28a745);
  border-color: var(--success-color, #28a745);
}

/* Form hint text */
.form-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.btn-primary,
.btn-secondary {
  padding: var(--space-2-5) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  color: var(--text-secondary);
}

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

.btn-small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-small:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

.btn-small svg {
  flex-shrink: 0;
}

/* ============================================
   Mobile Sidebar Overlay
   ============================================ */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
}

.sidebar-overlay.open {
  display: block;
}

/* ============================================
   Loading State — Basecamp Theme
   ============================================ */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--text-muted);
  font-size: var(--text-base);
}

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

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

/* ============================================
   Empty State — Basecamp Theme
   ============================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  max-width: 280px;
}

.empty-state p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.empty-state-mascot {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: var(--space-4);
  opacity: 0.9;
}

.empty-state svg {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

/* ============================================
   Bottom Sheet Modal System
   Modern iOS-style modal that slides up from bottom
   ============================================ */

/* Backdrop overlay */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out, background 0.2s ease-out;
}

.bottom-sheet-backdrop.open {
  opacity: 1;
  visibility: visible;
  background: var(--overlay-dark);
}

/* Bottom Sheet Modal — Basecamp Theme */
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  background: var(--bg-card);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--duration-slower) var(--ease-out);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bottom-sheet-backdrop.open .bottom-sheet {
  transform: translateY(0);
}

/* Desktop: centered modal with rounded corners */
@media (min-width: 769px) {
  .bottom-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    width: calc(100% - 48px);
    border-radius: var(--radius-2xl);
  }

  .bottom-sheet-backdrop.open .bottom-sheet {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Drag indicator */
.bottom-sheet-drag-indicator {
  width: 36px;
  height: 4px;
  background: var(--border-color);
  border-radius: var(--radius-full);
  margin: var(--space-3) auto var(--space-4);
  flex-shrink: 0;
}

@media (min-width: 769px) {
  .bottom-sheet-drag-indicator {
    display: none;
  }
}

/* Bottom sheet header */
.bottom-sheet-header {
  padding: 0 var(--space-6) var(--space-4);
  border-bottom: var(--space-px) solid var(--border-color);
  flex-shrink: 0;
}

/* Desktop: add top padding since drag indicator is hidden */
@media (min-width: 769px) {
  .bottom-sheet-header {
    padding-top: var(--space-6);
  }
}

.bottom-sheet-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.bottom-sheet-title-area {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.bottom-sheet-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.bottom-sheet-icon.type-task { color: var(--color-task); }
.bottom-sheet-icon.type-idea { color: var(--color-idea); }
.bottom-sheet-icon.type-memory { color: var(--color-memory); }
.bottom-sheet-icon.type-knowledge { color: var(--color-knowledge); }
.bottom-sheet-icon.type-output { color: var(--color-output); }
.bottom-sheet-icon.type-project { color: var(--color-project); }
.bottom-sheet-icon.type-collection { color: var(--color-collection); }
/* Memory subtypes use their specific colors */
.bottom-sheet-icon.type-correction { color: var(--color-correction); }
.bottom-sheet-icon.type-decision { color: var(--color-decision); }
.bottom-sheet-icon.type-commitment { color: var(--color-commitment); }
.bottom-sheet-icon.type-insight { color: var(--color-insight); }
.bottom-sheet-icon.type-learning { color: var(--color-learning); }
.bottom-sheet-icon.type-pattern { color: var(--color-pattern); }
.bottom-sheet-icon.type-gap { color: var(--color-gap); }

.bottom-sheet-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  flex: 1;
  min-width: 0;
}

/* Title color by type for emphasis */
.bottom-sheet-title.type-task { color: var(--color-task); }
.bottom-sheet-title.type-idea { color: var(--color-idea); }
.bottom-sheet-title.type-memory { color: var(--color-memory); }
.bottom-sheet-title.type-knowledge { color: var(--color-knowledge); }
.bottom-sheet-title.type-output { color: var(--color-output); }

.bottom-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.bottom-sheet-close:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* Header badges row */
.bottom-sheet-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  align-items: center;
}

.bottom-sheet-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Status badges - using design tokens */
.bottom-sheet-badge.status-active {
  background: var(--status-active-bg);
  color: var(--status-active-text);
}
.bottom-sheet-badge.status-pending {
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
}
.bottom-sheet-badge.status-in_progress {
  background: var(--status-progress-bg);
  color: var(--status-progress-text);
}
.bottom-sheet-badge.status-completed,
.bottom-sheet-badge.status-complete {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}
.bottom-sheet-badge.status-blocked {
  background: var(--status-blocked-bg);
  color: var(--status-blocked-text);
}
.bottom-sheet-badge.status-draft {
  background: var(--status-draft-bg);
  color: var(--status-draft-text);
}
.bottom-sheet-badge.status-realized,
.bottom-sheet-badge.status-partially_realized {
  background: var(--status-realized-bg);
  color: var(--status-realized-text);
}
.bottom-sheet-badge.status-archived,
.bottom-sheet-badge.status-someday {
  background: var(--status-archived-bg);
  color: var(--status-archived-text);
}

/* Project badge - per spec */
.bottom-sheet-badge.project {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bottom-sheet-badge.project svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.bottom-sheet-badge.project:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Time badge */
.bottom-sheet-badge.time {
  background: transparent;
  color: var(--text-muted);
  font-weight: var(--font-normal);
  padding: 0;
}

/* Bottom sheet content - 24px padding */
.bottom-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  -webkit-overflow-scrolling: touch;
}

/* Content sections - 24px (lg) spacing */
.bs-section {
  margin-bottom: var(--space-6);
}

.bs-section:last-child {
  margin-bottom: 0;
}

/* Section labels */
.bs-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.bs-section-content {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.bs-section-content p {
  margin-bottom: var(--space-3);
}

.bs-section-content p:last-child {
  margin-bottom: 0;
}

/* Priority and complexity badges inline */
.bs-priority-complexity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.bs-priority-badge {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.bs-priority-badge.high {
  background: var(--color-warning-dim);
  color: var(--color-warning);
}

.bs-priority-badge.medium {
  background: var(--color-medium-dim);
  color: var(--color-medium);
}

.bs-priority-badge.low {
  background: var(--color-low-dim);
  color: var(--color-low);
}

.bs-complexity-badge {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.bs-complexity-badge.quick {
  background: var(--color-quick-dim);
  color: var(--color-quick);
}

.bs-complexity-badge.medium {
  background: var(--color-medium-complexity-dim);
  color: var(--color-medium-complexity);
}

.bs-complexity-badge.deep {
  background: var(--color-deep-dim);
  color: var(--color-deep);
}

/* Output type badge */
.bs-output-type {
  display: inline-flex;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--color-output-dim);
  color: var(--color-output);
  margin-bottom: var(--space-5);
}

/* Memory type badge */
.bs-memory-type {
  display: inline-flex;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--color-memory-dim);
  color: var(--color-memory);
  margin-bottom: var(--space-5);
}

/* Acceptance criteria checkboxes */
.bs-criteria-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bs-criteria-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--space-px) solid var(--border-color);
}

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

.bs-criteria-checkbox {
  width: var(--space-5);
  height: var(--space-5);
  min-width: var(--space-5);
  border: var(--space-0-5) solid var(--border-hover);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-0-5);
}

.bs-criteria-checkbox:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.bs-criteria-checkbox.checked {
  background: var(--color-success);
  border-color: var(--color-success);
}

.bs-criteria-checkbox svg {
  opacity: 0;
  color: white;
}

.bs-criteria-checkbox.checked svg {
  opacity: 1;
}

.bs-criteria-text {
  flex: 1;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.bs-criteria-text.completed {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Related Knowledge groupings */
.bs-related-knowledge {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bs-related-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bs-related-group-label {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Related items / links */
.bs-related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bs-related-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bs-related-item:hover {
  background: var(--bg-card-hover);
}

.bs-related-icon {
  flex-shrink: 0;
}

.bs-related-icon.type-task { color: var(--color-task); }
.bs-related-icon.type-idea { color: var(--color-idea); }
.bs-related-icon.type-memory { color: var(--color-memory); }
.bs-related-icon.type-knowledge { color: var(--color-knowledge); }
.bs-related-icon.type-output { color: var(--color-output); }
.bs-related-icon.type-project { color: var(--color-project); }

.bs-related-title {
  flex: 1;
  font-size: var(--text-base);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entity chips */
.bs-entity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bs-entity-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bs-entity-chip:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

.bs-entity-chip.project {
  background: var(--color-info-dim);
  color: var(--color-info);
}

.bs-entity-chip.person {
  background: var(--color-person-dim);
  color: var(--color-person);
}

/* Content block with copy button (for outputs) */
.bs-content-block {
  position: relative;
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.bs-content-block-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.bs-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bs-copy-btn:hover {
  background: var(--color-output);
  border-color: var(--color-output);
  color: var(--text-inverse);
}

.bs-copy-btn.copied {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.bs-content-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  font-family: var(--font-mono);
}

/* Markdown content styling for rendered content */
.markdown-content {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.markdown-content h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.markdown-content h1:first-child {
  margin-top: 0;
}

.markdown-content h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.markdown-content h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1-5);
}

.markdown-content p {
  margin-bottom: var(--space-3);
}

.markdown-content p:last-child {
  margin-bottom: 0;
}

.markdown-content strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.markdown-content em {
  font-style: italic;
}

.markdown-content ul,
.markdown-content ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-3);
}

.markdown-content li {
  margin-bottom: var(--space-1);
}

.markdown-content code {
  background: var(--bg-tertiary);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.markdown-content pre {
  background: var(--bg-tertiary);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.markdown-content pre code {
  background: none;
  padding: 0;
}

.markdown-content blockquote {
  border-left: 3px solid var(--border-hover);
  padding-left: var(--space-4);
  margin-left: 0;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-style: italic;
}

.markdown-content a {
  color: var(--accent);
  text-decoration: underline;
}

.markdown-content a:hover {
  text-decoration: none;
}

.markdown-content hr {
  border: none;
  border-top: var(--space-px) solid var(--border-color);
  margin: var(--space-6) 0;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.markdown-content th,
.markdown-content td {
  border: var(--space-px) solid var(--border-color);
  padding: var(--space-2);
  text-align: left;
}

.markdown-content th {
  background: var(--bg-tertiary);
  font-weight: var(--font-semibold);
}

/* Source chunk (for memories) */
.bs-source-chunk {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-memory);
  background: var(--bg-tertiary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* Feedback counts */
.bs-feedback {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.bs-feedback-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.bs-feedback-item svg {
  opacity: 0.7;
}

.bs-feedback-item.helpful svg {
  color: var(--color-success);
}

.bs-feedback-item.not-helpful svg {
  color: var(--color-error);
}

/* Details meta grid */
.bs-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.bs-meta-label {
  color: var(--text-muted);
}

.bs-meta-value {
  color: var(--text-secondary);
}

/* Section divider - 24px vertical margin */
.bs-divider {
  height: 1px;
  background: var(--border-color);
  margin: 24px 0;
}

/* Bottom sheet footer - 16px vertical, 24px horizontal */
.bottom-sheet-footer {
  padding: 16px 24px;
  border-top: var(--space-px) solid var(--border-color);
  background: var(--bg-modal);
  flex-shrink: 0;
}

.bottom-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Action buttons - 12px 20px padding per spec */
.bs-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex: 1;
  min-width: 120px;
}

.bs-action-btn svg {
  flex-shrink: 0;
}

/* Primary action - entity colored */
.bs-action-btn.primary {
  background: var(--accent);
  color: white;
}

.bs-action-btn.primary:hover {
  filter: brightness(1.1);
}

.bs-action-btn.primary.task {
  background: var(--color-task);
}

.bs-action-btn.primary.idea {
  background: var(--color-idea);
}

.bs-action-btn.primary.output {
  background: var(--color-output);
}

.bs-action-btn.primary.memory {
  background: var(--color-memory);
}

/* Secondary action */
.bs-action-btn.secondary {
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  color: var(--text-secondary);
}

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

/* Destructive action */
.bs-action-btn.destructive {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.bs-action-btn.destructive:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Success action (for helpful/complete) */
.bs-action-btn.success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.bs-action-btn.success:hover {
  background: rgba(34, 197, 94, 0.25);
}

/* Warning action (for blocked) */
.bs-action-btn.warning {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.bs-action-btn.warning:hover {
  background: rgba(234, 179, 8, 0.25);
}

/* Mobile bottom sheet footer - stack buttons */
@media (max-width: 480px) {
  .bottom-sheet-actions {
    flex-direction: column;
  }

  .bs-action-btn {
    width: 100%;
  }
}

/* Toast notification for copy feedback */
.bs-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-modal);
  border: var(--space-px) solid var(--border-color);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--text-primary);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast) ease-out;
  z-index: 1002;
}

.bs-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* iOS safe area for native app */
body.native-app .bottom-sheet-footer {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}

/* ============================================
   Responsive Design - Mobile First
   ============================================ */

/* Tablet (iPad) - Larger touch targets and fonts */
@media (max-width: 1024px) {
  /* Increase base font size for tablets */
  :root {
    --text-base: 1.0625rem;   /* 17px - iOS default */
    --text-sm: 0.9375rem;     /* 15px */
    --text-xs: 0.875rem;      /* 14px */
    --text-2xs: 0.8125rem;    /* 13px */
    --text-lg: 1.125rem;      /* 18px */
    --text-xl: 1.375rem;      /* 22px */
  }

  /* Chat as overlay on tablet (like mobile) */
  .chat-section {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 200;
  }

  .chat-section.open {
    width: 450px;
    min-width: 450px;
  }

  .detail-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 150;
  }

  .detail-panel.open {
    width: 480px;
    min-width: 480px;
  }

  /* Larger nav items for touch */
  .nav-item {
    padding: var(--space-3-5) var(--space-4);
    min-height: 52px;
  }

  .nav-icon svg {
    width: 22px;
    height: 22px;
  }

  /* Larger task rows */
  .focus-item {
    padding: var(--space-4) var(--space-5);
    min-height: 60px;
  }

  .focus-title {
    font-size: var(--text-base);
  }

  .focus-checkbox {
    width: 26px;
    height: 26px;
  }

  /* Task row styling */
  .task-row {
    padding: var(--space-3-5) var(--space-4);
    min-height: 56px;
  }

  .task-row-title {
    font-size: var(--text-base);
  }

  .task-row-checkbox {
    width: 26px;
    height: 26px;
  }

  /* Priority badges - larger for tablet */
  .priority-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Type badges */
  .task-type-badge {
    font-size: var(--text-2xs);
    padding: var(--space-1) var(--space-2);
  }

  /* Larger badges */
  .badge {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--text-2xs);
  }

  /* Project tree items larger for touch */
  .project-tree-header {
    padding: var(--space-3-5) var(--space-4);
    min-height: 52px;
  }

  .project-tree-name {
    font-size: var(--text-base);
  }

  /* List items larger */
  .item-row {
    padding: var(--space-4);
    min-height: 60px;
  }

  .item-title {
    font-size: var(--text-base);
  }

  /* Filter controls */
  .filter-select {
    padding: var(--space-3);
    min-height: 48px;
    font-size: var(--text-sm);
  }

  /* Buttons */
  .add-btn {
    padding: var(--space-3) var(--space-5);
    min-height: 48px;
    font-size: var(--text-sm);
  }

  .btn-text-small {
    height: 32px;
    padding: 0 var(--space-3-5);
    font-size: var(--text-xs);
  }

  .btn-icon-small {
    width: 32px;
    height: 32px;
  }

  /* Section headers */
  .section-title {
    font-size: var(--text-xl);
  }

  .section-subtitle {
    font-size: var(--text-sm);
  }

  /* Progress indicator */
  .progress-text {
    font-size: var(--text-sm);
  }

  /* Focus group headers */
  .focus-group-header {
    padding: var(--space-3) var(--space-5);
    min-height: 44px;
  }

  .focus-group-name {
    font-size: var(--text-sm);
  }

  /* Header controls - larger for tablet touch */
  .theme-toggle-btn,
  .chat-toggle-btn,
  .inbox-count-btn {
    width: 44px;
    height: 44px;
  }

  .theme-toggle-btn svg,
  .chat-toggle-btn svg,
  .inbox-count-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Touch tablets (iPad) - detected via pointer:coarse + wide viewport */
/* Desktop has pointer:fine so won't match even at narrow window widths */
@media (pointer: coarse) and (min-width: 1000px) {
  /* Expand content area to use more horizontal space */
  .views-container {
    padding: var(--space-6) var(--space-5);
  }

  .view {
    max-width: 100%;
  }

  #view-home .focus-section {
    margin-top: 100px;
  }

  /* Larger focus section with more padding */
  .focus-section {
    padding: var(--space-10) var(--space-12);
  }

  .focus-section .section-title {
    font-size: 2rem;
  }

  .focus-section .section-subtitle {
    font-size: var(--text-lg);
  }

  /* Section header controls */
  .focus-header-controls {
    gap: var(--space-3);
  }

  .btn-icon-small {
    width: 36px;
    height: 36px;
  }

  /* Progress indicator */
  .progress-text {
    font-size: var(--text-lg);
  }

  .progress-bar {
    height: 6px;
    min-width: 120px;
  }

  /* Project groups */
  .focus-project-header {
    padding: var(--space-3) var(--space-3);
  }

  .focus-project-name {
    font-size: var(--text-base);
  }

  .focus-project-count {
    font-size: var(--text-sm);
    padding: 2px 10px;
  }

  .focus-list {
    gap: var(--space-8);
  }

  .focus-project-tasks {
    gap: var(--space-3);
    padding-left: var(--space-3);
  }

  /* Task items - significantly larger */
  .focus-item {
    padding: var(--space-6) var(--space-7);
    gap: var(--space-5);
    min-height: 80px;
  }

  .focus-title {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .focus-checkbox {
    width: 36px;
    height: 36px;
  }

  .focus-checkbox svg {
    width: 20px;
    height: 20px;
  }

  .priority-badge {
    font-size: 12px;
    padding: 4px 10px;
  }

  .complexity-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* Mobile - Main breakpoint */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 300px;
    --detail-width: 100vw;
    --header-height: 64px;
    /* Even larger fonts for phone screens */
    --text-base: 1.0625rem;   /* 17px - iOS default */
    --text-sm: 0.9375rem;     /* 15px */
    --text-xs: 0.875rem;      /* 14px */
    --text-2xs: 0.8125rem;    /* 13px */
    --text-lg: 1.125rem;      /* 18px */
    --text-xl: 1.375rem;      /* 22px */
    --text-2xl: 1.625rem;     /* 26px */
  }

  /* Larger base font for mobile readability */
  body {
    font-size: var(--text-base);
    -webkit-text-size-adjust: 100%;
  }

  /* Sidebar - Slide in from left */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    z-index: 200;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-nav {
    padding: var(--space-4) var(--space-3);
    gap: var(--space-1-5);
  }

  .nav-item {
    padding: var(--space-3-5) var(--space-4);
    font-size: var(--text-lg);
    gap: var(--space-4);
  }

  .nav-item svg {
    width: 22px;
    height: 22px;
  }

  .nav-section-label {
    font-size: var(--text-3xs);
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .nav-type-dot {
    width: 8px;
    height: 8px;
  }

  .logo {
    font-size: var(--text-2xl);
  }

  .sidebar-header {
    padding: var(--space-6) var(--space-5);
  }

  .sidebar-footer {
    padding: var(--space-5);
    /* Add safe area padding for iPhones with home indicator */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure sidebar nav doesn't overflow */
  .sidebar-nav {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .date-display {
    font-size: var(--text-base);
  }

  /* Mobile menu button */
  .mobile-menu-btn {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-btn svg {
    width: 24px;
    height: 24px;
  }

  /* Header */
  .header {
    padding: 0 var(--space-4);
    height: var(--header-height);
  }

  .view-title {
    font-size: var(--text-xl);
  }

  .header-right {
    gap: var(--space-1-5);
  }

  .header-badge {
    padding: var(--space-2) var(--space-2-5);
    font-size: var(--text-xs);
  }

  .header-badge svg {
    width: 18px;
    height: 18px;
  }

  .chat-toggle-btn {
    width: 44px;
    height: 44px;
  }

  .chat-toggle-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Main content */
  .views-container {
    padding: var(--space-5) var(--space-4);
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  }

  /* Sections */
  .section {
    margin-bottom: var(--space-6);
  }

  .section-title {
    font-size: var(--text-lg);
  }

  .section-subtitle {
    font-size: var(--text-2xs);
  }

  /* Focus section - Compact for phones */
  .focus-section {
    padding: var(--space-4);
  }

  .focus-section .section-title {
    font-size: var(--text-lg);
  }

  .focus-project-name {
    font-size: 10px;
  }

  .focus-project-count {
    font-size: 9px;
  }

  .focus-list {
    gap: var(--space-4);
  }

  .focus-project-tasks {
    gap: var(--space-2);
  }

  /* Focus items (tasks) - Compact for phones */
  .focus-item {
    padding: var(--space-2-5) var(--space-3);
    gap: var(--space-2-5);
    min-height: unset;
  }

  .focus-checkbox {
    width: 22px;
    height: 22px;
  }

  .focus-checkbox svg {
    width: 12px;
    height: 12px;
  }

  .focus-title {
    font-size: 13px;
    line-height: 1.3;
  }

  .badge {
    font-size: 9px;
    padding: 2px 5px;
  }

  .priority-badge {
    font-size: 8px;
    padding: 2px 6px;
  }

  .complexity-badge {
    font-size: 8px;
    padding: 2px 5px;
  }

  /* Quick actions - Full width buttons */
  .quick-actions {
    flex-direction: column;
    gap: var(--space-2-5);
  }

  .quick-action-btn {
    justify-content: center;
    padding: var(--space-3-5) var(--space-4);
    font-size: var(--text-base);
  }

  .quick-action-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Projects grid */
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3-5);
  }

  .project-card {
    padding: var(--space-5);
  }

  .project-card-name {
    font-size: var(--text-lg);
  }

  .project-card-meta {
    font-size: var(--text-xs);
  }

  /* Recent items */
  .recent-item {
    padding: var(--space-3-5) var(--space-4);
    gap: var(--space-4);
  }

  .recent-dot {
    width: 10px;
    height: 10px;
  }

  .recent-text {
    font-size: var(--text-base);
  }

  .recent-date {
    font-size: var(--text-2xs);
  }

  /* List views */
  .list-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .list-filters {
    order: 2;
    gap: var(--space-2);
  }

  .filter-select {
    flex: 1;
    padding: var(--space-3);
    font-size: var(--text-base);
  }

  .add-btn {
    order: 1;
    padding: var(--space-3-5) var(--space-4);
    font-size: var(--text-base);
    justify-content: center;
  }

  .item-row {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-4);
  }

  .item-title {
    font-size: var(--text-lg);
    white-space: normal;
    line-height: 1.4;
  }

  .item-date {
    font-size: var(--text-2xs);
  }

  /* Detail panel - Full screen overlay */
  .detail-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 250;
  }

  .detail-panel.open {
    width: 100vw;
    min-width: 100vw;
  }

  .detail-header {
    padding: var(--space-4);
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .detail-close-btn {
    width: 44px;
    height: 44px;
  }

  .detail-close-btn svg {
    width: 24px;
    height: 24px;
  }

  .detail-content {
    padding: var(--space-5);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .detail-title {
    font-size: var(--text-xl);
  }

  .detail-section-title {
    font-size: var(--text-2xs);
  }

  .detail-section-content {
    font-size: var(--text-lg);
    line-height: 1.7;
  }

  /* Chat section - Full screen overlay */
  .chat-section {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 200;
  }

  .chat-section.open {
    width: 100vw;
    min-width: 100vw;
  }

  .chat-header {
    padding: var(--space-3-5) var(--space-4);
    padding-top: max(0.875rem, env(safe-area-inset-top));
  }

  .chat-title {
    font-size: var(--text-base);
  }

  .chat-expand-btn,
  .chat-close-btn {
    width: 40px;
    height: 40px;
  }

  .chat-expand-btn svg,
  .chat-close-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Hide expand button on mobile - already full screen */
  .chat-expand-btn {
    display: none;
  }

  /* Form rows */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Inbox section */
  .inbox-section {
    padding: var(--space-5);
  }

  .inbox-item {
    padding: var(--space-3-5) var(--space-4);
  }

  .inbox-title {
    font-size: var(--text-base);
  }

  /* Progress indicator */
  .progress-indicator {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1-5);
  }

  .progress-bar {
    width: 100px;
  }

  /* Modal - Full width on mobile */
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .modal-header {
    padding: var(--space-5) var(--space-4);
    padding-top: max(1.25rem, env(safe-area-inset-top));
  }

  .modal-header h2 {
    font-size: var(--text-xl);
  }

  .modal-close-btn {
    width: 44px;
    height: 44px;
  }

  .modal-close-btn svg {
    width: 24px;
    height: 24px;
  }

  .modal-form {
    padding: var(--space-5) var(--space-4);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .form-group {
    margin-bottom: var(--space-5);
  }

  .form-group label {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: var(--space-3-5) var(--space-4);
    font-size: var(--text-ios-input); /* Prevents iOS zoom */
    border-radius: 10px;
  }

  .form-group textarea {
    min-height: 100px;
  }

  .form-actions {
    gap: var(--space-3-5);
    padding-top: var(--space-4);
  }

  .btn-primary,
  .btn-secondary {
    padding: var(--space-3-5) var(--space-6);
    font-size: var(--text-lg);
    border-radius: 10px;
    flex: 1;
  }
}

/* Mobile chat optimizations */
@media (max-width: 768px) {
  .chat-messages {
    padding: var(--space-4);
    gap: var(--space-3-5);
  }

  .chat-welcome {
    padding: var(--space-8) var(--space-6);
  }

  .chat-welcome .welcome-icon {
    width: 70px;
    height: 70px;
  }

  .chat-welcome .welcome-icon svg {
    width: 28px;
    height: 28px;
  }

  .chat-welcome .welcome-mascot {
    width: 100%;
    height: 100%;
  }

  .chat-welcome h3 {
    font-size: var(--text-lg);
  }

  .chat-welcome p {
    font-size: var(--text-base);
    max-width: 280px;
  }

  .chat-message {
    max-width: 88%;
  }

  .message-bubble {
    padding: var(--space-3-5) var(--space-4);
    font-size: var(--text-lg);
    line-height: 1.6;
    border-radius: 16px;
  }

  .chat-message.user .message-bubble {
    border-bottom-right-radius: 6px;
  }

  .chat-message.assistant .message-bubble {
    border-bottom-left-radius: 6px;
  }

  .message-bubble code {
    font-size: var(--text-base);
    padding: var(--space-1) var(--space-1-5);
  }

  .message-bubble pre {
    padding: var(--space-3-5);
    font-size: var(--text-sm);
  }

  /* Tool activity - larger */
  .tool-activity {
    padding: var(--space-2-5) var(--space-3-5);
    font-size: var(--text-base);
    gap: var(--space-2-5);
  }

  .tool-activity .tool-icon {
    width: 24px;
    height: 24px;
  }

  .tool-activity .tool-icon svg {
    width: 14px;
    height: 14px;
  }

  /* References */
  .chat-reference {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--text-xs);
    margin: var(--space-1-5) var(--space-0-5);
  }

  /* Thinking indicator */
  .thinking-indicator {
    padding: var(--space-3-5) var(--space-4);
  }

  .thinking-dots span {
    width: 8px;
    height: 8px;
  }

  .thinking-text {
    font-size: var(--text-base);
  }

  /* Chat input area - Optimized for mobile */
  .chat-input-area {
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .chat-input-wrapper {
    padding: var(--space-2-5) var(--space-3-5);
    border-radius: 16px;
  }

  #chat-input {
    /* font-size is now 16px at base level */
    min-height: 28px;
    max-height: 140px;
  }

  .chat-send-btn,
  .chat-cancel-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .chat-send-btn svg,
  .chat-cancel-btn svg {
    width: 20px;
    height: 20px;
  }

  .chat-hints {
    font-size: var(--text-2xs);
    padding: 0 var(--space-2);
  }

  /* Show connection status on mobile too, but smaller */
  .chat-status {
    display: flex;
  }

  .chat-status .status-text {
    display: none; /* Hide text, just show dot */
  }

  .chat-status .status-dot {
    width: 10px;
    height: 10px;
  }

  /* Quick commands - Larger touch targets */
  .quick-commands {
    padding: var(--space-2-5) 0;
    gap: var(--space-2-5);
  }

  .quick-cmd {
    padding: var(--space-2) var(--space-3-5);
    font-size: var(--text-sm);
    border-radius: 20px;
  }

  .quick-cmd svg {
    width: 16px;
    height: 16px;
  }

  /* Quick command dropdown menu - fixed position on mobile for visibility */
  .quick-cmd-menu {
    position: fixed;
    bottom: auto;
    right: var(--space-4);
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 140px); /* Position above input area */
    min-width: 260px;
    max-height: 50vh;
    padding: var(--space-2-5);
    border-radius: 16px;
    margin-bottom: 0;
  }

  /* Allow overflow for dropdown on mobile */
  .quick-cmd-dropdown {
    position: static; /* Remove relative positioning so fixed menu works */
  }

  .cmd-menu-header {
    font-size: var(--text-3xs);
    padding: var(--space-1-5) var(--space-2-5);
  }

  .cmd-menu-item {
    padding: var(--space-3) var(--space-2-5);
    border-radius: 10px;
  }

  .cmd-menu-item .cmd-name {
    font-size: var(--text-base);
  }

  .cmd-menu-item .cmd-desc {
    font-size: var(--text-xs);
    margin-top: var(--space-1);
  }

  /* Done indicator */
  .chat-done {
    padding: var(--space-2-5) var(--space-4);
    font-size: var(--text-xs);
  }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 380px) {
  .header-badge .badge-count {
    display: none;
  }

  .header-badge svg {
    width: 20px;
    height: 20px;
  }

  .view-title {
    font-size: var(--text-lg);
  }

  .quick-cmd span {
    /* Show icons only on very small screens */
    display: none;
  }

  .quick-cmd {
    padding: var(--space-2-5);
  }

  .quick-cmd-more span:first-of-type {
    display: inline; /* Keep "More" text */
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* Projects landing mobile */
  .projects-landing {
    padding: var(--space-3);
  }

  .projects-landing .projects-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .projects-landing .project-card {
    padding: var(--space-4);
  }

  .projects-detail-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .projects-detail-content {
    padding: var(--space-3);
  }
}

/* Large phones landscape / small tablets */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
  .chat-section.open {
    width: 50vw;
    min-width: 50vw;
  }

  .detail-panel.open {
    width: 50vw;
    min-width: 50vw;
  }
}

/* ============================================
   iOS Safe Area Support
   ============================================ */

@supports (padding: max(0px)) {
  .app {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Sidebar safe areas */
  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  /* Header safe area - ensure touch targets work on iOS with notch */
  @media (max-width: 768px) {
    .header {
      padding-top: env(safe-area-inset-top);
      min-height: calc(var(--header-height) + env(safe-area-inset-top));
      height: auto;
      box-sizing: border-box;
      position: relative;
      z-index: 100;
    }

    /* Mobile menu button needs extra touch target */
    .mobile-menu-btn {
      min-width: 44px;
      min-height: 44px;
    }

    /* Header badges need proper touch targets */
    .header-badge {
      min-width: 44px;
      min-height: 44px;
    }

    /* Adjust main content to account for header safe area */
    .main-content {
      padding-top: 0;
    }
  }

  /* Native iOS app - explicit status bar offset when safe-area-inset may not work */
  body.native-app .header {
    /* Use constant + safe area as fallback for Dynamic Island iPhones */
    padding-top: max(env(safe-area-inset-top, 0px), 54px);
    min-height: calc(var(--header-height) + max(env(safe-area-inset-top, 0px), 54px));
  }

  body.native-app .sidebar {
    padding-top: max(env(safe-area-inset-top, 0px), 54px);
  }

  /* Modal safe areas */
  .modal {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--space-8));
    overflow-y: auto;
  }

  /* Notification positioning */
  .notification {
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px));
  }
}

/* ============================================
   Touch & Interaction Optimizations
   ============================================ */

/* Prevent text selection on interactive elements */
.nav-item,
.quick-action-btn,
.quick-cmd,
.cmd-menu-item,
.focus-item,
.item-row,
.project-card,
.recent-item,
.header-badge,
.chat-toggle-btn,
.btn-primary,
.btn-secondary,
.add-btn,
.filter-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Active states for touch feedback */
@media (hover: none) {
  .nav-item:active {
    background: var(--bg-card-hover);
    transform: scale(0.98);
  }

  .quick-action-btn:active {
    transform: scale(0.97);
  }

  .quick-cmd:active {
    transform: scale(0.95);
    background: var(--accent-dim);
  }

  .focus-item:active,
  .item-row:active,
  .project-card:active,
  .recent-item:active {
    transform: scale(0.99);
  }

  .chat-send-btn:active,
  .chat-cancel-btn:active {
    transform: scale(0.92);
  }

  .cmd-menu-item:active {
    background: var(--accent-dim);
  }
}

/* Smooth scrolling for touch */
.views-container,
.chat-messages,
.detail-content,
.quick-commands,
.quick-cmd-menu,
.items-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================
   Native Chat UI — Status indicator states
   ============================================ */

.chat-status.error .status-dot {
  background: var(--color-error);
  animation: none;
}

.chat-status.reconnecting .status-dot {
  background: var(--color-warning);
  animation: pulse 2s ease-in-out infinite;
}

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

/* Chat Messages Container — Basecamp Style */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-card);
}

.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  flex: 1;
}

.chat-welcome .welcome-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.chat-welcome .welcome-icon svg {
  width: var(--space-8);
  height: var(--space-8);
}

.chat-welcome .welcome-mascot {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chat-welcome h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.chat-welcome p {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 280px;
  line-height: var(--leading-relaxed);
  line-height: var(--leading-snug);
}

/* Message Styles */
.chat-message {
  max-width: 90%;
  animation: messageIn 0.25s ease-out;
}

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

.chat-message.user {
  align-self: flex-end;
  max-width: 80%;
}

.chat-message.assistant {
  align-self: flex-start;
  max-width: 100%;
}

.chat-message.system {
  align-self: center;
  max-width: 90%;
}

.message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: 0;
}

/* User message - clean pill shape with accent color */
.chat-message.user .message-bubble {
  background: var(--accent);
  color: var(--text-inverse);
  border-bottom-right-radius: var(--radius-sm);
  font-weight: var(--font-normal);
}

/* Assistant message - minimal styling, focus on typography */
.chat-message.assistant .message-bubble {
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-bottom-left-radius: var(--radius-sm);
  padding: 0;
}

.chat-message.system .message-bubble {
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  text-align: center;
  border: none;
}

/* Message Content Rendering */
.message-bubble p {
  margin: 0;
}

.message-bubble p + p {
  margin-top: var(--space-2);
}

/* Headings in messages */
.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4,
.message-bubble h5,
.message-bubble h6 {
  margin: var(--space-2-5) 0 var(--space-1) 0;
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.message-bubble h1:first-child,
.message-bubble h2:first-child,
.message-bubble h3:first-child {
  margin-top: 0;
}

.message-bubble h1 { font-size: var(--text-md); }
.message-bubble h2 { font-size: var(--text-sm); }
.message-bubble h3 { font-size: var(--text-xs); }
.message-bubble h4 { font-size: var(--text-xs); }

/* Inline code */
.message-bubble code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-xs);
}

.chat-message.user .message-bubble code {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Code blocks */
.message-bubble pre {
  margin: var(--space-2) 0;
  padding: var(--space-2-5) var(--space-3);
  background: var(--code-bg);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.message-bubble pre code {
  background: transparent;
  padding: 0;
  color: var(--code-text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Lists in messages */
.message-bubble ul,
.message-bubble ol {
  margin: var(--space-1-5) 0;
  padding-left: var(--space-5);
}

.message-bubble li {
  margin: 0;
  padding: var(--space-0-5) 0;
  line-height: var(--leading-snug);
}

.message-bubble li + li {
  margin-top: var(--space-0-5);
}

/* Nested lists */
.message-bubble li > ul,
.message-bubble li > ol {
  margin: var(--space-0-5) 0;
}

/* Strong/Bold */
.message-bubble strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Tables in messages */
.message-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
}

.message-bubble thead {
  background: var(--bg-tertiary);
}

.message-bubble th {
  padding: var(--space-1-5) var(--space-2);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  border-bottom: var(--space-px) solid var(--border-color);
}

.message-bubble td {
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--space-px) solid var(--border-color);
  color: var(--text-secondary);
}

.message-bubble tr:last-child td {
  border-bottom: none;
}

/* Blockquotes */
.message-bubble blockquote {
  margin: var(--space-1-5) 0;
  padding: var(--space-1) var(--space-2-5);
  border-left: var(--space-0-5) solid var(--accent);
  color: var(--text-secondary);
}

.message-bubble blockquote p {
  margin: 0;
}

/* Tool Activity */
.tool-activity {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  margin: var(--space-0-5) 0;
  font-size: var(--text-xs);
  max-width: 100%;
  align-self: flex-start;
  color: var(--text-muted);
}

.tool-activity .tool-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tool-activity .tool-icon svg {
  width: var(--space-3);
  height: var(--space-3);
}

.tool-activity .tool-name {
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.tool-activity .tool-detail {
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-activity.loading .tool-icon {
  animation: toolPulse 1s ease-in-out infinite;
}

@keyframes toolPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Interactive References */
.chat-reference {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--accent-dim);
  border: var(--space-px) solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: var(--space-1) var(--space-0-5);
}

.chat-reference:hover {
  background: var(--accent);
  color: var(--text-inverse);
}

.chat-reference.file-ref::before {
  content: '';
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  background-size: contain;
}

.chat-reference.file-ref:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

.chat-reference.url-ref::before {
  content: '';
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
}

.chat-reference.url-ref:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* Thinking Indicator */
.thinking-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) 0;
  background: transparent;
  align-self: flex-start;
}

.thinking-dots {
  display: flex;
  gap: var(--space-0-5);
}

.thinking-dots span {
  width: var(--space-1);
  height: var(--space-1);
  background: var(--text-muted);
  border-radius: 50%;
  animation: thinkingBounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(1) { animation-delay: 0s; }
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes thinkingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.thinking-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Chat Input Area — Basecamp Style */
.chat-input-area {
  padding: var(--space-4) var(--space-5);
  border-top: var(--space-px) solid var(--border-color);
  background: var(--bg-card);
  position: relative;
}

.chat-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chat-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: var(--text-base);
  color: var(--text-primary);
  resize: none;
  min-height: 24px;
  max-height: 120px;
  line-height: var(--leading-relaxed);
  padding: 0;
  touch-action: manipulation;
}

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

#chat-input:focus {
  outline: none;
}

.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--text-inverse);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.chat-send-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.chat-send-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

.chat-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-error);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--text-inverse);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.chat-cancel-btn:hover {
  background: var(--color-error-hover);
}

.chat-hints {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Slash Command Popup */
.slash-command-popup {
  position: absolute;
  bottom: 100%;
  left: var(--space-5);
  right: var(--space-5);
  margin-bottom: var(--space-2);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-fast);
  z-index: 100;
}

.slash-command-popup.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.slash-command-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  border-bottom: var(--space-px) solid var(--border-color);
}

.slash-command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.slash-command-item:hover,
.slash-command-item.selected {
  background: var(--bg-tertiary);
}

.slash-command-item .cmd-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--accent);
  font-family: var(--font-mono);
}

.slash-command-item .cmd-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Quick Commands - Hidden in favor of slash command popup */
.quick-commands {
  display: none;
}

.quick-cmd {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.quick-cmd:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.quick-cmd:active {
  transform: scale(0.97);
}

.quick-cmd svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Quick Commands Dropdown */
.quick-cmd-dropdown {
  position: relative;
  flex-shrink: 0;
}

.quick-cmd-more {
  gap: var(--space-1);
}

.quick-cmd-more .dropdown-chevron {
  width: 10px;
  height: 10px;
  margin-left: var(--space-0-5);
  transition: transform var(--transition-fast);
}

.quick-cmd-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.quick-cmd-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: var(--space-2);
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: 12px;
  padding: var(--space-2);
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-fast);
  z-index: 1000; /* Higher z-index to ensure visibility */
}

.quick-cmd-dropdown.open .quick-cmd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cmd-menu-section {
  padding: var(--space-1) 0;
}

.cmd-menu-section:not(:last-child) {
  border-bottom: var(--space-px) solid var(--border-color);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-2);
}

.cmd-menu-header {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-0-5);
}

.cmd-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.cmd-menu-item:hover {
  background: var(--bg-card-hover);
}

.cmd-menu-item:active {
  transform: scale(0.98);
}

.cmd-menu-item .cmd-name {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--accent);
  font-family: var(--font-mono);
}

.cmd-menu-item .cmd-desc {
  font-size: var(--text-3xs);
  color: var(--text-muted);
  margin-top: var(--space-0-5);
}

/* Done Message */
.chat-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.chat-done .done-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.chat-done .done-stat svg {
  width: 12px;
  height: 12px;
}

/* ============================================
   Markdown Rendering Styles — Basecamp Theme
   Comprehensive styling for markdown content
   in chat messages and detail panels
   ============================================ */

/* Base markdown container */
.markdown-content,
.message-bubble,
.detail-section-content {
  line-height: var(--leading-relaxed);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Headings */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6,
.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4,
.message-bubble h5,
.message-bubble h6,
.detail-section-content h1,
.detail-section-content h2,
.detail-section-content h3,
.detail-section-content h4,
.detail-section-content h5,
.detail-section-content h6 {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: var(--space-5) 0 var(--space-2-5) 0;
  line-height: var(--leading-tight);
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child,
.markdown-content h4:first-child,
.message-bubble h1:first-child,
.message-bubble h2:first-child,
.message-bubble h3:first-child,
.message-bubble h4:first-child,
.detail-section-content h1:first-child,
.detail-section-content h2:first-child,
.detail-section-content h3:first-child,
.detail-section-content h4:first-child {
  margin-top: 0;
}

.markdown-content h1,
.message-bubble h1,
.detail-section-content h1 {
  font-size: var(--text-2xl);
  padding-bottom: var(--space-1-5);
  border-bottom: var(--space-px) solid var(--border-color);
}

.markdown-content h2,
.message-bubble h2,
.detail-section-content h2 {
  font-size: var(--text-xl);
  padding-bottom: var(--space-1);
  border-bottom: var(--space-px) solid var(--border-color);
}

.markdown-content h3,
.message-bubble h3,
.detail-section-content h3 {
  font-size: var(--text-lg);
}

.markdown-content h4,
.message-bubble h4,
.detail-section-content h4 {
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.markdown-content h5,
.markdown-content h6,
.message-bubble h5,
.message-bubble h6,
.detail-section-content h5,
.detail-section-content h6 {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* Paragraphs */
.markdown-content p,
.message-bubble p,
.detail-section-content p {
  margin: var(--space-2-5) 0;
}

.markdown-content p:first-child,
.message-bubble p:first-child,
.detail-section-content p:first-child {
  margin-top: 0;
}

.markdown-content p:last-child,
.message-bubble p:last-child,
.detail-section-content p:last-child {
  margin-bottom: 0;
}

/* Lists */
.markdown-content ul,
.markdown-content ol,
.message-bubble ul,
.message-bubble ol,
.detail-section-content ul,
.detail-section-content ol {
  margin: var(--space-2-5) 0;
  padding-left: var(--space-6);
}

.markdown-content ul,
.message-bubble ul,
.detail-section-content ul {
  list-style-type: disc;
}

.markdown-content ul ul,
.message-bubble ul ul,
.detail-section-content ul ul {
  list-style-type: circle;
}

.markdown-content ul ul ul,
.message-bubble ul ul ul,
.detail-section-content ul ul ul {
  list-style-type: square;
}

.markdown-content ol,
.message-bubble ol,
.detail-section-content ol {
  list-style-type: decimal;
}

.markdown-content li,
.message-bubble li,
.detail-section-content li {
  margin: var(--space-1-5) 0;
  padding-left: var(--space-1);
}

.markdown-content li > ul,
.markdown-content li > ol,
.message-bubble li > ul,
.message-bubble li > ol,
.detail-section-content li > ul,
.detail-section-content li > ol {
  margin: var(--space-1) 0;
}

/* Task lists (checkboxes) */
.markdown-content ul.task-list,
.message-bubble ul.task-list,
.detail-section-content ul.task-list {
  list-style: none;
  padding-left: 0;
}

.markdown-content .task-list-item,
.message-bubble .task-list-item,
.detail-section-content .task-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.markdown-content .task-list-item input[type="checkbox"],
.message-bubble .task-list-item input[type="checkbox"],
.detail-section-content .task-list-item input[type="checkbox"] {
  margin-top: var(--space-1-5);
  accent-color: var(--accent);
}

/* Blockquotes */
.markdown-content blockquote,
.message-bubble blockquote,
.detail-section-content blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-left: var(--space-1) solid var(--accent);
  background: var(--bg-tertiary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary);
  font-style: italic;
}

.markdown-content blockquote p:first-child,
.message-bubble blockquote p:first-child,
.detail-section-content blockquote p:first-child {
  margin-top: 0;
}

.markdown-content blockquote p:last-child,
.message-bubble blockquote p:last-child,
.detail-section-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Nested blockquotes */
.markdown-content blockquote blockquote,
.message-bubble blockquote blockquote,
.detail-section-content blockquote blockquote {
  margin: var(--space-2) 0;
  border-left-color: var(--text-muted);
}

/* Inline code */
.markdown-content code,
.message-bubble code,
.detail-section-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--accent);
}

/* Code blocks */
.markdown-content pre,
.message-bubble pre,
.detail-section-content pre {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  background: var(--code-bg);
  border: var(--space-px) solid var(--code-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-content pre code,
.message-bubble pre code,
.detail-section-content pre code {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--code-text);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  white-space: pre;
}

/* Syntax highlighting colors */
.markdown-content pre .keyword,
.message-bubble pre .keyword,
.detail-section-content pre .keyword {
  color: var(--code-keyword);
}

.markdown-content pre .string,
.message-bubble pre .string,
.detail-section-content pre .string {
  color: var(--code-string);
}

.markdown-content pre .number,
.message-bubble pre .number,
.detail-section-content pre .number {
  color: var(--code-number);
}

.markdown-content pre .comment,
.message-bubble pre .comment,
.detail-section-content pre .comment {
  color: var(--code-comment);
  font-style: italic;
}

.markdown-content pre .function,
.message-bubble pre .function,
.detail-section-content pre .function {
  color: var(--code-function);
}

/* Links */
.markdown-content a,
.message-bubble a,
.detail-section-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.markdown-content a:hover,
.message-bubble a:hover,
.detail-section-content a:hover {
  border-bottom-color: var(--accent);
}

.markdown-content a:visited,
.message-bubble a:visited,
.detail-section-content a:visited {
  color: var(--link-visited);
}

/* Images */
.markdown-content img,
.message-bubble img,
.detail-section-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
  display: block;
}

/* Tables */
.markdown-content table,
.message-bubble table,
.detail-section-content table {
  width: 100%;
  margin: var(--space-3) 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
  overflow-x: auto;
  display: block;
}

.markdown-content thead,
.message-bubble thead,
.detail-section-content thead {
  background: var(--bg-tertiary);
}

.markdown-content th,
.message-bubble th,
.detail-section-content th {
  padding: var(--space-2-5) var(--space-3);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  border-bottom: var(--space-0-5) solid var(--border-subtle);
}

.markdown-content td,
.message-bubble td,
.detail-section-content td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--space-px) solid var(--border-subtle);
  color: var(--text-secondary);
}

.markdown-content tr:hover td,
.message-bubble tr:hover td,
.detail-section-content tr:hover td {
  background: var(--bg-tertiary);
}

/* Horizontal rules */
.markdown-content hr,
.message-bubble hr,
.detail-section-content hr {
  margin: var(--space-5) 0;
  border: none;
  height: var(--space-px);
  background: linear-gradient(
    to right,
    transparent,
    var(--border-subtle) 20%,
    var(--border-subtle) 80%,
    transparent
  );
}

/* Strong/Bold */
.markdown-content strong,
.message-bubble strong,
.detail-section-content strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Emphasis/Italic */
.markdown-content em,
.message-bubble em,
.detail-section-content em {
  font-style: italic;
}

/* Strikethrough */
.markdown-content del,
.message-bubble del,
.detail-section-content del {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Abbreviations */
.markdown-content abbr,
.message-bubble abbr,
.detail-section-content abbr {
  text-decoration: underline dotted;
  cursor: help;
}

/* Keyboard shortcuts */
.markdown-content kbd,
.message-bubble kbd,
.detail-section-content kbd {
  display: inline-block;
  padding: var(--space-0-5) var(--space-1-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* Subscript and Superscript */
.markdown-content sub,
.message-bubble sub,
.detail-section-content sub {
  font-size: 0.75em;
  vertical-align: sub;
}

.markdown-content sup,
.message-bubble sup,
.detail-section-content sup {
  font-size: 0.75em;
  vertical-align: super;
}

/* Definition lists */
.markdown-content dl,
.message-bubble dl,
.detail-section-content dl {
  margin: var(--space-3) 0;
}

.markdown-content dt,
.message-bubble dt,
.detail-section-content dt {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.markdown-content dd,
.message-bubble dd,
.detail-section-content dd {
  margin-left: var(--space-6);
  color: var(--text-secondary);
}

/* Footnotes */
.markdown-content .footnote-ref,
.message-bubble .footnote-ref,
.detail-section-content .footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--accent);
}

.markdown-content .footnotes,
.message-bubble .footnotes,
.detail-section-content .footnotes {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--space-px) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Callouts / Alerts (GitHub-style) */
.markdown-content .callout,
.message-bubble .callout,
.detail-section-content .callout {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: var(--space-1) solid;
}

.markdown-content .callout-note,
.message-bubble .callout-note,
.detail-section-content .callout-note {
  background: var(--callout-note-bg);
  border-left-color: var(--callout-note-border);
}

.markdown-content .callout-tip,
.message-bubble .callout-tip,
.detail-section-content .callout-tip {
  background: var(--callout-tip-bg);
  border-left-color: var(--callout-tip-border);
}

.markdown-content .callout-warning,
.message-bubble .callout-warning,
.detail-section-content .callout-warning {
  background: var(--callout-warning-bg);
  border-left-color: var(--callout-warning-border);
}

.markdown-content .callout-danger,
.message-bubble .callout-danger,
.detail-section-content .callout-danger {
  background: var(--callout-danger-bg);
  border-left-color: var(--callout-danger-border);
}

/* File/Path references */
.markdown-content .file-ref,
.message-bubble .file-ref,
.detail-section-content .file-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.markdown-content .file-ref::before,
.message-bubble .file-ref::before,
.detail-section-content .file-ref::before {
  content: "📄";
  font-size: var(--text-xs);
}

/* Mark/Highlight */
.markdown-content mark,
.message-bubble mark,
.detail-section-content mark {
  background: var(--mark-bg);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-xs);
}

/* Details/Summary (collapsible) */
.markdown-content details,
.message-bubble details,
.detail-section-content details {
  margin: var(--space-3) 0;
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.markdown-content summary,
.message-bubble summary,
.detail-section-content summary {
  cursor: pointer;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  padding: var(--space-1) var(--space-2);
  margin: calc(-1 * var(--space-2));
  border-radius: var(--radius-md);
}

.markdown-content summary:hover,
.message-bubble summary:hover,
.detail-section-content summary:hover {
  background: var(--bg-hover);
}

.markdown-content details[open] summary,
.message-bubble details[open] summary,
.detail-section-content details[open] summary {
  margin-bottom: var(--space-2);
  border-bottom: var(--space-px) solid var(--border-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Mobile adjustments for markdown */
@media (max-width: 768px) {
  .markdown-content h1,
  .message-bubble h1,
  .detail-section-content h1 {
    font-size: var(--text-xl);
  }

  .markdown-content h2,
  .message-bubble h2,
  .detail-section-content h2 {
    font-size: var(--text-lg);
  }

  .markdown-content pre,
  .message-bubble pre,
  .detail-section-content pre {
    padding: var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
  }

  .markdown-content table,
  .message-bubble table,
  .detail-section-content table {
    font-size: var(--text-xs);
  }

  .markdown-content th,
  .markdown-content td,
  .message-bubble th,
  .message-bubble td,
  .detail-section-content th,
  .detail-section-content td {
    padding: var(--space-1-5) var(--space-2);
  }

  .markdown-content blockquote,
  .message-bubble blockquote,
  .detail-section-content blockquote {
    padding: var(--space-2) var(--space-3);
    margin: var(--space-2) 0;
  }
}

/* ============================================
   File Reference Pills
   Clickable file path pills in chat messages
   ============================================ */

.file-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  margin: 0 var(--space-0-5);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  vertical-align: baseline;
}

.file-pill::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.file-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.file-pill:active {
  transform: translateY(0);
}

/* Document files (md, txt) */
.file-type-doc {
  background: var(--file-doc-bg);
  color: var(--file-doc);
  border: var(--space-px) solid var(--file-doc-border);
}

.file-type-doc::before {
  content: "📄";
  font-size: var(--text-sm);
}

.file-type-doc:hover {
  background: var(--file-doc-bg-hover);
  border-color: var(--file-doc-border-hover);
}

/* Code files (ts, js) */
.file-type-code {
  background: var(--file-code-bg);
  color: var(--file-code);
  border: var(--space-px) solid var(--file-code-border);
}

.file-type-code::before {
  content: "⚡";
  font-size: var(--text-sm);
}

.file-type-code:hover {
  background: var(--file-code-bg-hover);
  border-color: var(--file-code-border-hover);
}

/* Data files (json, yaml) */
.file-type-data {
  background: var(--file-data-bg);
  color: var(--file-data);
  border: var(--space-px) solid var(--file-data-border);
}

.file-type-data::before {
  content: "📊";
  font-size: var(--text-sm);
}

.file-type-data:hover {
  background: var(--file-data-bg-hover);
  border-color: var(--file-data-border-hover);
}

/* Style files (css) */
.file-type-style {
  background: var(--file-style-bg);
  color: var(--file-style);
  border: var(--space-px) solid var(--file-style-border);
}

.file-type-style::before {
  content: "🎨";
  font-size: var(--text-sm);
}

.file-type-style:hover {
  background: var(--file-style-bg-hover);
  border-color: var(--file-style-border-hover);
}

/* Markup files (html) */
.file-type-markup {
  background: var(--file-markup-bg);
  color: var(--file-markup);
  border: var(--space-px) solid var(--file-markup-border);
}

.file-type-markup::before {
  content: "🌐";
  font-size: var(--text-sm);
}

.file-type-markup:hover {
  background: var(--file-markup-bg-hover);
  border-color: var(--file-markup-border-hover);
}

/* Other files */
.file-type-other {
  background: var(--file-default-bg);
  color: var(--file-default);
  border: var(--space-px) solid var(--file-default-border);
}

.file-type-other::before {
  content: "📁";
  font-size: var(--text-sm);
}

.file-type-other:hover {
  background: var(--file-default-bg-hover);
  border-color: var(--file-default-border-hover);
}

/* Detail panel loading and error states */
.detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--text-muted);
}

.detail-loading .loading-spinner {
  width: var(--space-6);
  height: var(--space-6);
  border: var(--space-0-5) solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.detail-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  color: var(--color-error);
}

.detail-error svg {
  opacity: 0.7;
}

.detail-error .error-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Mobile adjustments for file pills */
@media (max-width: 768px) {
  .file-pill {
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--text-sm);
  }

  .file-pill::before {
    width: 14px;
    height: 14px;
  }
}

/* ============================================
   Command Palette (iOS Native Integration)
   ============================================ */

.command-palette-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.command-palette-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.command-palette {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 90%;
  max-width: 480px;
  max-height: 70vh;
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.command-palette.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

.command-palette-input-wrapper {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-3);
}

.command-palette-input-wrapper svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.command-palette-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: var(--text-lg);
  color: var(--text-primary);
  outline: none;
}

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

.command-palette-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.command-palette-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.command-palette-item:hover,
.command-palette-item.selected {
  background: var(--bg-card-hover);
}

.command-palette-item.selected {
  background: var(--accent);
  color: white;
}

.command-palette-item.selected .cmd-desc {
  color: rgba(255, 255, 255, 0.8);
}

.cmd-icon {
  font-size: var(--text-xl);
  width: 28px;
  text-align: center;
}

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

.cmd-name {
  font-weight: var(--font-medium);
  font-size: var(--text-base);
}

.cmd-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette-hint {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-align: center;
}

.command-palette-hint kbd {
  display: inline-block;
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  margin: 0 var(--space-0-5);
}

/* ============================================
   Quick Capture Modal (Share Sheet Integration)
   ============================================ */

.quick-capture-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.quick-capture-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.quick-capture-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.quick-capture-modal.visible {
  transform: translateY(0);
}

.quick-capture-handle {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
}

.quick-capture-handle::after {
  content: '';
  width: 36px;
  height: 4px;
  background: var(--border-color);
  border-radius: var(--radius-xs);
}

.quick-capture-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5) var(--space-4);
}

.quick-capture-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.quick-capture-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-capture-close:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.quick-capture-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-5) var(--space-5);
}

.capture-type-selector {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.capture-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-3-5) var(--space-2);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.capture-type-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.capture-type-btn.active {
  border-color: var(--accent);
  background: rgba(79, 70, 229, 0.1);
}

.capture-type-btn .type-icon {
  font-size: var(--text-2xl);
}

.capture-type-btn .type-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.capture-type-btn.active .type-label {
  color: var(--accent);
}

.capture-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: 12px;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-primary);
  resize: none;
  transition: border-color var(--transition-fast);
}

.capture-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.capture-textarea::placeholder {
  color: var(--text-muted);
}

.quick-capture-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.capture-btn {
  flex: 1;
  padding: var(--space-3-5) var(--space-4);
  border-radius: 12px;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.capture-btn-cancel {
  background: var(--bg-tertiary);
  border: var(--space-px) solid var(--border-color);
  color: var(--text-secondary);
}

.capture-btn-cancel:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.capture-btn-save {
  background: var(--accent);
  border: none;
  color: white;
}

.capture-btn-save:hover {
  background: var(--accent-hover);
}

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

/* iOS safe area padding for bottom sheet */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .quick-capture-actions {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* Quick Capture modal - smaller on mobile */
@media (max-width: 768px) {
  .quick-capture-modal {
    max-height: 60vh;
  }

  .quick-capture-header {
    padding: 0 var(--space-4) var(--space-3);
  }

  .quick-capture-content {
    padding: 0 var(--space-4) var(--space-4);
  }

  .capture-textarea {
    min-height: 100px;
  }

  .quick-capture-actions {
    padding: var(--space-3) var(--space-4);
  }
}

/* Command Palette mobile adjustments */
@media (max-width: 768px) {
  .command-palette {
    top: 10%;
    width: 94%;
    max-height: 80vh;
  }

  .command-palette-input {
    font-size: var(--text-lg);
  }

  .command-palette-item {
    padding: var(--space-4);
  }

  .command-palette-hint {
    display: none;
  }
}

/* ============================================
   Webapp v2 Styles
   ============================================ */

/* Navigation Divider */
.nav-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-2) var(--space-4);
}

/* Navigation Badge */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  background: var(--accent);
  color: white;
  border-radius: var(--radius-lg);
  margin-left: auto;
}

/* Planning Prompt (when Today's Focus is stale) */
.planning-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem var(--space-8);
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  gap: var(--space-4);
}

.planning-prompt-icon {
  color: var(--accent);
  opacity: 0.8;
}

.planning-prompt h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.planning-prompt p {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.plan-day-btn {
  margin-top: var(--space-2);
}

/* Focus Item Enhancements */
.focus-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.focus-checkbox svg {
  opacity: 0;
  transition: var(--transition-fast);
}

.focus-item.completed .focus-checkbox {
  background: var(--color-success);
  border-color: var(--color-success);
}

.focus-item.completed .focus-checkbox svg {
  opacity: 1;
  color: white;
}

.focus-checkbox:hover {
  border-color: var(--accent);
}

.focus-project {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.focus-badges {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.focus-complete-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-fast);
}

.focus-item:hover .focus-complete-btn {
  opacity: 1;
}

.focus-complete-btn:hover {
  background: var(--bg-tertiary);
  color: var(--color-success);
}

.focus-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
}

/* Projects View */
.projects-view-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
  height: calc(100vh - var(--header-height) - 4rem);
}

.projects-tree-pane {
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.projects-tree-header {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
}

.projects-tree-header h3 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.projects-tree {
  flex: 1;
  overflow-y: auto;
}

.projects-detail-pane {
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}

.projects-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: var(--space-4);
  font-size: var(--text-lg);
}

/* Project Tree */
.project-tree-node {
  margin-left: calc(var(--depth, 0) * var(--space-4));
}

.project-tree-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 40px;
}

.project-tree-header:hover {
  background: var(--bg-tertiary);
}

.project-tree-node.selected > .project-tree-header {
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--space-3) - 3px);
}

.project-tree-node.selected .project-tree-name {
  color: var(--accent);
  font-weight: var(--font-semibold);
}

.project-tree-toggle {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.project-tree-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.project-tree-toggle svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.project-tree-toggle.expanded {
  background: var(--accent-dim);
  color: var(--accent);
}

.project-tree-toggle.expanded svg {
  transform: rotate(90deg);
}

.project-tree-spacer {
  width: 16px;
  min-width: 16px;
}

/* Paused/completed projects are visually muted */
.project-tree-node.status-paused .project-tree-name,
.project-tree-node.status-paused .project-tree-name-link {
  color: var(--text-muted);
}

.project-tree-node.status-completed .project-tree-name,
.project-tree-node.status-completed .project-tree-name-link {
  color: var(--text-muted);
  text-decoration: line-through;
}

.project-tree-icon {
  color: var(--text-muted);
  display: flex;
  flex-shrink: 0;
}

.project-tree-name,
.project-tree-name-link {
  flex: 1;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: inherit;
}

.project-tree-name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Has children row - full row is clickable for expand/collapse */
.project-tree-node.has-children .project-tree-header {
  cursor: pointer;
}

.project-tree-count {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--accent);
  background: var(--accent-dim);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.project-tree-children {
  margin-top: 0;
}

/* Project Detail */
.project-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: var(--space-px) solid var(--border-color);
}

.project-header-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.project-header-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.project-header-badges > * {
  display: inline-flex;
  align-items: center;
  height: 28px;
}

.project-detail-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.project-domain {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Project Status Badge (in detail view) */
.project-status-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  text-transform: capitalize;
}

.project-status-badge.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.project-status-badge.status-paused {
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
}

.project-status-badge.status-completed {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Project Rollup Progress */
.project-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-shrink: 0;
}

.project-progress-bar {
  width: 80px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.project-progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-xs);
  transition: width var(--transition-normal);
}

.project-progress-text {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.project-description {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.project-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-5);
}

.project-tab {
  padding: var(--space-2-5) var(--space-4);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-fast);
}

.project-tab:hover {
  color: var(--text-primary);
}

.project-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: var(--font-semibold);
}

.project-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 150px;
}

.project-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.project-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.project-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.project-item-icon.task { background: rgba(96, 165, 250, 0.15); color: var(--color-info); }
.project-item-icon.idea { background: rgba(74, 222, 128, 0.15); color: var(--color-idea); }
.project-item-icon.memory { background: rgba(139, 92, 246, 0.15); color: var(--accent); }
.project-item-icon.output { background: rgba(251, 146, 60, 0.15); color: var(--color-warning); }

.project-item-content {
  flex: 1;
  min-width: 0;
}

.project-item-title {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-item-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.empty-state-small {
  padding: var(--space-10);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-base);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-color);
}

/* Outputs View */
.output-icon, .collection-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.output-type-prompt { background: rgba(139, 92, 246, 0.15); color: var(--accent); }
.output-type-research { background: rgba(96, 165, 250, 0.15); color: var(--color-info); }
.output-type-brief { background: rgba(251, 146, 60, 0.15); color: var(--color-warning); }
.output-type-status { background: rgba(74, 222, 128, 0.15); color: var(--color-success); }
.output-type-deck { background: rgba(244, 114, 182, 0.15); color: var(--color-commitment); }

.refine-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-fast);
}

.item-row:hover .refine-btn {
  opacity: 1;
}

.refine-btn:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Triage View */
.triage-header {
  margin-bottom: var(--space-4);
}

.triage-description {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.triage-item {
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.triage-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.triage-source {
  font-weight: var(--font-medium);
  font-size: var(--text-base);
}

.triage-arrived {
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.triage-hypothesis {
  background: var(--bg-tertiary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}

.triage-questions {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.triage-questions ul {
  margin-left: var(--space-6);
  margin-top: var(--space-2);
}

.triage-questions li {
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.triage-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Settings View */
.settings-section {
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.settings-section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: var(--space-px) solid var(--border-color);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-value {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.theme-toggle {
  display: flex;
  gap: var(--space-1);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 2px;
}

.theme-btn {
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.theme-btn:hover {
  color: var(--text-primary);
}

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

/* Old theme definitions removed - now in :root and [data-theme] above */

/* Enhanced Entity View Styles */
.item-project {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: var(--space-0-5);
}

.item-due {
  font-size: var(--text-2xs);
  color: var(--color-warning);
}

.item-row.blocked {
  opacity: 0.7;
  border-left: 3px solid var(--color-error);
}

.item-row.blocked .badge.status-blocked {
  background: rgba(248, 113, 113, 0.15);
  color: var(--color-error);
}

/* Type-specific item row styling */
.item-row.item-task {
  border-left: 3px solid var(--color-task);
}
.item-row.item-task:hover {
  background: var(--color-task-dim);
  border-color: var(--color-task);
}

.item-row.item-idea {
  border-left: 3px solid var(--color-idea);
}
.item-row.item-idea:hover {
  background: var(--color-idea-dim);
  border-color: var(--color-idea);
}

.item-row.item-output {
  border-left: 3px solid var(--color-output);
}
.item-row.item-output:hover {
  background: var(--color-output-dim);
  border-color: var(--color-output);
}

.item-row.item-memory {
  border-left: 3px solid var(--color-memory);
}
.item-row.item-memory:hover {
  background: var(--color-memory-dim);
  border-color: var(--color-memory);
}

.item-row.item-project {
  border-left: 3px solid var(--color-project);
}
.item-row.item-project:hover {
  background: rgba(113, 113, 122, 0.1);
  border-color: var(--color-project);
}

/* Type indicator dot for lists */
.item-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.item-type-dot.task { background: var(--color-task); }
.item-type-dot.idea { background: var(--color-idea); }
.item-type-dot.output { background: var(--color-output); }
.item-type-dot.memory { background: var(--color-memory); }
.item-type-dot.project { background: var(--color-project); }

.badge.status-pending { background: rgba(156, 163, 175, 0.15); color: var(--text-muted); }
.badge.status-in_progress { background: rgba(96, 165, 250, 0.15); color: var(--color-info); }
.badge.status-completed { background: rgba(74, 222, 128, 0.15); color: var(--color-success); }
.badge.status-blocked { background: rgba(248, 113, 113, 0.15); color: var(--color-error); }

/* Memory type badges */
.badge.type-correction { background: rgba(248, 113, 113, 0.15); color: var(--color-correction); }
.badge.type-decision { background: rgba(251, 191, 36, 0.15); color: var(--color-decision); }
.badge.type-commitment { background: rgba(244, 114, 182, 0.15); color: var(--color-commitment); }
.badge.type-insight { background: rgba(34, 211, 238, 0.15); color: var(--color-insight); }
.badge.type-learning { background: rgba(129, 140, 248, 0.15); color: var(--color-learning); }
.badge.type-pattern { background: rgba(45, 212, 191, 0.15); color: var(--color-pattern); }
.badge.type-gap { background: rgba(156, 163, 175, 0.15); color: var(--color-gap); }

/* Idea status badges */
.badge.status-active { background: rgba(74, 222, 128, 0.15); color: var(--color-success); }
.badge.status-realized { background: rgba(139, 92, 246, 0.15); color: var(--accent); }
.badge.status-partially_realized { background: rgba(251, 191, 36, 0.15); color: var(--color-warning); }
.badge.status-archived { background: rgba(156, 163, 175, 0.15); color: var(--text-muted); }
.badge.status-someday { background: rgba(96, 165, 250, 0.15); color: var(--color-info); }

/* Mobile responsiveness for v2 views */
@media (max-width: 768px) {
  .projects-view-container {
    grid-template-columns: 1fr;
    height: auto;
  }

  .projects-tree-pane {
    max-height: 40vh;
  }

  .project-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .triage-actions {
    flex-direction: column;
  }

  .triage-actions button {
    width: 100%;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ============================================
   V2 Enhancement Styles
   Project breadcrumbs, people chips, detail actions
   ============================================ */

/* Project Breadcrumb Navigation */
.project-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--accent);
}

.breadcrumb-sep {
  color: var(--text-muted);
  margin: 0 var(--space-1);
}

/* People Chips */
.project-people {
  margin-bottom: var(--space-4);
}

.project-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.person-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--bg-tertiary);
  border-radius: 100px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: default;
  transition: all var(--transition-fast);
}

.person-chip:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.person-chip svg {
  color: var(--text-muted);
}

/* Project Actions */
.project-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--space-px) solid var(--border-color);
}

.project-add-task,
.project-add-idea {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3-5);
  font-size: var(--text-xs);
}

/* Detail Panel Actions */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
}

.detail-actions .action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.detail-actions .btn-primary {
  background: var(--accent);
  color: white;
  border: none;
}

.detail-actions .btn-primary:hover {
  background: var(--accent-hover);
}

.detail-actions .btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: var(--space-px) solid var(--border-color);
}

.detail-actions .btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

/* Detail Actions Section (for grouped buttons like outputs) */
.detail-actions-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--space-px) solid var(--border-color);
}

.actions-section-label {
  display: block;
  font-size: var(--text-3xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* Realize As... Actions for Ideas */
.realize-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-top: var(--space-4);
}

.realize-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.btn-realize {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-main);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.btn-realize:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-idea);
}

.btn-realize svg {
  flex-shrink: 0;
  color: var(--color-idea);
}

.btn-realize span {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.btn-realize small {
  display: block;
  font-size: var(--text-3xs);
  color: var(--text-muted);
  margin-left: auto;
}

/* Realized Info Display */
.detail-realized-info {
  background: var(--color-output-dim);
  border-left: 3px solid var(--color-output);
  padding: var(--space-3);
  border-radius: 0 6px 6px 0;
  margin-top: var(--space-4);
}

.detail-realized-info .realized-label {
  font-size: var(--text-3xs);
  font-weight: var(--font-medium);
  color: var(--color-output);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.detail-realized-info .realized-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detail-realized-info .realized-item {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.detail-realized-info .realized-item a {
  color: var(--accent);
  text-decoration: none;
}

.detail-realized-info .realized-item a:hover {
  text-decoration: underline;
}

.output-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.btn-output {
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-2xs);
  background: transparent;
  color: var(--text-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-output:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent);
}

/* Related Outputs Section */
.related-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.output-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-2xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.output-pill svg {
  flex-shrink: 0;
}

.output-pill.pending {
  background: rgba(251, 146, 60, 0.15);
  border: var(--space-px) solid var(--color-warning);
  color: var(--color-warning);
}

.output-pill.completed {
  background: rgba(74, 222, 128, 0.15);
  border: var(--space-px) solid var(--color-success);
  color: var(--color-success);
}

.output-pill.completed.clickable {
  cursor: pointer;
}

.output-pill.completed.clickable:hover {
  background: var(--color-success);
  color: var(--bg-primary);
}

/* Detail Project Context */
.detail-project-context {
  margin-bottom: var(--space-3);
}

.project-context-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--accent-dim);
  border: var(--space-px) solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.project-context-link:hover {
  background: var(--accent);
  color: white;
}

.project-context-link svg {
  flex-shrink: 0;
}

/* Clickable Entity Chips */
.entity-chip.clickable {
  cursor: pointer;
}

.entity-chip.clickable:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Entity Links in Chat/Markdown */
.entity-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  margin: 0 var(--space-0-5);
  background: var(--accent-dim);
  border: var(--space-px) solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.entity-link:hover {
  background: var(--accent);
  color: white;
}

/* Entity link type indicators */
.entity-link[data-type="task"]::before { content: "📋 "; font-size: var(--text-3xs); }
.entity-link[data-type="idea"]::before { content: "💡 "; font-size: var(--text-3xs); }
.entity-link[data-type="project"]::before { content: "📁 "; font-size: var(--text-3xs); }
.entity-link[data-type="memory"]::before { content: "🧠 "; font-size: var(--text-3xs); }
.entity-link[data-type="output"]::before { content: "📤 "; font-size: var(--text-3xs); }
.entity-link[data-type="person"]::before { content: "👤 "; font-size: var(--text-3xs); }

/* Action hints - contextual help text below action buttons */
.action-hint {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================
   Ideas View - Active/Realized Sections
   ============================================ */

.ideas-section {
  margin-bottom: var(--space-6);
}

.ideas-section:last-child {
  margin-bottom: 0;
}

.ideas-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--space-px) solid var(--border-color);
}

.ideas-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.ideas-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ideas-section-dot.active {
  background: var(--color-idea);
}

.ideas-section-dot.realized {
  background: var(--color-success);
}

.ideas-section-dot.archived {
  background: var(--text-muted);
}

.ideas-section-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ideas-section-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* Collapsible archived section */
.ideas-section.collapsible .ideas-section-header {
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: var(--space-2);
  margin: 0 calc(-1 * var(--space-2)) var(--space-3);
  border-radius: var(--radius-md);
}

.ideas-section.collapsible .ideas-section-header:hover {
  background: var(--bg-card-hover);
}

.ideas-section.collapsible .chevron {
  transition: transform var(--transition-fast);
  color: var(--text-muted);
}

.ideas-section.collapsible.collapsed .chevron {
  transform: rotate(-90deg);
}

.ideas-section-content {
  transition: max-height var(--transition-normal);
  max-height: 2000px;
  overflow: hidden;
}

.ideas-section.collapsed .ideas-section-content {
  max-height: 0;
}

/* Realized ideas - muted and compact */
.realized-ideas-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ============================================
   Outputs View - Status Sections
   ============================================ */

.outputs-section {
  margin-bottom: var(--space-6);
}

.outputs-section:last-child {
  margin-bottom: 0;
}

.outputs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--space-px) solid var(--border-color);
}

.outputs-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.outputs-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.outputs-section-dot.active {
  background: var(--color-output);
}

.outputs-section-dot.complete {
  background: var(--color-success);
}

.outputs-section-dot.draft {
  background: var(--color-warning);
}

.outputs-section-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.outputs-section-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* Collapsible draft section */
.outputs-section.collapsible .outputs-section-header {
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: var(--space-2);
  margin: 0 calc(-1 * var(--space-2)) var(--space-3);
  border-radius: var(--radius-md);
}

.outputs-section.collapsible .outputs-section-header:hover {
  background: var(--bg-card-hover);
}

.outputs-section.collapsible svg {
  transition: transform var(--transition-fast);
  color: var(--text-muted);
}

.outputs-section.collapsible.collapsed svg {
  transform: rotate(-90deg);
}

.outputs-section-content {
  transition: max-height var(--transition-normal);
  max-height: 2000px;
  overflow: hidden;
}

.outputs-section.collapsed .outputs-section-content {
  max-height: 0;
}

.realized-idea-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.7;
}

.realized-idea-row:hover {
  opacity: 1;
  background: var(--bg-card-hover);
}

.realized-idea-title {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realized-as {
  font-size: var(--text-3xs);
  color: var(--color-output);
  flex-shrink: 0;
}

/* ============================================
   Card Component System
   Reusable card component for all list views
   ============================================ */

/* Cards Grid - responsive multi-column layout */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Project tab controls styling */
.project-tab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  border-bottom: var(--space-px) solid var(--border-color);
}

.project-tab-controls .control-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.project-tab-controls label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.project-tab-controls select {
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-xs);
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}

.project-tab-controls select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Card Component — Basecamp Theme */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  box-shadow: var(--shadow-sm);
}

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

.card:active {
  transform: scale(0.98);
}

.card.completed {
  opacity: 0.6;
}

.card.completed .card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.card.blocked {
  border-left: 4px solid var(--color-error);
  opacity: 0.85;
}

.card.in-progress {
  border-left: 4px solid var(--accent);
  background: var(--accent-softer);
}

/* Optimistic update state - subtle pulsing */
.card.optimistic {
  animation: optimistic-pulse 1.5s ease-in-out infinite;
}

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

/* Card type indicator - left border accent */
.card-type-label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: 0 var(--radius-xl) 0 var(--radius-md);
}

/* Card type variants — left border accent style */
.card.card-task {
  border-left: 4px solid var(--color-task);
}
.card.card-task .card-type-label {
  background: var(--color-task);
  color: var(--text-inverse);
}

.card.card-idea {
  border-left: 4px solid var(--color-idea);
}
.card.card-idea .card-type-label {
  background: var(--color-idea);
  color: var(--text-inverse);
}

.card.card-memory {
  border-left: 4px solid var(--color-memory);
}
.card.card-memory .card-type-label {
  background: var(--color-memory);
  color: var(--text-inverse);
}

.card.card-output {
  border-left: 4px solid var(--color-output);
}
.card.card-output .card-type-label {
  background: var(--color-output);
  color: var(--text-inverse);
}

.card.card-project {
  border-left: 4px solid var(--color-project);
}
.card.card-project .card-type-label {
  background: var(--color-project);
  color: var(--text-inverse);
}

/* Type-specific hover states */
.card.card-task:hover {
  border-color: var(--color-task);
  box-shadow: var(--shadow-md);
}
.card.card-idea:hover {
  border-color: var(--color-idea);
  box-shadow: var(--shadow-md);
}
.card.card-output:hover {
  border-color: var(--color-output);
  box-shadow: var(--shadow-md);
}
.card.card-memory:hover {
  border-color: var(--color-memory);
  box-shadow: var(--shadow-md);
}
.card.card-project:hover {
  border-color: var(--color-project);
  box-shadow: var(--shadow-md);
}

/* Project card badge styling */
.badge.domain-work {
  background: rgba(96, 165, 250, 0.15);
  color: var(--color-info);
}
.badge.domain-personal {
  background: rgba(244, 114, 182, 0.15);
  color: var(--color-commitment);
}
.badge.domain-nonprofit {
  background: rgba(74, 222, 128, 0.15);
  color: var(--color-success);
}

.badge.project-task-count,
.badge.project-idea-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.badge.project-task-count {
  background: rgba(167, 139, 250, 0.15);
  color: var(--color-task);
}
.badge.project-idea-count {
  background: rgba(74, 222, 128, 0.15);
  color: var(--color-idea);
}

/* Card Header */
.card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Type icon in card header */
.card-type-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.card-type-icon.type-task { color: var(--color-task); }
.card-type-icon.type-idea { color: var(--color-idea); }
.card-type-icon.type-memory { color: var(--color-memory); }
.card-type-icon.type-knowledge { color: var(--color-knowledge); }
.card-type-icon.type-output { color: var(--color-output); }
.card-type-icon.type-project { color: var(--color-project); }

/* Colored icons for all contexts - type indicated by icon color */
.recent-type-icon.type-task,
.detail-related-icon.type-task,
.sub-project-item-icon.type-task { color: var(--color-task); }

.recent-type-icon.type-idea,
.detail-related-icon.type-idea,
.sub-project-item-icon.type-idea { color: var(--color-idea); }

.recent-type-icon.type-memory,
.detail-related-icon.type-memory,
.sub-project-item-icon.type-memory { color: var(--color-memory); }

.recent-type-icon.type-knowledge,
.detail-related-icon.type-knowledge,
.sub-project-item-icon.type-knowledge { color: var(--color-knowledge); }

.recent-type-icon.type-output,
.detail-related-icon.type-output,
.sub-project-item-icon.type-output { color: var(--color-output); }

.recent-type-icon.type-project,
.detail-related-icon.type-project,
.sub-project-item-icon.type-project { color: var(--color-project); }

/* Memory subtypes with their specific colors */
.recent-type-icon.type-correction,
.detail-related-icon.type-correction { color: var(--color-correction); }

.recent-type-icon.type-decision,
.detail-related-icon.type-decision { color: var(--color-decision); }

.recent-type-icon.type-commitment,
.detail-related-icon.type-commitment { color: var(--color-commitment); }

.recent-type-icon.type-insight,
.detail-related-icon.type-insight { color: var(--color-insight); }

.recent-type-icon.type-learning,
.detail-related-icon.type-learning { color: var(--color-learning); }

.recent-type-icon.type-pattern,
.detail-related-icon.type-pattern { color: var(--color-pattern); }

.recent-type-icon.type-gap,
.detail-related-icon.type-gap { color: var(--color-gap); }

.recent-type-icon,
.detail-related-icon,
.sub-project-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-checkbox {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--border-hover);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  cursor: pointer;
  margin-top: 2px;
}

.card-checkbox:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.card.completed .card-checkbox {
  background: var(--color-success);
  border-color: var(--color-success);
}

.card-checkbox svg {
  opacity: 0;
  color: white;
  width: 12px;
  height: 12px;
}

.card.completed .card-checkbox svg {
  opacity: 1;
}

.card-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: 1.4;
}

/* Card file indicator */
.card-file-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.7;
  margin-left: var(--space-1);
}

.card-file-indicator svg {
  width: 14px;
  height: 14px;
}

.card:hover .card-file-indicator {
  opacity: 1;
  color: var(--accent);
}

/* Card Body */
.card-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Meta - Badges row */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-2);
}

/* Card Footer - Relations/links */
.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  padding-top: var(--space-2);
  border-top: var(--space-px) solid var(--border-color);
  margin-top: auto;
}

/* Status badge in card footer */
.card-status-badge {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: var(--font-semibold);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card-status-badge.status-active { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.card-status-badge.status-complete,
.card-status-badge.status-completed { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
.card-status-badge.status-draft { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.card-status-badge.status-realized { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.card-status-badge.status-partially_realized { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.card-status-badge.status-archived { background: rgba(107, 114, 128, 0.1); color: #9ca3af; }
.card-status-badge.status-someday { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

/* Type badge in card footer */
.card-type-badge {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: var(--font-semibold);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card-type-badge.type-task { color: var(--color-task); background: var(--color-task-dim); }
.card-type-badge.type-idea { color: var(--color-idea); background: var(--color-idea-dim); }
.card-type-badge.type-memory { color: var(--color-memory); background: var(--color-memory-dim); }
.card-type-badge.type-knowledge { color: var(--color-knowledge); background: var(--color-knowledge-dim); }
.card-type-badge.type-output { color: var(--color-output); background: var(--color-output-dim); }

/* Card date in footer */
.card-date {
  font-size: var(--text-3xs);
  color: var(--text-muted);
  margin-left: auto;
}

/* Relation chips */
.relation-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.relation-chip:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

.relation-chip svg {
  width: 10px;
  height: 10px;
}

.relation-chip.project {
  background: rgba(96, 165, 250, 0.1);
  color: var(--color-info);
}

.relation-chip.person {
  background: rgba(244, 114, 182, 0.1);
  color: var(--color-commitment);
}

/* Card date */
.card-date {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  margin-left: auto;
}

/* ============================================
   Inbox Badge - Red Alert Styling
   ============================================ */

.header-badge#inbox-badge.has-items {
  background: rgba(248, 113, 113, 0.15);
  border-color: var(--color-error);
  color: var(--color-error);
}

.header-badge#inbox-badge.has-items .badge-count {
  color: var(--color-error);
  font-weight: var(--font-semibold);
}

/* Nav item badge (for inbox count in sidebar) */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1-5);
  background: var(--color-error);
  color: white;
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-lg);
  margin-left: auto;
}

/* Health badge for settings (heartbeat issues) */
.nav-badge.health-badge {
  background: var(--color-warning);
}

.nav-badge.health-badge.critical {
  background: var(--color-error);
  animation: pulse-critical 2s infinite;
}

.nav-badge.health-badge.warning {
  background: var(--color-warning);
}

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

/* ============================================
   Sort Control Styling
   ============================================ */

.sort-select {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-ios-input); /* Prevents iOS zoom on focus */
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
}

.sort-select:hover {
  border-color: var(--border-hover);
}

.sort-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ============================================
   Project Cards with Counts
   ============================================ */

.project-card-counts {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.project-count {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-3xs);
  color: var(--text-muted);
}

.project-count.tasks {
  color: var(--color-task);
}

.project-count.ideas {
  color: var(--color-idea);
}

/* ============================================
   Sub-Projects Tab Styling
   ============================================ */

.sub-project-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  background: var(--bg-card);
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sub-project-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.sub-project-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--accent-dim);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

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

.sub-project-name {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.sub-project-description {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-project-meta {
  display: flex;
  gap: var(--space-1-5);
}

/* Sub-Project Collapsible Sections */
.sub-project-section {
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.sub-project-section:hover {
  box-shadow: var(--shadow-md);
}

.sub-project-section .sub-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sub-project-section .sub-project-header:hover {
  background: var(--bg-card-hover);
}

.sub-project-header-main {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex: 1;
  min-width: 0;
}

.sub-project-section .chevron {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.sub-project-section.collapsed .chevron {
  transform: rotate(-90deg);
}

.sub-project-section .sub-project-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.sub-project-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sub-project-section .sub-project-name {
  font-size: var(--text-base);
}

.sub-project-counts {
  font-size: var(--text-3xs);
  color: var(--text-muted);
}

.sub-project-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.sub-project-progress-bar {
  width: 60px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.sub-project-progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-xs);
  transition: width var(--transition-normal);
}

.sub-project-progress-text {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.sub-project-navigate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: var(--space-px) solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sub-project-navigate:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.sub-project-content {
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-top: var(--space-px) solid var(--border-color);
  background: var(--bg-secondary);
  transition: max-height var(--transition-normal);
  max-height: 500px;
  overflow: hidden;
}

.sub-project-section.collapsed .sub-project-content {
  max-height: 0;
  padding: 0 var(--space-4);
  border-top: none;
}

.sub-project-items {
  margin-bottom: var(--space-3);
}

.sub-project-items:last-child {
  margin-bottom: 0;
}

.sub-project-items-label {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-1-5);
}

.sub-project-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sub-project-item:hover {
  background: var(--bg-card-hover);
}

.sub-project-item-title {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-project-more {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  padding-left: var(--space-6);
}

.sub-project-empty {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-2) 0;
}

/* ============================================
   Focus Item Project Link
   ============================================ */

.focus-project {
  font-size: var(--text-2xs);
  color: var(--color-info);
  margin-top: var(--space-0-5);
  cursor: pointer;
}

.focus-project:hover {
  text-decoration: underline;
}

/* Mobile adjustments for V2 enhancements */
@media (max-width: 768px) {
  .detail-actions {
    flex-direction: column;
  }

  .detail-actions .action-btn {
    width: 100%;
    justify-content: center;
  }

  .project-actions {
    flex-direction: column;
  }

  .project-add-task,
  .project-add-idea {
    width: 100%;
    justify-content: center;
  }

  .people-chips {
    gap: var(--space-1-5);
  }

  .person-chip {
    font-size: var(--text-2xs);
    padding: var(--space-1) var(--space-2);
  }

  /* Card mobile adjustments */
  .card {
    padding: var(--space-3-5);
  }

  .card-body {
    display: none; /* Hide description on mobile for compactness */
  }

  .card-title {
    font-size: var(--text-base);
  }

  .card-meta {
    gap: var(--space-1);
  }

  .card-footer {
    flex-wrap: wrap;
  }

  /* Filter/sort controls stack vertically */
  .list-filters {
    flex-direction: column;
    gap: var(--space-2);
  }

  .list-filters .filter-select,
  .list-filters .sort-select {
    width: 100%;
  }
}

/* ============================================
   Native iOS App - Status Bar Offset
   Applied when wrapped in iOS WKWebView
   ============================================ */

body.native-app {
  /* Ensure safe area insets are respected */
  padding-top: 0;
}

body.native-app .header {
  /* Fixed offset for iOS status bar + Dynamic Island (~54-59px) */
  padding-top: 54px;
  min-height: calc(var(--header-height) + 54px);
  height: auto;
}

body.native-app .sidebar {
  /* Match header offset for sidebar */
  padding-top: 54px;
}

/* When sidebar is open on mobile, also needs offset */
@media (max-width: 768px) {
  body.native-app .sidebar.open {
    padding-top: 54px;
  }
}

/* Chat panel header needs safe area padding when open */
body.native-app .chat-section.open .chat-header,
body.native-app .chat-section.expanded .chat-header {
  padding-top: calc(0.5rem + 54px);
}

/* Detail panel header needs safe area padding when open */
body.native-app .detail-panel.open .detail-header {
  padding-top: calc(1.25rem + 54px);
}

/* Voice mode overlay needs safe area padding for Dynamic Island */
body.native-app .voice-mode-overlay .voice-mode-content {
  padding-top: calc(var(--space-4) + 54px);
}

/* ============================================
   Native-Only Elements
   Hide voice features when not in native app
   ============================================ */

/* By default, hide native-only elements */
.native-only {
  display: none !important;
}

/* Show native-only elements when in native app */
body.native-app .native-only {
  display: flex !important;
}

/* Section labels use block display */
body.native-app .nav-section-label.native-only {
  display: block !important;
}

/* Recording indicator: hidden by default, shown only when recording is active */
body.native-app .recording-indicator.native-only {
  display: none !important;
}

body.native-app .recording-indicator.native-only.visible {
  display: flex !important;
}

/* ============================================
   List/Card View Toggle (ISSUE 1)
   ============================================ */

/* View container holds both list and cards */
.view-container {
  position: relative;
  width: 100%;
}

/* Hide/show based on view mode */
.view-container[data-view-mode="list"] .cards-grid {
  display: none !important;
}

.view-container[data-view-mode="list"] .list-view {
  display: block !important;
}

.view-container[data-view-mode="cards"] .list-view {
  display: none !important;
}

.view-container[data-view-mode="cards"] .cards-grid {
  display: grid !important;
}

/* List view styles */
.list-view {
  display: none; /* Hidden by default, shown when view-mode="list" */
}

/* Cards wrapper - shown by default (cards is the default view) */
.cards-grid-wrapper {
  display: block;
}

.list-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: var(--space-px) solid var(--border-color);
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.list-row:hover {
  background: var(--bg-card-hover);
}

.list-row:last-child {
  border-bottom: none;
}

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

.list-row-icon.type-task { color: var(--color-task); }
.list-row-icon.type-idea { color: var(--color-idea); }
.list-row-icon.type-memory { color: var(--color-memory); }
.list-row-icon.type-knowledge { color: var(--color-knowledge); }
.list-row-icon.type-output { color: var(--color-output); }
.list-row-icon.type-project { color: var(--color-project); }

.list-row-title {
  flex: 1;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.list-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.list-row-status {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Status badge colors */
.list-row-status.status-active { background: #dcfce7; color: #166534; }
.list-row-status.status-pending { background: #fef3c7; color: #92400e; }
.list-row-status.status-in_progress { background: #dbeafe; color: #1e40af; }
.list-row-status.status-completed { background: #f3f4f6; color: #4b5563; }
.list-row-status.status-blocked { background: #fee2e2; color: #991b1b; }

.list-row-project {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.list-row-time {
  color: var(--text-muted);
  font-size: var(--text-xs);
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

/* View toggle button styling */
.view-toggle {
  display: inline-flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding: 2px;
  gap: 2px;
}

.view-toggle-btn {
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.view-toggle-btn:hover:not(.active) {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

.view-toggle-btn.active {
  background: var(--accent);
  color: white;
}

.view-toggle-btn svg {
  width: 16px;
  height: 16px;
}


/* Handle cards-grid-wrapper for outputs/ideas sections */
.view-container[data-view-mode="list"] .cards-grid-wrapper {
  display: none !important;
}

.view-container[data-view-mode="cards"] .cards-grid-wrapper {
  display: block !important;
}

/* ============================================
   Modal Typography Hierarchy (ISSUE 2)
   ============================================ */

.bottom-sheet-content h1,
.markdown-content h1 {
  font-size: var(--text-2xl);    /* 24px */
  font-weight: var(--font-bold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: #111827;
  line-height: 1.3;
}

.bottom-sheet-content h2,
.markdown-content h2 {
  font-size: var(--text-xl);   /* 20px */
  font-weight: var(--font-semibold);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: #1f2937;
  line-height: 1.4;
}

.bottom-sheet-content h3,
.markdown-content h3 {
  font-size: var(--text-lg);      /* 16px */
  font-weight: var(--font-semibold);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: #374151;
  line-height: 1.5;
}

.bottom-sheet-content p,
.markdown-content p {
  margin-bottom: var(--space-3);
  line-height: 1.6;
  color: #374151;
}

.bottom-sheet-content ul,
.bottom-sheet-content ol,
.markdown-content ul,
.markdown-content ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-3);
}

.bottom-sheet-content li,
.markdown-content li {
  margin-bottom: var(--space-1);
  line-height: 1.5;
}

.bottom-sheet-content code,
.markdown-content code {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.875em;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-xs);
}

.bottom-sheet-content pre,
.markdown-content pre {
  background: #1f2937;
  color: #f9fafb;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: var(--space-3);
}

.bottom-sheet-content pre code,
.markdown-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.bottom-sheet-content blockquote,
.markdown-content blockquote {
  border-left: 4px solid var(--accent);
  padding-left: var(--space-4);
  margin-left: 0;
  margin-bottom: var(--space-3);
  color: #6b7280;
  font-style: italic;
}

/* First paragraph / H1 should not have extra top margin */
.bottom-sheet-content > :first-child,
.markdown-content > :first-child {
  margin-top: 0 !important;
}

/* ============================================
   Pull-to-Refresh Indicator (Mobile)
   ============================================ */

#pull-refresh-indicator {
  position: fixed;
  top: -100px;
  left: 50%;
  margin-left: -100px; /* Half of approximate width for centering */
  width: 200px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: none; /* No transition so JS can control opacity immediately */
}

.pull-refresh-spinner {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

#pull-refresh-indicator.ready .pull-refresh-spinner svg {
  animation: spin 1s linear infinite;
}

#pull-refresh-indicator.refreshing .pull-refresh-spinner svg {
  animation: spin 0.8s linear infinite;
}

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

.pull-refresh-text {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}

#pull-refresh-indicator.ready .pull-refresh-text {
  color: var(--accent);
}

#pull-refresh-indicator.refreshing .pull-refresh-text {
  color: var(--accent);
}

/* Only show on mobile/touch devices */
@media (min-width: 769px) {
  #pull-refresh-indicator {
    display: none !important;
  }
}

/* ============================================
   Floating Action Button (FAB) — Basecamp Theme
   ============================================ */

.fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-2xl);
  background: var(--highlight);
  color: var(--text-inverse);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-highlight);
  transition: all var(--duration-fast) var(--ease-out);
  z-index: var(--z-fixed);
  -webkit-tap-highlight-color: transparent;
}

.fab:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-2xl), var(--shadow-highlight);
}

.fab:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-md);
}

.fab svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.fab:active svg {
  transform: rotate(90deg);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .fab {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }

  /* Move up when chat is open to avoid overlap */
  body.chat-open .fab {
    bottom: calc(var(--chat-height, 50vh) + 20px);
  }

  /* Move up when keyboard is visible (iOS) */
  body.keyboard-visible .fab {
    bottom: calc(var(--keyboard-height, 300px) + 20px);
  }
}

/* Native app safe area adjustment */
body.native-app .fab {
  bottom: calc(24px + env(safe-area-inset-bottom, 0));
}

@media (max-width: 768px) {
  body.native-app .fab {
    bottom: calc(20px + env(safe-area-inset-bottom, 0));
  }
}

/* Hide when modal is open to avoid confusion */
.modal-overlay.open ~ .fab {
  pointer-events: none;
  opacity: 0.3;
}

/* Hide when chat is open (controlled via JS) */
.fab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

/* Subtle pulse animation to draw attention (optional) */
@keyframes fab-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

/* Optionally add pulse on first load - remove this if too flashy */
.fab.pulse-once {
  animation: fab-pulse 1.5s ease-out;
}

/* ============================================
   Voice & Recording Styles
   ============================================ */

/* Voice/Recording Entity Colors */
:root {
  --color-voice: #E74C3C;
  --color-voice-dim: rgba(231, 76, 60, 0.12);
  --color-voice-light: rgba(231, 76, 60, 0.06);
  --color-recording: #E74C3C;
  --color-recording-dim: rgba(231, 76, 60, 0.12);
}

/* Nav type dots for voice */
.nav-type-dot.voice,
.nav-type-dot.recording {
  background: var(--color-voice);
}

/* ============================================
   Global Recording Indicator
   ============================================ */

.recording-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--color-error);
  color: white;
  border-radius: 1rem;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  animation: recording-pulse 1.5s ease-in-out infinite;
}

.recording-indicator .recording-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: recording-dot-pulse 1s ease-in-out infinite;
}

@keyframes recording-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes recording-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

/* ============================================
   Recordings List View (Redesigned)
   ============================================ */

.recordings-list-container {
  padding-bottom: 100px; /* Space for floating record button */
}

.recordings-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.recordings-empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.recordings-empty-state .empty-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.recordings-empty-state .empty-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* Recording Row - New aligned layout */
.recording-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.recording-row:hover {
  background: var(--bg-card-hover);
}

.recording-row:active {
  background: var(--bg-tertiary);
}

.recording-row-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.recording-row-play-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.recording-row-content {
  flex: 1;
  min-width: 0;
}

.recording-row-title {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.recording-row-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.recording-row-duration {
  font-family: var(--font-mono);
}

.recording-row-badge {
  color: var(--color-success);
  font-weight: 600;
}

.recording-row-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Floating Record Button */
.floating-record-btn-container {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.floating-record-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--color-recording);
  background: var(--bg-card);
  color: var(--color-recording);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
  transition: all var(--duration-fast);
}

.floating-record-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(231, 76, 60, 0.4);
}

.floating-record-btn:active {
  transform: scale(0.95);
}

/* Legacy classes for compatibility */
.recordings-header {
  display: none; /* Hidden - using new layout */
}

.recordings-description {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

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

.recording-duration {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.recording-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.recording-row-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.transcript-badge {
  font-size: var(--text-xs);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.transcript-badge.local {
  background: var(--color-info-dim);
  color: var(--color-info);
}

.transcript-badge.cloud {
  background: var(--color-success-dim);
  color: var(--color-success);
}

.recording-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.recording-status.transcribed {
  color: var(--color-success);
}

.recording-status.transcribing {
  color: var(--color-info);
}

.recording-status.failed {
  color: var(--color-error);
}

.recording-status .status-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.recording-status.transcribing .status-icon {
  animation: spin 1s linear infinite;
}

/* ============================================
   Recording View (Active Recording)
   ============================================ */

.recording-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: 2.5rem;
  padding: 2rem;
}

.recording-timer {
  font-size: 5rem;
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.recording-timer.active {
  color: var(--color-error);
}

.recording-timer.paused {
  color: var(--color-warning);
}

.recording-title-wrapper {
  width: 100%;
  max-width: 300px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.recording-title-wrapper.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  position: absolute;
}

.recording-title-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  text-align: center;
  background: var(--bg-card);
  color: var(--text-primary);
}

.recording-title-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.recording-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-height: 24px;
}

.recording-status .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.3s ease;
}

.recording-status.recording .status-dot {
  background: var(--color-error);
  animation: recording-dot-pulse 1s ease-in-out infinite;
}

.recording-status.paused .status-dot {
  background: var(--color-warning);
  animation: none;
}

.recording-controls {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.recording-controls.hidden {
  display: none;
}

.recording-controls-active {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.recording-controls-active.hidden {
  display: none;
}

.record-button {
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.record-button:active {
  transform: scale(0.95);
}

/* Start button - large red circle with mic icon */
.record-button-start {
  width: 100px;
  height: 100px;
  background: var(--color-error);
  color: white;
}

.record-button-start:hover {
  background: var(--color-error-hover);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Pause/Resume button - smaller orange circle */
.record-button-pause {
  width: 64px;
  height: 64px;
  background: var(--color-warning);
  color: white;
}

.record-button-pause:hover {
  background: #d97706;
  transform: scale(1.05);
}

.record-button-pause.paused {
  background: var(--color-success);
}

.record-button-pause.paused:hover {
  background: #059669;
}

.record-button-pause .icon-pause,
.record-button-pause .icon-play {
  display: block;
}

.record-button-pause .icon-pause.hidden,
.record-button-pause .icon-play.hidden {
  display: none;
}

/* Stop button - larger red circle */
.record-button-stop {
  width: 80px;
  height: 80px;
  background: var(--color-error);
  color: white;
}

.record-button-stop:hover {
  background: var(--color-error-hover);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.recording-info {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  min-height: 20px;
}

/* Floating Recorder Indicator */
.floating-recorder {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 80px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: float-in 0.3s ease;
}

.floating-recorder.hidden {
  display: none;
}

.floating-recorder-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-error);
  animation: recording-dot-pulse 1s ease-in-out infinite;
}

.floating-recorder.paused .floating-recorder-dot {
  background: var(--color-warning);
  animation: none;
}

.floating-recorder-time {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  min-width: 45px;
}

.floating-recorder-btn {
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.floating-recorder-btn:hover {
  color: var(--text-primary);
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================
   Transcript View
   ============================================ */

.transcript-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.transcript-title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

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

.transcript-menu-btn {
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
}

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

/* Audio Player */
.audio-player {
  padding: 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.audio-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.audio-btn {
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast);
}

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

.audio-play-btn {
  width: 50px;
  height: 50px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-play-btn:hover {
  background: var(--accent-hover);
}

.audio-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.audio-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 40px;
}

.audio-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-color);
  border-radius: 2px;
  cursor: pointer;
}

.audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

/* Transcript Tabs */
.transcript-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.transcript-tab {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.transcript-tab:hover {
  background: var(--bg-tertiary);
}

.transcript-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.transcript-options {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.toggle-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

/* Speaker Legend */
.speaker-legend {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color);
}

.speaker-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.speaker-chip:hover {
  background: var(--bg-card-active);
}

.speaker-chip:active {
  transform: scale(0.95);
}

.speaker-chip .speaker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.speaker-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.speaker-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* Speaker Colors */
.speaker-1 { --speaker-color: #3498DB; }
.speaker-2 { --speaker-color: #27AE60; }
.speaker-3 { --speaker-color: #9B59B6; }
.speaker-4 { --speaker-color: #E67E22; }
.speaker-5 { --speaker-color: #E74C3C; }
.speaker-6 { --speaker-color: #1ABC9C; }

/* Transcript Segments */
.transcript-segments {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

.transcript-segment {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--duration-fast);
}

.transcript-segment:last-child {
  border-bottom: none;
}

.transcript-segment.active {
  background: var(--accent-softer);
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.speaker-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--speaker-color, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.segment-content {
  flex: 1;
  min-width: 0;
}

.segment-timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 0.25rem;
  display: inline-block;
}

.segment-timestamp:hover {
  color: var(--accent);
  text-decoration: underline;
}

.segment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.speaker-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.speaker-name:hover {
  background: var(--bg-tertiary);
}

.speaker-name:active {
  transform: scale(0.95);
}

.segment-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
}

.segment-time:hover {
  color: var(--accent);
  text-decoration: underline;
}

.segment-text {
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

/* Transcript Actions */
.transcript-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.transcript-actions button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ============================================
   Transcription Progress Overlay
   ============================================ */

.transcription-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.transcription-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.transcription-modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  min-width: 280px;
  max-width: 90%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.transcription-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
}

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

.transcription-status {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.transcription-progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.transcription-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  width: 0;
}

/* ============================================
   Modal Dialogs (Recording/Transcript)
   ============================================ */

.recording-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

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

.modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast);
}

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

.modal-body {
  padding: 1.25rem;
}

.modal-body p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color var(--duration-fast);
}

.modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

.modal-footer button {
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.modal-cancel-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.modal-cancel-btn:hover {
  background: var(--bg-secondary);
}

.modal-confirm-btn {
  background: var(--accent);
  border: none;
  color: white;
}

.modal-confirm-btn:hover {
  opacity: 0.9;
}

.btn-danger {
  background: var(--color-error) !important;
  border: none !important;
  color: white !important;
}

.btn-danger:hover {
  opacity: 0.9 !important;
}

/* ============================================
   Dropdown Menus
   ============================================ */

.dropdown-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  padding: 0.5rem;
  z-index: 1000;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}

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

.dropdown-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.dropdown-item-danger {
  color: var(--color-error);
}

.dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.dropdown-item-danger svg {
  color: var(--color-error);
}

/* ============================================
   Voice Chat View
   ============================================ */

.voice-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
}

.voice-chat-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem 0;
}

/* Voice Orb */
.voice-orb {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-dim) 0%, var(--bg-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.voice-orb-inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  transition: all 0.3s ease;
}

.voice-orb.connecting {
  animation: orb-pulse 1.5s ease-in-out infinite;
}

.voice-orb.listening {
  background: radial-gradient(circle, var(--color-success-dim) 0%, var(--bg-secondary) 100%);
}

.voice-orb.listening .voice-orb-inner {
  background: var(--color-success);
  animation: orb-listen 1s ease-in-out infinite;
}

.voice-orb.processing {
  background: radial-gradient(circle, var(--color-warning-dim, rgba(245, 158, 11, 0.2)) 0%, var(--bg-secondary) 100%);
}

.voice-orb.processing .voice-orb-inner {
  background: var(--color-warning, #f59e0b);
  animation: orb-process 0.5s ease-in-out infinite;
}

.voice-orb.speaking {
  background: radial-gradient(circle, var(--color-info-dim) 0%, var(--bg-secondary) 100%);
}

.voice-orb.speaking .voice-orb-inner {
  background: var(--color-info);
  animation: orb-speak 0.3s ease-in-out infinite alternate;
}

.voice-orb.error {
  background: radial-gradient(circle, var(--color-error-dim) 0%, var(--bg-secondary) 100%);
}

.voice-orb.error .voice-orb-inner {
  background: var(--color-error);
}

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

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

@keyframes orb-process {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}

@keyframes orb-speak {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

.voice-status-text {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  text-align: center;
}

/* Tool Status (shown during processing) */
.voice-tool-status {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-3);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  min-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.voice-tool-status.visible {
  opacity: 1;
}

.voice-tool-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: tool-pulse 1s ease-in-out infinite;
}

@keyframes tool-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Live Transcript */
.voice-live-transcript {
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: center;
  min-height: 2rem;
  padding: 1rem;
  font-style: italic;
}

/* Voice Chat Messages */
.voice-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.voice-message {
  padding: 1rem;
  border-radius: var(--radius-lg);
  max-width: 80%;
}

.voice-message.user {
  background: var(--accent);
  color: white;
  align-self: flex-end;
}

.voice-message.assistant {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  align-self: flex-start;
}

.voice-message .see-full-response {
  font-size: var(--text-xs);
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  cursor: pointer;
  text-decoration: underline;
}

.voice-message.assistant .see-full-response {
  color: var(--accent-secondary);
}

/* Voice Chat Controls */
.voice-chat-controls {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}

.voice-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.voice-button:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}

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

.voice-button.listening {
  background: var(--color-success);
}

.voice-button.end {
  background: var(--color-error);
}

/* ============================================
   Empty States
   ============================================ */

.recordings-empty,
.transcript-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text-muted);
}

.recordings-empty svg,
.transcript-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.recordings-empty h3,
.transcript-empty h3 {
  margin: 0 0 0.5rem;
  color: var(--text-secondary);
}

.recordings-empty p,
.transcript-empty p {
  margin: 0;
  font-size: var(--text-sm);
}

/* ============================================
   Mobile Adjustments for Voice/Recording
   ============================================ */

@media (max-width: 768px) {
  .recording-timer {
    font-size: 3rem;
  }

  .record-button {
    width: 70px;
    height: 70px;
  }

  .record-button.pause,
  .record-button.resume {
    width: 50px;
    height: 50px;
  }

  .voice-orb {
    width: 120px;
    height: 120px;
  }

  .voice-orb-inner {
    width: 60px;
    height: 60px;
  }

  .transcript-actions {
    flex-wrap: wrap;
  }

  .transcript-actions button {
    flex-basis: calc(50% - 0.375rem);
  }
}

/* Session Picker Modal */
.session-picker {
  padding: var(--space-4);
}

.session-picker h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.session-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.session-item {
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.session-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

.session-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.session-picker-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ============================================
   Chat Images - Clickable inline images
   ============================================ */

.chat-image-link {
  display: block;
  margin: var(--space-3) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chat-image-link:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chat-image-link:active {
  transform: scale(0.98);
}

.chat-image {
  display: block;
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

/* Full width images in chat for better visibility */
.chat-message.assistant .chat-image {
  max-width: min(100%, 500px);
}